vue中使用FullCalendar日历插件

---

前言

因为要实现一个类似任务日历的功能，于是翻看了vue创造的日历组件发现不能符合要求的，所以又找了几个满足要求的日历组件。例如：calendar、react-big-calendar。
但查遍了百度发现基本没人用calendar，偶尔一两个也不是基于vue的，且官方文档也没有给出vue的实例，对不懂英语的搬运工及其不友好。
而react-big-calendar是专门为react开发而开发的，自然也找不到搬迁到vue的文章。
于是就经过多方查询，终于从茫茫人海中翻出了FullCalendar。

ps：2022/8/31 发现一个vue的FullCalendar封装插件：vue-lunar-full-calendar。但本博文已使用官方提供的插件，有兴趣的小伙伴可以自行了解。
vue-lunar-full-calendar文档

FullCalendar官方文档很友好的给了vue示例，甚至在github上最新的vite+typesript+vue3示例都有，属实牛逼。

一、FullCalendar兼容

FullCalendar 与Vue JavaScript 框架无缝集成。它提供了一个与 FullCalendar 标准 API 的功能完全匹配的组件。
最新版本的 FullCalendar 兼容 Firefox、Chrome、Safari、Edge 和 IE 11+。

二、使用步骤

1.引入库

代码如下（本文示例以vue2为主，vue3请前往官网查看示例）：

npm install @fullcalendar/daygrid 
npm install @fullcalendar/interaction 
npm install @fullcalendar/timegrid 
npm install @fullcalendar/vue 
npm install style-loader

直接一串下载

npm install @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid @fullcalendar/vue style-loader

2.载入使用

代码如下：

JS部分，暂时只写一些基础