本文字數：747 字 9圖

閱讀完需：約 4 分鐘

點擊上方“青年碼農”關注

回復“源碼”可獲取各種資料

FullCalendar 是一個支持 React、Vue、Angular 和原生 JavaScript 的日歷插件，FullCalendar 擁有超過 300 種設置，支持模塊化導入，幾乎可以實現任何效果。

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

官方指南提示不會深入介紹Vue的使用，需要自己根據示例和可運行的項目參考。

一 安裝

先安裝核心依賴

yarn add @fullcalendar/vue @fullcalendar/core

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

二 插件

下面這些是免費的插件，包含了大部分場景。

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

三?使用

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

導入了核心組件和一些擴展組件，在?components?中注冊組件

最后使用?FullCalendar?

運行項目，日歷大概就是這個樣子。

options 屬性就是控制日歷的關鍵。

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

四?參考資料

官方：https://fullcalendar.io/

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。