功能
是一个日历日程展示交互插件,提供了时间,日程等交互功能的插件。
基础使用
1 安装基础包
fullCalendar 提供了支持vue版本的,所以我们除了安装fullCalendar核心包外,还需要安装vue支持包,vue3安装@fullcalendar/vue3 vue2 安装@fullcalendar/vue。
除此之外,fullcalendar的一切额外功能都是依赖插件的。所以我们还需要安装 这两个插件@fullcalendar/interaction @fullcalendar/daygrid 分别提供视图展现 和 交互功能。
npm install @fullcalendar/core @fullcalendar/vue3 @fullcalendar/interaction @fullcalendar/daygrid
2 在vue页面中底部引入fullcalendar组件和其功能插件
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
3 在vue模板中使用
options是我们对fullCalendar插件的设置项,我们要实现的功能也主要集中在这里
<FullCalendar ref="myCalendar" :options="calendarOptions" />