FullCalendar结束日期显示异常：比实际日期提前一天

问题根源 #

FullCalendar对end日期采用排他性处理：即end日期代表事件的结束时刻（而非包含的最后一天）。例如，若事件的end设为2024-01-14，日历会认为事件在1月14日0点结束，因此在月视图中只会显示到1月13日。同时，后端与前端的时区不匹配（如后端存UTC时间、前端用本地时区）也可能导致日期偏移。

修复方案 #

方案1：预处理事件数据，调整结束日期 #

在将API返回的calendarEvents传给FullCalendar前，为每个事件的end日期加1天（针对全天事件）：

// 处理从API获取的原始事件数据
const processedEvents = calendarEvents.map(event => {
  if (event.end) {
    const endDate = new Date(event.end);
    // 为结束日期加1天
    endDate.setDate(endDate.getDate() + 1);
    return {
      ...event,
      end: endDate.toISOString().split('T')[0] // 保留YYYY-MM-DD格式
    };
  }
  return event;
});

然后在组件中替换原事件数据：

<FullCalendar
  {...rest}
  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
  events={processedEvents} // 使用处理后的事件数据
  displayEventTime={false}
  editable={hasFeatureAccess(permissionName, 'updateEvent', groupsReferenceData)}
  selectable={hasFeatureAccess(permissionName, 'addEvent', groupsReferenceData)}
  select={hasFeatureAccess(permissionName, 'addEvent', groupsReferenceData) ? handleDateSelect : undefined}
  eventClick={hasFeatureAccess(permissionName, 'updateEvent', groupsReferenceData) ? handleEventClick : undefined}
  initialView='dayGridMonth'
  height='100%'
/>

方案2：统一时区解决偏移问题 #

如果是时区不匹配导致的日期偏差，将后端返回的UTC时间转换为前端本地时间：

const processedEvents = calendarEvents.map(event => {
  if (event.end) {
    const utcEndDate = new Date(event.end);
    // 转换为本地时区的日期
    const localEndDate = new Date(utcEndDate.getTime() + utcEndDate.getTimezoneOffset() * 60000);
    return {
      ...event,
      end: localEndDate.toISOString().split('T')[0]
    };
  }
  return event;
});

方案3：明确标记全天事件 #

确保所有事件的allDay属性设为true，FullCalendar会针对全天事件优化日期显示逻辑：

const processedEvents = calendarEvents.map(event => ({
  ...event,
  allDay: true // 强制标记为全天事件
}));

验证 #

调整后，若设置结束日期为1月14日，事件会正确显示到1月14日（处理后的end变为1月15日，FullCalendar会将事件包含到1月14日）。

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