FullCalendar v6使用rrule实现重复事件失效问题求助

以下是几个关键排查点及解决方法：

1. 必须引入并注册rrule插件 #

FullCalendar 6采用插件化架构，重复事件功能依赖@fullcalendar/rrule插件，同时你使用的resourceTimeline视图也需要@fullcalendar/resource-timeline插件。如果未引入，rrule配置会被静默忽略，且控制台无报错。

解决步骤： #

• npm安装依赖：

  npm install @fullcalendar/rrule @fullcalendar/resource-timeline
  

• 引入并注册插件：

  import { Calendar } from '@fullcalendar/core';
  import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
  import rrulePlugin from '@fullcalendar/rrule';
  
  calendar = new Calendar(calendarEl, {
    plugins: [resourceTimelinePlugin, rrulePlugin], // 必须添加这两个插件
    // ...你的其他配置
  });
  

• CDN方式引入：

  <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.11/index.global.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timeline@6.1.11/index.global.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/rrule@6.1.11/index.global.min.js'></script>
  

2. 修正事件duration的格式 #

你的事件中duration: '39:00'不符合FullCalendar的时长格式要求，正确格式应为ISO 8601时长字符串或时长对象：

• 若为39分钟：duration: 'PT39M' 或 duration: { minutes: 39 }
• 若为39小时：duration: 'PT39H' 或 duration: { hours: 39 }

格式错误会导致事件无法渲染，自然看不到重复实例。

3. 验证rrule配置的正确性 #

检查rrule的常量调用方式，部分rrule库版本中，周几常量直接挂载在rrule对象上而非rrule.RRule：

rrule: {
  freq: rrule.WEEKLY, // 替换原rrule.RRule.WEEKLY
  interval: 2,
  byweekday: [rrule.WED], // 替换原rrule.RRule.WED
  dtstart: '2024-03-13T08:00:00'
}

可以手动测试rrule生成的日期：

const testRule = new rrule.RRule({
  freq: rrule.WEEKLY,
  interval: 2,
  byweekday: [rrule.WED],
  dtstart: new Date('2024-03-13T08:00:00')
});
console.log(testRule.all()); // 查看生成的重复日期数组，确认逻辑是否正确

4. 切换视图验证重复事件 #

你的初始视图是resourceTimelineDay，如果当前日历显示的日期不是2024-03-13或其后续每隔一周的周三，自然看不到重复事件。建议切换到resourceTimelineWeek或resourceTimelineMonth视图，或者手动导航到2024-03-13当天查看。

5. 检查事件时间范围与日历slot匹配 #

日历的slotMinTime为08:00:00，slotMaxTime为19:00:00，如果事件duration过长（比如39小时），会超出slot范围导致不显示，请确认duration的实际需求是否合理。

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