日程表组件FullCalendar(V4.4.1)使用小结

FullCalendar是一款功能强大，用法简单的js日程表组件，目前已支持React，Vue和Angular三大主流框架。最近Vue项目需要在日程表进行数据的增删改查，通过官方文档和demo顺利完成，在此特意记录下使用FullCalendar(V4.4.1)的踩坑过程。

1.组件下载

FullCalendar属于用啥下啥模式，官网罗列了各组件包详情，支持Package，zip和CDN三种下载方式，直接npm下载

npm install --save @fullcalendar/vue @fullcalendar/interaction @fullcalendar/timegrid

core、vue等提供核心类，interaction提供事件，daygrid、timegrid等则提供不同的日程表类型

2.组件注册

引入js和css文件，在vue内注册组件。

注意：FullCalendar的drag事件似乎依赖于jqueryUI，如需则记得一并引入（未引入之前drag无效）

3.组件基础API

plugins	日程表依赖的插件
defaultView	日程表加载时的初始视图
datesRender	callback，当日程表时间变动时触发
events	日程表的事件数据源

对@datesRender绑定数据请求事件可以在每次时间变动时实时刷新当前events

selectAllow	callback，判断当前日程块能否选择
eventAllow	callback，判断当前事件块能否选择
select	callback，当选择日程块时触发
eventClick	callback，当点击事件块时触发
eventResize	callback，当拖动事件块时间范围时触发
eventDrop	callback，当拖拽事件块移动时触发

此外还有一些格式化API，具体参考官网就不在此罗列了

4.注意事项

我绑定的events是一个数组，数组内对象的一些key是必须的

          {
            title: '张三 拔牙',  //展示在日程表上的事件块标题
            start: '2020-06-08 10:00:00',  //日程表事件的开始时间
            end: '2020-06-08 11:30:00',  //日程表事件的结束时间
            color: 'orange',  //填充色
            editable: false,  //能否编辑
            extendedProps: {name: '张三', id: 123, sex: 1,...}  //额外属性，可以用来存储原始的数据源以便数据处理
          },

event的dom事件非常丰富，点击、选择和拖拽能满足大部分需求，

结合弹窗组件（如element的Dialog对话框），可以实现数据实时修改的需求。

动图如下：

官方文档真的很详细，一定要仔细阅读