FullCalendar最后一个事件显示为+1 more而非正常事件条的问题排查

问题现象 #

使用FullCalendar的multiMonthYear视图时，第三个事件（test3）始终显示为"+1 more"，无法像前两个跨天事件一样以条形完整展示。

核心原因 #

1. 时区配置模糊：timeZone: "US"未指定具体时区（美国包含多个时区），导致FullCalendar解析事件时间时出现偏差，跨天事件的日期范围判断错误。
2. nextDayThreshold设置异常：nextDayThreshold: "00:00"改变了事件跨天的边界判定逻辑，使得事件的显示范围被错误压缩，触发视图的折叠规则。
3. businessHours过滤影响：开启businessHours: true后，默认仅展示9:00-17:00的工作时段事件，而test3的时间为20:00-23:00，不在默认工作时段内，被视图折叠。

修复步骤 #

1. 替换为具体IANA时区 #

将timeZone改为明确的时区标识，例如美国东部时区：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // ...其他配置
  timeZone: "America/New_York",
  // ...其他配置
});

2. 调整nextDayThreshold为合理值 #

恢复默认阈值或设置符合业务逻辑的时间，避免边界判定错误：

nextDayThreshold: "09:00", // 默认值

3. 调整businessHours配置 #

根据需求选择以下方式：

• 关闭工作时段过滤：直接禁用businessHours，展示所有事件：

businessHours: false,

• 自定义工作时段：包含test3的时间范围：

businessHours: {
  daysOfWeek: [1, 2, 3, 4, 5], // 周一至周五
  startTime: "20:00",
  endTime: "23:00"
},

4. 验证事件时间解析 #

通过eventClick回调打印解析后的时间，确认事件的日期范围在视图内：

eventClick: function(info) {
  console.log("事件开始时间：", info.event.startStr);
  console.log("事件结束时间：", info.event.endStr);
}

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