FullCalendar日历组件集成系列3——插件与界面优化

插件

作为一款优秀设计，FullCalendar实现了插件化。
在先前的配置中，我们参照官方示例实现了一个基本的Demo，引入了组件如下：

import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

其中@fullcalendar/vue3是日历组件的本体，插件@fullcalendar/interaction提供了集成与交互功能，插件@fullcalendar/daygrid提供了日历视图，这三个是必选的。

daygrid插件

daygrid插件提供了月、周、日三种视图，如下：



可以看到，对于月视图还好，对于周视图和日视图，则缺少了时间维度，此时需要引入新的插件timegrid。

timegrid插件

timegrid插件需要安装，如下：

pnpm install @fullcalendar/timegrid

然后引入和配置：

import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'

export default {
  name: 'ListByCalendar',
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        // 插件列表
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],

同时，需要将头部按钮调整下，使用timeGridWeek替代掉dayGridWeek，使用timeGridDay替代掉dayGridDay，如下：

// 头部显示
headerToolbar: {
  left: 'today',
  center: 'prev title next',
  right: 'dayGridMonth,timeGridWeek,timeGridDay,'
}

此后，再查看周视图和日视图，时间维度显示出来了，如下：

listgrid插件

在尝试过程中发现组件还有一个列表插件不错，进行安装与配置。
安装新的插件list，如下：

pnpm install @fullcalendar/list

引用，配置插件，然后头部工具栏增加list视图，同时按钮文本增加列表，配置如下：

效果如下：

界面优化

更改all-day 显示文本

使用timegrid插件替代掉daygrid的周视图和日视图后，在周视图和日视图顶部有个区域，显示为英文 all-day，如下图所示：

通过以下属性设置：

// 更改all-day 显示文本
allDayText: '全天'

效果如下：

增加周次显示

周次，即本周是一年中的第几个周，是一个挺有用的信息，默认不显示。
如想显示，则修改下配置weekNumbers，打开日历组件的周次显示，如下：

// 周次
weekNumbers: true,

效果如下：

优化周次显示

前面我们配置了属性weekNumbers，设置为true后开启了周次显示功能。
默认的“W+周次数字”的模式虽然简明，但看上去像是中文日历中遗留了一个非汉化的元素，可以进一步通过配置解决，如下：

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

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

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

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

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

效果如下：

设置主题风格

当前外观风格与我们系统以蓝色为主色调的风格不太和谐，演示页面有诸多风格可选。

但是通过设置themeSystem属性，不起作用，认真琢磨了下，其实官方默认就只带了一种样式，就是上面截图显示的那种暗色调，其他包括bootstrap在内的样式，都需要额外配置。
经查看和对比，Bootstrap5的蓝色色调就不错，动手安装吧。

pnpm install @fullcalendar/bootstrap5
pnpm install  bootstrap
pnpm install  bootstrap-icons

经测试，以上3个一个都不能少，然后在配置中引入：

import bootstrap5Plugin from '@fullcalendar/bootstrap5'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css'

然后注意bootstrap5同样是一个插件，需要加到calendarOptions的plugins数组中，如下：

刷新页面，效果终于出来了：

开启视图间导航功能

我们在查看月视图时，如果对某一周或某一天的具体日程感兴趣，想进入查看，可以打开官方预置的一个开关，这样周次和日都会启用链接导航功能，点击可进入周视图和日视图。

// 开启视图间导航功能
navLinks: true

同理，周视图、日视图和列表视图，都会开启超链接，进行视图间的切换。



官方提供了预置操作，如果想改变默认的行为，跳转到自定义视图，则可以设置navLinkDayClick和navLinkWeekClick这两个事件。
官网文档：https://fullcalendar.io/docs/date-nav-links。

开启当前时间线标识

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

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

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

应用系统

名称：遇见
地址：https://meet.popsoft.tech
说明：基于一二三应用开发平台和FullCalendar日历组件实现的面向个人的时间管理、任务管理系统，1分钟注册，完整功能，欢迎使用~