Vue.js项目升级FullCalendar至v5.9.0后日历事件无法显示问题求助

你遇到的升级后事件无法渲染问题，共有3个明确的错误点：

错误1：资源视图配置缺失 #

你默认使用的resourceTimeGridWeek是资源关联类视图，使用这类视图必须满足两个条件：

• 在calendarOptions中配置resources属性定义资源列表
• 所有事件都需要配置resourceId字段和对应资源关联
  如果不需要使用资源分组功能，可以先切换为普通时间格视图验证事件渲染逻辑。

错误2：样式导入不全 #

你仅导入了list插件的样式，其他用到的daygrid、timegrid、resource-timegrid等插件的样式完全缺失，就算事件正常渲染也会因为无样式不可见。

错误3：Vue适配包版本匹配问题 #

FullCalendar 5.x对不同Vue版本有不同的适配包：

• Vue2 对应使用 @fullcalendar/vue
• Vue3 对应使用 @fullcalendar/vue3
  请确认你的项目Vue版本和导入的适配包匹配。

修复后可运行示例代码 #

<template>
    <b-container fluid @click="logEvents">
        <VueFullCalendar :options="calendarOptions" style="width: 100%; height: 600px;" />
    </b-container>
</template>

<script>
import VueFullCalendar from '@fullcalendar/vue' // Vue3请替换为@fullcalendar/vue3
import resourceTimeGrid from '@fullcalendar/resource-timegrid'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'

export default {
  components: {
    VueFullCalendar
  },
  name: 'Calendar',
  data: function () {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimeGrid, listPlugin],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay' // 先替换为普通视图验证
        },
        initialView: 'timeGridWeek', // 先切换为普通时间格视图
        slotMinTime: '09:00:00',
        slotMaxTime: '21:30:00',
        allDaySlot: false,
        events: [
          {
            title: 'Event 2',
            start: '2021-09-28T09:00',
            end: '2021-09-28T10:30'
          },
          {
            title: 'Event 1',
            start: '2021-09-28T11:00',
            end: '2021-09-28T13:00'
          }
        ]
        // 如果你要保留resourceTimeGrid视图，需要添加如下配置：
        // resources: [
        //   { id: 'a', title: '资源A' },
        //   { id: 'b', title: '资源B' }
        // ],
        // 同时事件要加上resourceId，比如：
        // { title: 'Event 2', start: '2021-09-28T09:00', end: '2021-09-28T10:30', resourceId: 'a' }
      }
    }
  },
  methods: {
    logEvents () {
      console.log(this.calendarOptions.events)
    }
  }
}
</script>

<style>
/* 导入所有用到的插件的样式 */
@import '~@fullcalendar/common/main.min.css';
@import '~@fullcalendar/daygrid/main.min.css';
@import '~@fullcalendar/timegrid/main.min.css';
@import '~@fullcalendar/resource-timegrid/main.min.css';
@import '~@fullcalendar/list/main.min.css';
</style>

内容的提问来源于stack exchange，提问作者Dedinho