本文字?jǐn)?shù)：747 字 9圖

閱讀完需：約 4 分鐘

點(diǎn)擊上方“青年碼農(nóng)”關(guān)注

回復(fù)“源碼”可獲取各種資料

FullCalendar 是一個(gè)支持 React、Vue、Angular 和原生 JavaScript 的日歷插件，FullCalendar 擁有超過 300 種設(shè)置，支持模塊化導(dǎo)入，幾乎可以實(shí)現(xiàn)任何效果。

此教程是基于Vue2，FullCalendar 同時(shí)也支持 Vue3，文檔在https://fullcalendar.io/docs/vue

官方指南提示不會(huì)深入介紹Vue的使用，需要自己根據(jù)示例和可運(yùn)行的項(xiàng)目參考。

一 安裝

先安裝核心依賴

yarn add @fullcalendar/vue @fullcalendar/core

如果有需要其他插件，也可以通過 yarn?或者?npm 安裝，官方提供插件列表（V5版本）

二 插件

下面這些是免費(fèi)的插件，包含了大部分場(chǎng)景。

還有一些需要額外付費(fèi)的插件。如timeline、timegrid、daygrid等插件。

三?使用

新建一個(gè)Vue組件或者在原有組件上導(dǎo)入，這里我就用一個(gè)新的組件（HelloWord.vue）作為示例，方便查看。

導(dǎo)入了核心組件和一些擴(kuò)展組件，在?components?中注冊(cè)組件

最后使用?FullCalendar?

運(yùn)行項(xiàng)目，日歷大概就是這個(gè)樣子。

options 屬性就是控制日歷的關(guān)鍵。

這里面列舉了部分屬性和事件，需要更詳細(xì)的api請(qǐng)看官方文檔：https://fullcalendar.io/docs?

四?參考資料

官方：https://fullcalendar.io/

文檔：https://fullcalendar.io/docs

插件：https://fullcalendar.io/docs/plugin-index

Vue：https://fullcalendar.io/docs/vue

總結(jié)

以上是生活随笔為你收集整理的FullCalendar - 开源的多功能 JavaScript 日历插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。