日历日视图中全天/多日事件结束日期显示错误技术求助

问题分析 #

标记为「全天事件」的Product Booking（3月9日开始、3月11日结束），周视图显示正常，但日视图中结束日期提前一天。代码已将时长超1天的全天事件结束日期调整为次日0点，控制台日志显示事件起止时间配置正确，但日视图渲染仍异常。

核心原因是日历库对全天事件的结束日期采用排他性逻辑（即end日期是事件不包含的最后一天），同时代码中将end转为字符串的操作引发了时区或日期解析偏差，导致日视图渲染逻辑误判。

修复方案 #

1. 保持日期为Moment对象，避免字符串转换 #

将代码中eventData.end = day2.toString();改为直接赋值Moment对象，消除字符串解析带来的格式/时区问题：

eventDataTransform: function(eventData) {
  console.log('EventDataStart-->' + eventData.start);
  console.log('EventDataEnd-->' + eventData.end);
  
  var dur = eventData.end - eventData.start; // 计算事件时长

  if (dur >= 18000000 || eventData.end == null) { // 5小时及以上标记为全天事件
    eventData.allDay = true;
    eventData.allDaySlot = true;

    console.log('dur-->' + dur);
    // 处理跨天事件的结束日期
    if (dur > 86400000) {
      var m = moment(eventData.end);
      var roundDown = m.startOf('day');
      var day2 = moment(roundDown).add(1, 'days');
      // 直接赋值Moment对象，不转字符串
      eventData.end = day2; 
      console.log('EventDataEndIf1-->' + eventData.end);
    }
  }
  console.log('eventData-->' + JSON.stringify(eventData));
  return eventData;
}

2. 调整日历的nextDayThreshold配置（可选） #

若上述修改后仍有问题，可在日历初始化时添加该配置，明确跨天事件的判定阈值，确保日视图正确识别全天事件的结束边界：

$('#calendar').fullCalendar({
  // 其他配置项...
  nextDayThreshold: '00:00:00', // 默认值，可按需调整为'23:59:59'
  eventDataTransform: function(eventData) {
    // 你的转换逻辑代码
  }
});

3. 关键验证点 #

修改后需确认：

• 控制台日志中eventData.end为Moment对象格式，而非字符串
• 日视图中3月11日正常显示该全天事件，结束日期不再提前

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