vue项目使用fullcalendar绘制自己想要的日历视图

由于业务需求,需要构建时间线视图和个人日历视图，经过师父指点发现了一款功能强大的日历插件（JavaScript Calendar），支持React, Vue, Angular and TypeScript 。真的很强大，谁用谁知道啊，哈哈哈，还有时区和语言设置，而且也一直在保持更新，最近一次更新时间是2020.5.20，文档很全，可以自定义你需要的各种样式和需求，并且拓展性很强。

下面简单上几张demo和文档的图：

如果你是第一次用这个插件千万别被这复杂的英文文档吓退缩，相信我，好好研究，花一天时间你就能吃透了，接下来就能得心应手的使用它，因为我就是从零开始去研究这个插件，然后成功的绘制出了我们产品和UI想要的功能和效果，如果你英文不太好，这里可以参照最新FullCalendar中文文档。

下面是我改造之后的效果图：

下面简单描述一下我的代码和处理逻辑：

// 安装相关插件
npm install --save @fullcalendar/core 
npm install --save @fullcalendar/resource-timeline 
npm install --save @fullcalendar/timeline

//按需引入
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin from '@fullcalendar/interaction'
import '@fullcalendar/core/main.css'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
import '@/styles/cover.scss' //覆盖样式文件

<FullCalendar ref="calendar" default