React FullCalendar资源时间线视图重叠事件堆叠实现求助

问题根源分析 #

你的代码存在几个关键错误，导致重叠事件无法堆叠：

1. 插件与视图不匹配：导入了resourceTimelinePlugin，但配置里误用了timeGridPlugin和时间网格视图timeGridWeek，这并非资源时间线视图的正确配置。
2. 资源配置缺失：代码中引用了resources但未定义，资源时间线视图必须绑定有效的资源数据才能正常工作。
3. 视图类型错误：要实现资源时间线的堆叠效果，必须使用resourceTimeline*系列视图，而非timeGrid*视图。

修正后的代码示例 #

import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

// 定义资源（必须包含唯一id）
const resources = [
  { id: "someId", title: "资源A" }
];

const events = [
  { id: 1, title: 'Event 1', start: '2024-03-13T08:20:36', end: '2024-03-13T08:23:36', resourceId: "someId" },
  { id: 2, title: 'Event 2', start: '2024-03-13T08:09:36', end: '2024-03-13T10:09:36', resourceId: "someId" }
];

const TimelineView = () => {
  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin]}
      initialView="resourceTimelineDay" // 使用资源时间线日视图，也可替换为resourceTimelineWeek
      events={events}
      resources={resources}
      eventDisplay="block" // 确保事件以块级显示，这是堆叠的基础
      eventOverlap={true} // 允许事件重叠，触发堆叠逻辑
    />
  );
};

export default TimelineView;

关键配置说明 #

• 插件与视图：必须启用resourceTimelinePlugin，并将initialView设置为resourceTimelineDay/resourceTimelineWeek等资源时间线系列视图，这类视图原生支持同资源下重叠事件的堆叠。
• 资源数据：每个资源需要唯一的id，事件的resourceId必须与资源id匹配，才能将事件绑定到对应资源上。
• 事件显示配置：eventDisplay="block"是堆叠显示的必要条件（默认值即为block，但如果之前修改过需显式设置）；eventOverlap={true}允许事件重叠，FullCalendar才会自动将重叠事件堆叠排列。

额外排查点 #

如果仍未生效，检查以下内容：

• 事件的start/end时间是否确实存在重叠
• 事件的resourceId是否与资源id完全匹配（注意大小写）
• 确保FullCalendar版本为最新，旧版本可能存在资源时间线视图的堆叠bug

内容的提问来源于stack exchange，提问作者Hel Nershing Thapa