fullcalendar插件在vue中的使用

最近公司刚好有一个日历的需求，选择了Fullcalendar这个插件进行开发，开发过程中，发现网上关于fullcalendar插件在vue中的使用分享并不多，于是就顺便总结了一篇关于vue中使用fullcalendar的文章，希望对小伙伴有帮助。

不想看文字的，可以直接去看源代码，项目地址：https://github.com/littlePig-...

这个是Fullcalendar的例子，开发过程中一个很好参考的demo，不局限于vue写法、jQ的写法，有需要的小伙伴可以去看看。

https://codesandbox.io/search...

---

那我们现在开始~

一、首先安装fullcalendar的依赖包，https://fullcalendar.io/docs/... 这个地址是插件合集。

红框部分是比较常用的插件，可自行去查看插件对应的视图，方便使用。

---

@fullcalendar/interaction 这个插件主要是用户事件的拖拽交互。
@fullcalendar/list 通常日历是栅格化的日历格子显示，使用这个插件就是把日历用列表的形式显示。视图显示如下图：

yarn add --save @fullcalendar/daygrid  // 日历格子显示
yarn add --save @fullcalendar/list  // 列表显示视图用
yarn add --save @fullcalendar/timegrid // 日历时间线视图
yarn add --save @fullcalendar/interaction // 拖拽插件

---

二、安装完依赖插件， 下面是编写自定义头部、引入fullcalendar插件

需要使用自定义头部的场景：如果需要在头部增加一些自定义下拉选择框，输入框，查询框的情况。官网提供的头部Toolbar中只有一个customButtons属性可自定义，但只能自定义按钮的文本，无法插入html元素。

官网默认的头部，这边就不再重复说了，官网随便找一个例子，都可以找到哈~

这个是Fullcalendar的api合集，方便使用、查找。

下面贴代码：

写完了html的部分，下面写对应的methods方法，主要是通过getApi()获取到Fullcalendar的实例，调用changeView方法实现视图的切换。

可选的值: 除了dayGridMonth、dayGridWeek、timeGridWeek、resourceTimeline 等等，还可以自定义views

三、功能点实例

自定义头部大概已经实现了，那么接下来开始写咱们的功能啦。

功能点一： 日历的单击、双击功能、

直接在calendarOptions对象中使用方法属性dateClick， 通过定时器来判断是否双击还是单击事件。

let clickCount = 0;
let prev = ''; // 上一次点击的dom节点

data() {
    return {
        calendarOptions: {
            ...
            dateClick: this.handleEventClick,
        }
    }
}

 methods: {
     ......
    handleEventClick() {
        if (e.dateStr !== prev) {
            clickCount = 0;
        }
        clickCount += 1;
        prev = e.dateStr;
        setTimeout(() => {
            if (clickCount === 2) {
                console.log('db click');
            } else if (clickCount === 1) {
                console.log('one click');
            }
            clickCount = 0;
        }, 300)
    },
}

---

功能点二：移到事件上显示弹框并操作

官网有提供两个方法，一个是tooltip（图一）, 一个是popover（图二）。

---

---

官网提供的方法以原生js为主的，这边主要以vue的方式来实现。就是通过官网提供的slot:eventContent。当然也可以自行写一个。这边提供两种思路。

---

更推荐思路一：通过插槽slot的方式去写

结合element-ui组件，方便实现popover功能。

思路二：自己写，监听鼠标事件，通过定位的方式实现。这个仅供参考思路哈~

---

功能点3：新增事件

通过点击按钮，实现在日历中动态增加事件。

两种方法（看个人喜好选择）：
一、 使用官方提供的方法 addEvent
二、利用vue的双向数据绑定，直接改变calendarOptions里面的event属性

---

功能点四：修改周视图上面的日期

默认显示的格式是 星期一 11/19, 需要自定义的话，可以在views属性中自定义周试图来实现不同格式的时间。类似月视图也是类似的方法。

views: {
    customeGridWeek: {
        type: 'timeGridWeek',
        dayHeaderFormat: {
            weekday: 'long',
        },
    },
},

//当然也可以直接在calendarOptions属性设置 
dayHeaderFormat: {
    weekday: 'long',
},
但这个就是争对全部视图了，如果只是争对周试图进行修改的话，建议自定义修改周视图

视图如下：

---

下面顺便分享一下 resourceTimeLine 的时间线展示，我刚开始搞的时候，一直显示不出来对应的日历。报没有安装相应的插件的错误，但其实已经引入了对应的插件。去网上搜也没有搜到对应的解决方法。

然后对比网上可以正常使用同学的依赖包版本，我就直接把我的版本绑定到对应的 5.5.0。然后重新安装依赖，神奇般的就可以正常显示了，所以不清楚最新版是不是做了某些改动，需要额外配置什么东西。目前不知道为啥最新版无法正常显示。知道的小伙伴可以评论告知我一下哈~

resourceTimeLine

我们要在自定义头部的地方增加一个下拉选择，手动切换对应的 resourceTimeLine 视图。

主要是分享三个点：
1、修改视图上面的时间线格式（自定义views，然后自由结合这些属性
slotLabelFormat、duration、dayHeaderFormat、slotDuration）
2、左侧的resource自定义显示，这个属性resourceLabelContent
3、动态增加resourceTimeline事件。

争对配置日历时间线格式的，最好不要全局设置，除非你想全部视图的时间线显示是一样的。最好的方式是通过自定义views, 分别设置时间线格式。