背景

有一些应用系统或应用功能，如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件，但功能比较简单，用来做数据展现勉强可用。但如果需要进行复杂的数据展示，以及互动操作如通过点击添加事件，则需要做大量的二次开发。
FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。然而，尽管该组件功能卓越，其文档却相对简洁，导致在集成过程中需要开发者自行摸索与探索，这无疑增加了不少学习和验证的时间成本。
为此，本专栏通过日程管理系统的真实案例，手把手带你了解该组件的属性和功能，通过需求导向的方式，详细阐述FullCalendar组件的集成思路和实用解决方案。
在介绍过程中，我们将重点关注集成要点和注意事项，力求帮助开发者在集成过程中少走弯路，提供有效的避坑指南，从而提升开发效率，更好地利用这款优秀的日历组件。

官网：https://fullcalendar.io/

环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

设置事件颜色

应用通常需要根据事件属性进一步来设置不同颜色，区分事件的类型、状态、重要程度或优先级。
例如，高优先级使用红色、中优先级使用黄色、低优先级使用绿色 。

有三个属性来细粒度控制：
backgroundColor：背景颜色
borderColor：边框颜色
textColor：文本颜色

在加载数据时，根据属性设置颜色，源码如下：

 // 加载数据loadData() {this.$api.personaltask.task.listWithChildren().then((res) => {if (res.data) {const eventArray = res.data.map((item) => {// 若起止时间均为00:00:00，则设置为allDay属性为truelet allDay = falseif (item.startTime &&item.endTime &&item.startTime.substr(11, 8) === '00:00:00' &&item.endTime.substr(11, 8) === '00:00:00') {allDay = true}// 根据优先级设置不同的颜色let color = '#000000'switch (item.priority) {case 'HIGH':color = '#FF0000'breakcase 'MEDIUM':color = '#FFFF00'breakcase 'LOW':color = '#00FF00'break}return {id: item.id,title: item.name,start: item.startTime,end: item.endTime,allDay: allDay,status: item.status,textColor: color}})this.eventData = eventArraythis.filteData()}})}

效果如下：

这里发现一个问题：颜色设置对全天事件所有视图生效；对非全天事件，周视图和日视图生效，月视图无效，怀疑是组件bug或者设计时没有考虑到这方面。

尝试了另一种方式，覆写事件内容展示的回调方法eventContent。

 eventContent(arg) {let event = arg.event// 根据优先级设置不同的颜色let color = '#000000'switch (event.extendedProps.priority) {case 'HIGH':color = '#FF0000'breakcase 'MEDIUM':color = '#FFFF00'breakcase 'LOW':color = '#00FF00'break}this.eventData.forEach((item) => {if (item.id === event.id) {item.textColor = colorreturn}})return '标题'}

测试发现，还是仅对全天事件生效，进一步印证了前面推测，对于非全天事件，不受textColor属性控制。

该方式不仅没达到目的，还得完全自己输出事件的内容展示（上面统一固化为“标题”仅为了测试颜色效果），此路不通，放弃。

该问题暂时搁置，后续有了解决方案再修订。

设置事件排序

同一单元格内多个事件，显示时谁先谁后，如何控制？
组件内置了事件排序控制，其属性为eventOrder，可接受多类型的值（String / Array / Function），默认为"start,-duration,allDay,title"，代表优先按开始时间、持续时长、全天事件和标题排序。
其中duration前的减号，代表降序，无减号则代表升序。

官方预置的默认排序规则相对是最合理的选择了，此处不做调整，仅做备忘。
若日后需要按照优先级排序，可从该处着手探索解决方案。

设置事件最小高度

默认情况，事件的最小高度是15像素，当事件较多时，会自动缩小字体类适配。

这种方式可以按时间规整排列，但字体大小不同，特别是字太小影响查看。
可以通过设置eventMinHeight属性来调整最小高度，如下：

// 视图个性化配置设置
views: {dayGridMonth: {},timeGridWeek: {},timeGridDay: {// 列表视图中事件最小高度eventMinHeight: 50},listMonth: {}
},

调整后效果如下：

字体大小一致了，不会过小，不过事件就不再规整了，需要调整下事件查看习惯，从上到下，从左到右，这种方式充分利用了屏幕，个人推荐该方式。