在Vue项目中用fullcalendar制作日程表的示例代码


Posted in Javascript onAugust 04, 2019

前言

最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图:

在Vue项目中用fullcalendar制作日程表的示例代码

安装

FullCalendar的功能被分解为“插件”。如果您需要它提供的功能,您只需要包含一个插件。

也就是说,FullCalendar v4所有插件都得单独安装引用。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

引用并初始化

引用、注册FullCalendar组件,得到一个月视图的日历。

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
 components: {
  FullCalendar
 },
 data() {
  return {
   calendarPlugins: [ dayGridPlugin ]
  }
 }
}

</script>
<template>
 <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>
<style lang='less'>
  //用什么插件必须引入相应的样式表,否则不能正常显示
  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
</style>

功能定制

为了完成复杂功能,需要引用更多插件,插件列表:

https://fullcalendar.io/docs/plugin-index

语言设置简体中文

<FullCalendar locale="zh-cn" />

如果表头加了button的话,button文字要单独做处理,给每个button的英文名称加一个中文的映射,例:

<FullCalendar
   :header="{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
   }"
   :buttonText="buttonText" 
   />
data () {
  return {
   buttonText: {
    today: '今天',
    month: '月',
    week: '周',
    day: '天'
   }
  }
 }

点击日历添加事件

想要触发dateClick事件必须先安装引用interaction插件,文档链接:https://fullcalendar.io/docs/dateClick

npm install --save @fullcalendar/interaction

<FullCalendar @dateClick="handleDateClick" />
handleDateClick (arg) {
   if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
    this.calendarEvents.push({ // add new event data
     title: 'New Event',
     start: arg.date,
     allDay: arg.allDay
    })
   }
  }

点击事件查看详情

<FullCalendar @eventClick="handleEventClick" />
handleEventClick (info) {
   alert('Event: ' + info.event.title)
  }

完整例子在我的github项目里,项目地址:https://github.com/Inspiration1/asteroid

官方文档:

https://fullcalendar.io/docs/vue

https://fullcalendar.io/docs#toc

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
JQuery触发事件例如click
Sep 11 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 #Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 #Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
You might like
php生成随机数或者字符串的代码
2008/09/05 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php编程每天必学之验证码
2016/03/03 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
快速了解Node中的Stream流是什么
2019/02/13 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
在Python下尝试多线程编程
2015/04/28 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python如何telnet到网络设备
2021/02/18 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
2015年安全保卫工作总结
2015/05/14 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Python 视频画质增强
2022/04/28 Python