FullCalendar5.+在vue中一些有用的使用

最近想做一个类似飞书上日程管理的小demo，不愿意重复造轮子（其实是水准不够），选来选去选择了FullCalendar.js库。

虽然FullCalendar是一个jQuary的库，但是其实它的4.0+已经支持了vue，并且功能上，fullCalendar支持月历、周历、日程、日程精细到时间等等，非常的全面。

如何使用可以参考这一篇，写得很详细，但是目前fullCalendar已经出到5.+了，所以一些接口字段也有变化：

https://www.cnblogs.com/czk1634798848/p/13386178.html

本文就是依据我demo的需求，对上文没有提及的地方进行小小的补充～

需求一：header自定义

FullCalendar的header可以选择在左中右如何排布按钮和title的顺序，也支持（仅支持）自定义按钮，自定义按钮也仅支持有限的三种风格。

但是现在应该比较少人使用默认的bootstrap风格和图标了，那么如何自定义按钮和文字等header元素呢？

首先，在想要放我们自己的文字的地方加入自定义按钮

然后，在mount钩子的回调里面，找到我们自定义按钮，利用原生js，将它替换成我们想要的节点

最后，调整ui样式。

mount这个生命周期钩子，在5.+的版本里面，叫做eventDidMount，替换了之前版本的多个回调，需要注意一下。

上代码：

calendarOptions: {
        // 一些其它配置，省略
        // 。。。。。
        //header配置
        // 自定义按钮(其实包含文字，自定义图标等，通过自定义按钮的接口实现)
        customButtons: {
          // 自定义整个页面的标题
          calendarTitle: {
            theme: "true",
            text: "",
            click: function () {
              alert("clicked the custom button!");
            },
          },
          // 自定义一个设置图标按键
          setting: {
            theme: "true",
            text: "",
            click: function () {
              alert("clicked the custom button!");
            },
          },
        },
        headerToolbar: {
          // 日历头部按钮位置
          left: "calendarTitle",
          center: "prev title next",
          right: "today dayGridWeek,dayGridMonth setting",
        },
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
        },
        // 日历生命周期钩子,在这时对header进行div操作
        eventDidMount: () => {
          if (!this.$refs.myCalendar.$el.querySelector(".header-title")) {
            let parentsDiv = this.$refs.myCalendar.$el.querySelector(
              ".fc-toolbar-chunk"
            );
            let calendarDiv = this.$refs.myCalendar.$el.querySelector(
              ".fc-calendarTitle-button"
            );
            // console.log(calendarDiv);
            let titleEle = document.createElement("DIV");
            titleEle.innerHTML = '<div class="header-title">日程</div>';
            parentsDiv.insertBefore(titleEle, calendarDiv);
            calendarDiv.style.display = 'none';
          }
          if (!this.$refs.myCalendar.$el.querySelector(".header-setting-btn")) {
            let parentsDivs = this.$refs.myCalendar.$el.querySelectorAll(
              ".fc-toolbar-chunk"
            );
            let parentsDiv = parentsDivs[parentsDivs.length - 1]
            let settingBtnDiv = this.$refs.myCalendar.$el.querySelector(
              ".fc-setting-button"
            );
            let settingEle = document.createElement("DIV");
            settingEle.innerHTML = '<div class="header-setting-btn"></div>';
            // console.log(settingEle);
            parentsDiv.insertBefore(settingEle, settingBtnDiv);
            settingBtnDiv.style.display = 'none';
          }

        },

关于调整ui样式，虽然FullCanlendar中也开放了一些接口如viewClassNames等，但是如果有比较严格的ui图作为参考，仅仅利用它默认开放的classNames，不是很够用，阅读文档又很头痛，这里分享一种无脑覆盖ui的方式，适合各种ui库的个性化改造哦～

第一步 在src下添加styles文件夹，里面定义一个public.css或public.scss，作为全局的css文件；

第二步 在main.js中把这个public.css导入：

import '@/styles/public.scss'

第三步 打开浏览器的devtools，检查想要修改的元素，找到class name；

第四步 在public.css里，直接写样式覆盖掉原来的定义

就可以啦～