介绍
vue-fullcalendar2 是一个 Vue.js 组件，它是 FullCalendar 的一种 Vue.js 封装。FullCalendar 是一个全功能的响应式日历插件，可以集成到任何 Web 应用程序中。
使用 vue-fullcalendar2 可以方便地在 Vue.js 应用程序中集成 FullCalendar 功能。
安装
安装 vue-fullcalendar2 的命令：
npm install vue-fullcalendar2 --save
使用
在 main.js 中引入 vue-fullcalendar2：
import Vue from 'vue' import FullCalendar from 'vue-fullcalendar2' import 'fullcalendar/dist/fullcalendar.min.css' Vue.use(FullCalendar)
在组件中使用：
<full-calendar :events="events" :config="config" :lang="lang" ></full-calendar>
其中，events 是一个数组，每个元素表示一个事件，config 是一个对象，配置 FullCalendar 的行为，lang 是一个字符串，指定语言。
示例
-- -------------------- ---- -------
----------
--------------
----------------
----------------
------------
-----------------
-----------
--------
------ ------- -
------ -
------ -
------- -
-
------ ------ ---
------ ----------------------
---- ---------------------
--
-
------ ------ ---
------ ----------------------
---- ---------------------
-
--
------- -
------- -
----- ---------- -------
------- --------
------ ----------------------------
-
--
----- -------
-
-
-
---------深入理解
vue-fullcalendar2 的配置项和 FullCalendar 类似，完全支持 FullCalendar 配置项的所有功能。
比如，在上面的示例中，通过 config 指定了头部导航栏的显示方式：
config: {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
}表示左侧显示前一天和后一天按钮，中间显示当前时间段（月/周/日），右侧显示月视图、周视图和日视图切换按钮。
同时，vue-fullcalendar2 还支持事件的响应，比如在用户点击事件时触发的回调函数。
总结
本文介绍了如何使用 vue-fullcalendar2 在 Vue.js 应用程序中集成 FullCalendar 功能，并提供了详细的示例代码。同时，深入探讨了 vue-fullcalendar2 的配置项和事件响应机制，为读者更好地应用 vue-fullcalendar2 提供了指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005646d81e8991b448e170d