介绍
Vue-Fullcalendar 是一个基于 VueJS 2.x 的前端日历组件，它是 FullCalendar 的 Vue 版本。它支持日历的创建、删除、修改、拖动和放置等，适用于日历、预定系统和时间表等。
安装
使用 npm 安装
npm install vue-fullcalendar
使用 yarn 安装
yarn add vue-fullcalendar
引入
在主文件（一般是 main.js）中加入以下代码：
import FullCalendar from "vue-fullcalendar";
import "fullcalendar/dist/fullcalendar.css";
Vue.component("full-calendar", FullCalendar);使用
-- -------------------- ---- -------
----------
---- ---------
--------------
-------------------------
-------------------
----------------
----------------------------
------------------------------
-----------------
------
-----------
--------
------ ------- -
----- ------
----------- ---
------ -
------ -
----------- -
-
------ -------
------ ----------------------
---- ----------------------
--
--
--
--
-------- -
--------------------- -
-------------------
--
--
--
---------
-------
---- -
------------ ------- ---------- ------ -----------
----------------------- ------------
------------------------ ----------
----------- -------
------ --------
----------- -----
-
--------在组件的 data 中，定义 eventsData 数组，这个数组是用来渲染日历事件的，具体包括每个事件包含的属性参见官方文档。同时组件中还有一些属性可以配置，我们可以通过在组件中加入它们来修改：
- show-header：是否显示头部
- editable：是否可编辑
- event-drop：事件拖动和放置事件
- event-resize：事件改变大小时触发
示例代码
下面是一个完整的示例代码，你可以通过它来了解如何配置和使用 vue-fullcalendar：
-- -------------------- ---- -------
----------
---- ---------
--------------
-------------------------
-------------------
----------------
----------------------------
------------------------------
-----------------
------
-----------
--------
------ ------------ ---- -------------------
------ -------------------------------------
------ ------- -
----- ------
----------- ---
------ -
------ -
----------- -
-
------ -------
------ ----------------------
---- ----------------------
--
--
--
--
-------- -
--------------------- -
-------------------
--
--
--
---------
-------
---- -
------------ ------- ---------- ------ -----------
----------------------- ------------
------------------------ ----------
----------- -------
------ --------
----------- -----
-
--------结语
Vue-Fullcalendar 是一个非常优秀的 Vue 前端日历组件，它功能齐全，易于使用，并提供了一些配置项来适应各种需求。如果你正在做场地预定、考试时间安排等项目，它会是你很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f315d8b3b0ab45f74a8bd1c