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

行者无疆1982

已于 2024-07-02 11:08:30 修改

阅读量1.2k

点赞数 14

分类专栏： FullCalendar日历组件集成实战（过程版）文章标签： FullCalendar 集成FullCalendar 日历组件日程管理日历组件集成实战

于 2024-06-26 10:51:45 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/seawaving/article/details/139035479

版权

FullCalendar日历组件集成实战（过程版）专栏收录该内容

24 篇文章

订阅专栏

背景

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

官网：https://fullcalendar.io/

环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

保持当前视图范围不变

当我们在月底使用日历组件制定下个月计划和日程，或者安排下周的工作，新增或修改事件后，后端数据持久化后通过刷新页面的方式来让日历组件上的数据更新。这样存在的问题在于一旦刷新页面，则日历组件会“跳”回到当天日期。
例如，制定6月份的计划，刚添加了1条数据，然后保存，视图又跳回了5月份，还需要手工再切换，明显不合理。

FullCalendar组件的切换视图的方法changeView，可以传入第二个参数，单个时间或者起止范围。

在前面的实现方式中，我们通过query参数保持当前的视图类型以及自定义的显示范围（全部任务/进行中任务），采用该方式，把当期视图的显示时间范围也通过query参数来传递，在刷新方法中处理：

    // 刷新
    refresh() {
      const fullCalendar = this.$refs.fullCalendar.calendar
      // console.log(fullCalendar.view)
      let query = this.$route.query
      query = Object.assign(query, {
        viewType: fullCalendar.view.type,
        showAllFlag: this.showAllFlag,
        start: this.$dateFormatter.formatUTCDate(fullCalendar.view.activeStart),
        end: this.$dateFormatter.formatUTCDate(fullCalendar.view.activeEnd)
      })
      refreshSelectedTagWithQuery(query)
    }

然后在页面初始化时读取query参数，调用切换视图方法：

    // 初始化
    init() {
      this.calendarApi = this.$refs.fullCalendar.getApi()
      // 处理是否显示全部
      if (this.$route.query.showAllFlag != undefined) {
        //此处注意，query参数是字符串类型，直接赋值给showAllFlag会令其类型变化，使用非运算符！会一直为true
        this.showAllFlag = this.$route.query.showAllFlag == 'true' ? true : false
      }
      // 默认设置视图类型
      let viewType = this.calendarOptions.initialView
      // query参数中取值
      if (this.$route.query.viewType) {
        viewType = this.$route.query.viewType
      }
      const fullCalendar = this.$refs.fullCalendar.calendar
      fullCalendar.changeView(viewType, {
        start: this.$route.query.start,
        end: this.$route.query.end
      })
    }

然后测试发现无效，依然显示的是当前时间。

然后手工写死测试，视图类型为日视图，传入单天，有效。

fullCalendar.changeView('timeGridDay', '2024-06-10')

视图类型为周，传入时间范围，无效！

 fullCalendar.changeView('timeGridWeek', { start: '2024-06-10', end: '2024-06-17' })

这就很无语了……
翻看了FullCalendar源码，看上去也没有问题：

changeView(viewType, dateOrRange) {
    this.batchRendering(() => {
        this.unselect();
        if (dateOrRange) {
            if (dateOrRange.start && dateOrRange.end) { // a range
                this.dispatch({
                    type: 'CHANGE_VIEW_TYPE',
                    viewType,
                });
                this.dispatch({
                    type: 'SET_OPTION',
                    optionName: 'visibleRange',
                    rawOptionValue: dateOrRange,
                });
            }
            else {
                let { dateEnv } = this.getCurrentData();
                this.dispatch({
                    type: 'CHANGE_VIEW_TYPE',
                    viewType,
                    dateMarker: dateEnv.createMarker(dateOrRange),
                });
            }
        }
        else {
            this.dispatch({
                type: 'CHANGE_VIEW_TYPE',
                viewType,
            });
        }
    });
}

停下来思考，推测日历展示的范围，不仅仅跟时间范围有关系，还跟目标时间有关系。
尝试调用内置方法gotoDate，源码调整如下：

  // 初始化
  init() {
    this.calendarApi = this.$refs.fullCalendar.getApi()
    // 处理是否显示全部
    if (this.$route.query.showAllFlag != undefined) {
      //此处注意，query参数是字符串类型，直接赋值给showAllFlag会令其类型变化，使用非运算符！会一直为true
      this.showAllFlag = this.$route.query.showAllFlag == 'true' ? true : false
    }
    // 默认设置视图类型
    let viewType = this.calendarOptions.initialView
    // query参数中取值
    if (this.$route.query.viewType) {
      viewType = this.$route.query.viewType
    }
    const fullCalendar = this.$refs.fullCalendar.calendar
    if (this.$route.query.start && this.$route.query.end) {
      fullCalendar.changeView(viewType, {
        start: this.$route.query.start,
        end: this.$route.query.end
      })
      // 取起止范围相差天数
      const dayCount = this.getDaysDifference(this.$route.query.start, this.$route.query.end)
      // 开始时间加上时间范围差值的一半，即取时间中间位置
      const targetDay = new Date(
        new Date(this.$route.query.start).getTime() + (dayCount / 2) * 24 * 60 * 60 * 1000
      )
      // 导航到指定日期
      fullCalendar.gotoDate(this.$dateFormatter.formatUTCDate(targetDay))
    } else {
      fullCalendar.changeView(viewType)
    }
  }

实现的关键逻辑就是获取到页面刷新前视图显示的起止时间范围，然后取中间的时间值，调用api跳转到该时间。
对于日视图和周视图，跳转时间直接取开始时间也可以正常运行，但是月视图不行，因为默认显示范围大于一个月，当前月以及上个月底的几天和下个月的前几天都会显示。如果也直接取开始时间作为跳转时间，则还是会出现在月底制定下个月计划时，页面刷新跳回到本月的情况。

通过以上方法，前端功能正常了，监控后端服务，调用gotoDate时，又触发了一次加载数据，也就是刷新页面，需要加载三次数据……组件自己初始化触发一次，调用切换视图触发一次，调用跳转到时间再触发一次。
这么做确实不优雅，相当于曲线救国，不清楚是组件自身问题或限制，只能这么干，还是有更好的实现方案，后续解决了再更新下本文。