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里，直接寫樣式覆蓋掉原來的定義

就可以啦～