vue-fullcalendar 用法详解 （vue 2.0的日历插件）

在这里介绍下vue框架中，vue-fullcalendar插件的使用

讲几个注意的地方：

1. 首先需要下载vue-fullcalendarnpm：install vue-fullcalendar;
2. 在vue页面中引用：import FullCalendar from 'vue-fullcalendar';

4. @changeMonth=“changeMonth” //改变月份
   @eventClick=“eventClick” //事件触发
   @dayClick=“dayClick” //点击某一天
   @moreClick=“moreClick”，//点击更多事件
   在这几个方法中写点击事件，实现与数据库的交互。
5. 绑定数据

monthData: [
{
title : ‘eeeeeeeee’, // 事件内容
start : ‘2018-12-11’, // 事件开始时间
end : ‘2018-12-30’, // 事件结束时间
cssClass: ‘red’ // 事件的样式 class名（由后台返回数据） red为自己定义的class名
},
{
title : ‘sssss’,
start : ‘2018-12-25’,
end : ‘2018-12-30’,
cssClass: ‘blue’
},
{
title : ‘dddddddd’,
start : ‘2018-12-09’,
end : ‘2018-12-30’,
cssClass: ‘blue’
},
{
title : ‘cccccc’,
start : ‘2018-12-20’,
end : ‘2018-12-30’
cssClass: ‘red’
},
{
title : ‘aaaaaa’,
start : ‘2018-12-01’,
end : ‘2018-12-30’,
cssClass: ‘red’
},
{
title : ‘bbbbbb’,
start : ‘2018-12-05’,
end : ‘2019-1-10’,
cssClass: ‘blue’
} ]

最终效果：

详情请看原文