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

背景

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

官网：https://fullcalendar.io/

环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

调整单元格高度

默认情况下，单元格高度会自动扩展，如下图所示，留下不小的空白，既浪费空间又不美观。

解决方式就是为高度height属性指定值auto，如下：

// 高度自动调整
height: 'auto'

效果如下：

月视图中显示事件时间开关

默认情况下，会在事件标题前方显示该事件的开始时间

如不想要，可以用下面这种方式来取消显示。

 // 视图的一些基本设置
views: {  
  dayGridMonth: {
    //是否显示时间
    displayEventTime: false
  },
  timeGridWeek: {},
  timeGridDay: {},
  listMonth: {}
},

个人认为显示时间还是不错的功能，所以暂时保留，该配置放这里做个备忘。

设置全天属性优化显示

有些任务，我们需要安排一整天，或者好几天，亦或者不想具体安排某天的哪个时间点来做。
这时候起止时间就设置到天，没有到小时的粒度，默认情况下如下显示，占满整天，影响其他任务的展示和查看的直观性。

这种情况，我们可以使用allDay属性来做优化， 若起止时间均为00:00:00，则设置为allDay属性为true，这样任务就会显示在顶部“全天”区域。
代码如下：

 // 加载数据
    loadData() {
      this.$api.personaltask.task.listWithChildren().then((res) => {
        if (res.data) {
          const eventArray = res.data.map((item) => {
            // 若起止时间均为00:00:00，则设置为allDay属性为true
            let allDay = false
            if (
              item.startTime &&
              item.endTime &&
              item.startTime.substr(11, 8) === '00:00:00' &&
              item.endTime.substr(11, 8) === '00:00:00'
            ) {
              allDay = true
            }
            return {
              id: item.id,
              title: item.name,
              start: item.startTime,
              end: item.endTime,
              allDay: allDay
            }
          })
          this.calendarOptions.events = eventArray
        }
      })
    },

调整后效果如下：

切换显示全部与未完成

任务的状态有多个，待安排、未开始、进行中、已完成、已超期、已取消、已挂起，对于已完成、已取消这两类，通常会视为已结束，并不需要过多关注，如一直显示在列表中，则会一定程度上影响未结束的任务展现。
我们在头部工具栏添加一个自定义按钮，来控制是否只显示未结束的任务。
添加自定义按钮：

customButtons: {
  changeShowScopeButton: {
      text: '显示全部',
      click: this.changeShowScope
    }
}

在头部工具栏配置自定义按钮

  // 头部显示
  headerToolbar: {
    left: 'today',
    center: 'prevYear,pre title next,nextYear',
    right: 'changeShowScopeButton dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  }

定义变量和方法

   // 显示所有事件
  showAllFlag: false,
  // 事件数据
  eventData: []



  // 变更显示范围
  changeShowScope() {
    this.showAllFlag = !this.showAllFlag
    this.filteData()
  },
  // 筛选数据
  filteData() {
    if (this.showAllFlag) {
      this.calendarOptions.customButtons.changeShowScopeButton.text = '显示未结束'
      this.calendarOptions.events = this.eventData
    } else {
      this.calendarOptions.customButtons.changeShowScopeButton.text = '显示全部'
      this.calendarOptions.events = this.eventData.filter((item) => {
        return (
          item.status === 'IN_PROGRESS' ||
          item.status === 'TO_DO' ||
          item.status === 'EXPIRED' ||
          item.status === 'PENDING' ||
          item.status === 'PAUSED'
        )
      })
    }
  },
  // 加载数据
  loadData() {
    this.$api.personaltask.task.listWithChildren().then((res) => {
      if (res.data) {
        const eventArray = res.data.map((item) => {
          // 若起止时间均为00:00:00，则设置为allDay属性为true
          let allDay = false
          if (
            item.startTime &&
            item.endTime &&
            item.startTime.substr(11, 8) === '00:00:00' &&
            item.endTime.substr(11, 8) === '00:00:00'
          ) {
            allDay = true
          }
          return {
            id: item.id,
            title: item.name,
            start: item.startTime,
            end: item.endTime,
            allDay: allDay,
            status: item.status
          }
        })
        this.eventData = eventArray
        this.filteData()
      }
    })
  }     

默认仅显示未结束的任务，点击按钮可切换至显示全部任务

去除上一年与下一年按钮

从当前需求出发，任务查看都是当前附近，并不需要上一年与下一年这个大跨度，因此配置头部工具栏，去除上一年与下一年这两个按钮的显示，保留上一个与下一个两个按钮。

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

开启视图间导航功能

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

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

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

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

应用系统

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