最近公司刚好有一个日历的需求，选择了Fullcalendar这个插件进行开发，开发过程中，发现网上关于fullcalendar插件在vue中的使用分享并不多，于是就顺便总结了一篇关于vue中使用fullcalendar的文章，希望对小伙伴有帮助。 **不想看文字的，可以直接去看源代码，项目地址：** 这个是Fullcalendar的例子，开发过程中一个很好参考的demo，不局限于vue写法、jQ的写法，有需要的小伙伴可以去看看。 https://codesandbox.io/search?refinementList%5Btemplate%5D=&refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=@fullcalendar/vue&page=2&configure%5BhitsPerPage%5D=12 ![](/img/bVcV1uR) ---------- **那我们现在开始~** ### 一、首先安装fullcalendar的依赖包，https://fullcalendar.io/docs/plugin-index 这个地址是插件合集。红框部分是比较常用的插件，可自行去查看插件对应的视图，方便使用。 ![插件合集.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/756cfa019b254fb59b1d54b824631658~tplv-k3u1fbpfcp-watermark.image?) ---------- @fullcalendar/interaction 这个插件主要是用户事件的拖拽交互。 @fullcalendar/list 通常日历是栅格化的日历格子显示，使用这个插件就是把日历用列表的形式显示。视图显示如下图： ![列表形式.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/707262ac07494db9918e11a1e37d3472~tplv-k3u1fbpfcp-watermark.image?) ``` yarn add --save @fullcalendar/daygrid // 日历格子显示 yarn add --save @fullcalendar/list // 列表显示视图用 yarn add --save @fullcalendar/timegrid // 日历时间线视图 yarn add --save @fullcalendar/interaction // 拖拽插件 ``` ---------- ### 二、安装完依赖插件，下面是编写自定义头部、引入fullcalendar插件 ![自定义日历头部.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d44f3e180c64830b733127db55fa4f9~tplv-k3u1fbpfcp-watermark.image?) **需要使用自定义头部的场景：如果需要在头部增加一些自定义下拉选择框，输入框，查询框的情况。官网提供的头部`Toolbar`中只有一个`customButtons`属性可自定义，`但只能自定义按钮的文本，无法插入html元素。`** 官网默认的头部，这边就不再重复说了，官网随便找一个例子，都可以找到哈~ 这个是[Fullcalendar的api合集](https://fullcalendar.io/docs#toc)，方便使用、查找。下面贴代码： ``` ``` 写完了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（图二）。 ![图一.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d96de720325c4c26b1b295675c7ca68d~tplv-k3u1fbpfcp-watermark.image?) ---------- ![图二.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16ee96e45dd84a07938a7db8ea9b38bc~tplv-k3u1fbpfcp-watermark.image?) ---------- 官网提供的方法以原生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', }, 但这个就是争对全部视图了，如果只是争对周试图进行修改的话，建议自定义修改周视图 ``` 视图如下： ![周视图.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ccc4ef6475247bd95023380a89cdb2e~tplv-k3u1fbpfcp-watermark.image?) ---------- 下面顺便分享一下 `resourceTimeLine` 的时间线展示，我刚开始搞的时候，一直显示不出来对应的日历。报没有安装相应的插件的错误，但其实已经引入了对应的插件。去网上搜也没有搜到对应的解决方法。然后对比网上可以正常使用同学的依赖包版本，我就直接把我的版本绑定到对应的 5.5.0。然后重新安装依赖，神奇般的就可以正常显示了，所以不清楚最新版是不是做了某些改动，需要额外配置什么东西。目前不知道为啥最新版无法正常显示。知道的小伙伴可以评论告知我一下哈~ **resourceTimeLine** 我们要在自定义头部的地方增加一个下拉选择，手动切换对应的 `resourceTimeLine` 视图。主要是分享三个点： 1、修改视图上面的时间线格式（`自定义views`，然后自由结合这些属性 `slotLabelFormat`、`duration`、`dayHeaderFormat`、`slotDuration`） 2、左侧的resource自定义显示，这个属性`resourceLabelContent` 3、动态增加resourceTimeline事件。 **争对配置日历时间线格式的，最好不要全局设置，除非你想全部视图的时间线显示是一样的。最好的方式是通过自定义views, 分别设置时间线格式。** ![周时间线.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1dccf9e5fada4fe6919e49ce5274f04a~tplv-k3u1fbpfcp-watermark.image?) ```

{{ title }}

{{ title }}

{{ title }}