FullCalendar日历日程插件基础使用与学习

功能

是一个日历日程展示交互插件，提供了时间，日程等交互功能的插件。

基础使用

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" />