FullCalendar跨日期长日程不显示长条 按日期单独渲染实现咨询

方案1：使用官方内置配置（推荐，适用于v5及以上版本） #

FullCalendar v5及更高版本已经内置了跨天事件拆分的配置项，无需额外处理数据，直接开启即可：

const calendar = new FullCalendar.Calendar(calendarDom, {
  initialView: 'dayGridMonth',
  splitDayEvents: true, // 核心配置，开启后跨天事件会在每个日期单元格独立显示
  events: '/your-event-data.json' // 你的JSON数据源地址
  // 其他原有配置保持不变
});

开启后会自动把跨多日的日程拆分到对应日期单元格，样式和普通单日事件保持一致。

方案2：手动拆分事件数据（适用于v4及更早版本，或者有自定义拆分逻辑需求） #

如果使用的版本不支持splitDayEvents配置，可以自行预处理从JSON拿到的事件数据，把跨天事件拆分为多个单日事件：

// 原始事件预处理函数
function splitMultiDayEvents(rawEvents) {
  const result = [];
  rawEvents.forEach(event => {
    const start = new Date(event.start);
    const end = new Date(event.end || event.start);
    // 对齐到日期零点，避免时分秒影响跨天判断
    const startDate = new Date(start.getFullYear(), start.getMonth(), start.getDate());
    const endDate = new Date(end.getFullYear(), end.getMonth(), end.getDate());

    // 单日事件直接保留
    if (startDate.getTime() === endDate.getTime()) {
      result.push({...event});
      return;
    }

    // 跨天事件按天拆分
    let current = new Date(startDate);
    while (current <= endDate) {
      result.push({
        ...event,
        id: `${event.id}_${current.getTime()}`, // 拆分后给个唯一ID避免冲突
        start: new Date(current),
        end: new Date(current.getTime() + 86400000), // 当日结束时间
        extendedProps: {
          ...event.extendedProps,
          originalEventId: event.id,
          originalStart: start,
          originalEnd: end
        }
      });
      current.setDate(current.getDate() + 1);
    }
  });
  return result;
}

// 初始化日历时代入处理后的事件
fetch('/your-event-data.json')
  .then(res => res.json())
  .then(rawEvents => {
    const processedEvents = splitMultiDayEvents(rawEvents);
    const calendar = new FullCalendar.Calendar(calendarDom, {
      initialView: 'dayGridMonth',
      events: processedEvents
      // 其他原有配置保持不变
    });
    calendar.render();
  });

注意事项 #

• 手动拆分后如果需要实现事件编辑、删除功能，需要通过originalEventId找到所有关联的拆分事件同步操作
• 如果需要在点击事件时展示完整的跨天时间，读取extendedProps里存储的原始起止时间即可

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