基于vue2使用Fullcalendar实现工作日历

需求背景

要求实现工作日历，以每月形式展示，而且要求不同工单根据类型可以自定义配置是否显示以及显示的颜色，比较世面上的日历插件，Fullcalendar插件比较好用的良心的可以创建日历日程管理的开源组件。
vue框架下，fullcalendar被封装成了不同的版本，这里主要讨论fullcalendar/vue的用法，其他的实现效果并不好。
本文只说明工作日历的简单显示，没有进行日程事件增删改等操作，如果需要请参考官方文档。
UI样式如图

安装插件

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid

"@fullcalendar/core": "^6.1.14",
"@fullcalendar/daygrid": "^6.1.14",
"@fullcalendar/interaction": "^6.1.14",
"@fullcalendar/timegrid": "^6.1.14",
"@fullcalendar/vue": "^6.1.14",
"moment": "^2.24.0"

部分代码

html

<!-- 因为日历插件的头部不满足我的项目需求 所以选择自己重写一个 -->
<calendar-header ref="calendarHeader" @change="changeMonth"></calendar-header>
<FullCalendar
	class="fullCalendar"
	ref="fullCalendar"
	:options="calendarOptions"
	v-loading="loading"
>
<!-- 每条日程事件的样式 具体请参考官方文档-->
	<template slot="eventContent" slot-scope="arg">
		<event-render
			:event="arg.event"
			@getShowEventList="getShowEventList"
			@eventClick="eventClick"
		></event-render>
	</template>
</FullCalendar>
<!-- 因为插件的moreContent的显示内容样式不符合需求 用fullcalendar的moreContent插槽的话 moreLinkClick事件也触发不到获取不到单元格的日期 所以进行重写 -->
<more-content
	ref="moreContent"
	v-show="isShowMoreContent"
	:currentDate="currentDate"
	:eventList="showEventList"
	:style="{
		top: moreTop + 'px',
		left: moreLeft + 'px'
	}"
></more-content>

JS部分

import calendarHeader from './calendar-header.vue'
import FullCalendar from '@fullcalendar/vue'