FullCalendar跨天事件午夜时间戳异常问题咨询

我之前也碰到过FullCalendar这个月视图的时间戳问题，其实这是它内置的设计逻辑导致的：在月视图中处理跨天的全天/拖拽事件时，它会把结束日期设置为事件结束日的次日凌晨0点，以此来标记事件覆盖到结束日的最后一刻（比如从10月1日到10月3日的事件，结束时间设为10月4日0点，这样渲染时能正确显示事件占据1、2、3三天）。但这确实会导致我们用date()格式化时得到不符合预期的日期，下面给你两种针对性的解决思路：

思路1：在事件创建/修改时直接调整结束时间 #

如果你希望事件存储的结束时间就是结束日的某个具体时间（比如中午12点），可以在事件的创建、修改回调里手动调整时间戳：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    editable: true,
    // 处理新创建的事件
    eventAdd: function(info) {
      adjustEventEndTime(info.event);
    },
    // 处理拖拽修改后的事件
    eventChange: function(info) {
      adjustEventEndTime(info.event);
    },
    // 如果是点击选择时间段创建事件，用select回调处理
    select: function(info) {
      const adjustedEnd = new Date(info.end);
      // 将结束时间设为结束日的12:00
      adjustedEnd.setHours(12, 0, 0, 0);
      calendar.addEvent({
        title: '自定义事件',
        start: info.start,
        end: adjustedEnd,
        allDay: false // 若需要全天事件，可保持true但同样调整时间
      });
      calendar.unselect();
    }
  });

  calendar.render();

  // 封装调整结束时间的工具函数
  function adjustEventEndTime(event) {
    const endDate = event.end;
    // 判断是否是次日0点的情况
    if (endDate.getHours() === 0 && endDate.getMinutes() === 0) {
      const adjustedEnd = new Date(endDate);
      // 这里可以自定义你需要的时间，比如12:00
      adjustedEnd.setHours(12, 0, 0, 0);
      event.setEnd(adjustedEnd);
    }
  }
});

思路2：格式化日期时做特殊处理 #

如果不需要修改事件存储的原始时间戳，只是希望在展示/输出日期时得到正确的结束日，可以在格式化函数里判断：如果结束时间是次日0点，就取前一天的日期进行格式化：

function formatEndDate(endTimestamp) {
  const endDate = new Date(endTimestamp);
  // 检查是否是次日0点的情况
  if (endDate.getHours() === 0 && endDate.getMinutes() === 0) {
    // 减去一天，得到实际的结束日
    endDate.setDate(endDate.getDate() - 1);
  }
  // 按照你需要的格式输出，比如YYYY-MM-DD HH:mm
  return `${endDate.getFullYear()}-${String(endDate.getMonth()+1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} ${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
}

// 使用示例：假设endTimestamp是FullCalendar返回的结束时间戳
const formattedDate = formatEndDate(event.end.getTime());

注意事项 #

• 如果是全天事件（allDay: true），FullCalendar的内部逻辑依赖“次日0点”来正确渲染跨天显示，这种情况下更推荐用思路2的格式化处理，避免修改时间戳导致渲染异常。
• 如果你需要后端存储正确的日期，优先选择思路1，确保存储的时间戳符合业务逻辑。

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