FullCalendar日历组件集成实战（6）

背景

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

官网：https://fullcalendar.io/

环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

配置周次

前面我们配置了属性weekNumbers，设置为true后开启了周次显示功能。

默认的W+周次数字的模式虽然简明，但看上去像是中文日历中遗留了一个非汉化的元素，可以进一步通过配置解决，如下：

// 开启周次显示
weekNumbers: true,
// 显示周次文本
weekText: '周',

W被替换为了我们设置的“周”，效果如下：

这样看上去还是有点别扭，不符合中文习惯，颠倒一下顺序，如22周，或第22周更符合国人习惯。
通过使用回调方法来重写展现解决，如下所示：

 // 设置周次显示
weekNumberContent: this.weekNumberContent

// 设置周次显示
weekNumberContent(arg) {
  return '第' + arg.num + '周'
}

效果如下：

开启当前时间线标识

一个小功能，配置nowIndicator为true，默认未开启。

// 显示当前时间线
nowIndicator: true,

在周视图和日视图中会用红线标识当前时间，可以算一个挺实用的功能吧。

设置工作时间

组件预置了设置工作时间功能，对应属性是businessHours，默认未开启。这个功能与我当前想实现的需求关系不大，但在某些应用场景下还是很有用的，因此也了解一下，放在这作为备忘。功能可以不用，但是得知道有。
该属性比较灵活，设置为true会开启，但默认是周一到周五，9:00-17:00，即标准的朝九晚五。

businessHours：true

也可以设置为对象，以下是设置周一到周五，8:00-17:30为工作时间。

businessHours: {
  daysOfWeek: [1, 2, 3, 4, 5],
  startTime: '8:00',
  endTime: '17:30'
}

还可以设置为数组，进行任意组合，例如常见的将工作日（周一到周五）和节假日（周六周日）分别设置不同的时间段。

需要注意的是，经测试，工作时间只是用白色背景标识，非工作时间用灰色背景标识，非工作时间依旧可以选中，添加事件等操作，即只影响显示，不影响功能。

显示事件起止时间

前面我们提过设置属性displayEventTime，可以控制月视图中是否显示事件开始时间，今天来详细说说关于事件起止时间那些配置。
首先得明确，对于事件，组件有个概念是全天与非全天，通过allDay属性来控制。
对于全天事件，会统一放到视图（周视图与日视图）顶部区域，非全天事件，才会显示具体的起止时间。

对于月视图，全天事件，会以在日单元格中顶部显示，且以蓝色背景标识，与非全天事件区分。

默认情况下，月视图会显示开始时间，周视图和日视图会显示起止时间，各个视图支持单独设置属性，如果把属性设置在根路径下，则会对所有视图生效。

  // 显示事件开始时间
  displayEventTime: true,
  // 显示事件结束时间
  displayEventEnd: true,

效果如下，月视图也显示非全天事件的起止时间了。