简介
vue-fullcalendar-card 是一个基于 Vue.js 和 FullCalendar 的日历组件。它可以帮助你快速创建一个优雅、灵活的事件日历，同时支持自定义事件、日期等等。
在本文中，我们将会详细介绍如何使用 vue-fullcalendar-card 并且通过具体的示例代码来展示其使用效果，使读者可以更好的理解和应用该 npm 包。
安装
使用 npm 安装 vue-fullcalendar-card:
npm install vue-fullcalendar-card
使用
引用 vue-fullcalendar-card：
import FullCalendarCard from 'vue-fullcalendar-card' Vue.use(FullCalendarCard)
在 Vue 组件内使用：
<template> <full-calendar-card /> </template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| events | Array | [] | 日历的事件列表 |
| locale | String | 'en' | 日历的地区语言 |
| show-header | Boolean | true | 显示日历的头部 |
| show-week-numbers | Boolean | false | 显示周数 |
| first-day-of-week | Number/String | 0 | 一周中的第一天，0 表示星期天，1 表示星期一，依次类推 |
| selectable | Boolean | false | 是否可以选中日期 |
| selected-start | Date | null | 选中范围的开始日期 |
| selected-end | Date | null | 选中范围的结束日期 |
| min-date | Date | null | 最小允许选择的日期 |
| max-date | Date | null | 最大允许选择的日期 |
| fixed-week-count | Boolean | false | 是否始终显示固定行数（6 行） |
| transition | Number | 150 | 切换月份的过渡时间（毫秒） |
| use-short-month-name | Boolean | false | 是否使用缩写的月份名称 |
| use-short-week-day | Boolean | false | 是否使用缩写的星期名称 |
| month-title-format | String | 'MMMM yyyy' | 月份标题格式 |
| date-format | String | 'YYYY-MM-DD' | 日期格式 |
| additional-classes | Object | {} | 日历的额外类名 |
事件
| Prop | Arguments | Description |
|---|---|---|
day-click |
date, jsEvent, view, resource | 当用户点击日历的某一天时触发的事件。date 参数为点击的日期。jsEvent 参数为该事件的原生 Event 对象。view 参数当前处于的视图，resource 是该事件关联的资源对象，如果没有则为 null。 |
event-contextmenu |
event, jsEvent, view | 当用户右键点击事件时触发的事件。event 参数为点击的事件对象，jsEvent 参数为该事件的原生 Event 对象，view 参数当前处于的视图。 |
event-click |
event, jsEvent, view | 当用户左键点击事件时触发的事件。参数意义同上。 |
event-drop |
event, delta, revertFunc, jsEvent, ui, view | 拖拽事件结束后触发的事件。event 参数为被拖拽的事件对象，delta 参数为事件偏移量，revertFunc 为撤销操作的方法。jsEvent 和 ui 同样是该事件的原生 Event 对象和 UI 对象，view 参数当前处于的视图。 |
event-drag-start |
event, jsEvent, ui, view | 当拖拽事件开始时触发的事件。event 参数为被拖拽的事件对象，jsEvent 和 ui 同样是该事件的原生 Event 对象和 UI 对象，view 参数当前处于的视图。 |
event-drag-stop |
event, jsEvent, ui, view | 当拖拽事件结束时触发的事件。参数意义同上。 |
event-resize |
event, delta, revertFunc, jsEvent, ui, view | 当事件大小被改变时触发的事件。event 参数为被拖拽的事件对象，delta 参数为事件偏移量，revertFunc 为撤销操作的方法。jsEvent 和 ui 同样是该事件的原生 Event 对象和 UI 对象，view 参数当前处于的视图。 |
event-resize-start |
event, jsEvent, ui, view | 当用户开始缩放事件时触发的事件。event 参数为被缩放的事件对象，jsEvent 和 ui 同样是该事件的原生 Event 对象和 UI 对象，view 参数当前处于的视图。 |
event-resize-stop |
event, jsEvent, ui, view | 当用户停止缩放事件时触发的事件。参数意义同上。 |
view-render |
view, element | 当切换到一个新的视图时触发的事件。view 参数为新视图的名称，element 是对应的 HTML 元素。 |
view-destroy |
view, element | 当切换到另一个视图时触发的事件。参数意义同上。 |
示例
下面是一个简单的示例，使用 vue-fullcalendar-card 显示日历：
-- -------------------- ---- -------
----------
-------------------
----------------
--------------------
--------------------------
----------------------
------------------
-------------------
-------------------
-------------------------
-----------------
-----------------------------
---------------------------
-------------------------- ------
---------------------------
---------------------- -------- -------------- ------- ----------- --
---------------------
-------------------------
--
-----------
--------
------ ------- -
----- ----------
------ -
------ -
------- -
-
------ ----------
------ ----------------------
---- ---------------------
--
-
------ --------
------ ----------------------
---- ---------------------
--
-
------ ---------
------ ----------------------
---- ---------------------
-
--
-------- -------------
-------- ------------
-
--
-------- -
-------------- -------- ----- -
--------------------------------------
--
----------------- -------- ----- -
------------------------
-
-
-
---------效果
总结
通过本篇文章的介绍，我们可以看到 vue-fullcalendar-card 是一个非常实用的日历组件，它提供了许多灵活的属性和事件，方便我们定制和处理我们想要的效果。希望这篇文章可以对你在开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733d890c4f7277583577