FullCalendar周/日重复事件在daygrid视图中结束时间显示异常

问题根因 #

• 语法错误：rrule属性定义结束后缺少逗号，会直接触发JavaScript语法报错
• 核心逻辑错误：使用rrule插件生成重复事件时，若未显式指定事件时长，FullCalendar默认会给事件赋值1小时的默认时长，这就是你只能看到11:45:00到12:45:00时段的原因
• 参数使用错误：until参数仅用来控制重复事件的最后终止生成日期，不控制单次事件的结束时间，你当前将单次事件的结束时间填入until属于参数用途误用

修复方案 #

在事件配置中补充duration属性，指定单次事件的时长即可，你需要的5小时对应ISO 8601时长格式为PT5H，同时修正语法错误后的代码如下：

events.push({
  id: value.id,
  resourceId: value.user_id,
  rrule: {
    freq: 'weekly',
    byweekday: ['mo', 'tu', 'we', 'th'],
    dtstart: value.start_date + ' ' + value.start_time, //current value: 2020-06-03 11:45:00
    until: value.end_date // 这里只需要填重复终止的日期即可，不需要加结束时间
  },
  duration: 'PT5H', // 新增：指定单次事件时长为5小时
  display: 'background',
  exdate: ['2021-06-03']
});

如果需要适配日度重复，只需将freq的值改为daily即可。
另外建议将dtstart的拼接字符串转换为标准ISO格式的时间字符串，避免不同时区下的显示偏移问题。

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