React FullCalendar：如何实现资源下事件的可折叠父子结构？

可以实现，FullCalendar本身没有内置事件折叠功能，但通过自定义事件渲染结合状态管理就能搞定，具体步骤如下：

1. 改造事件数据结构 #

给父事件添加标识和子事件列表，区分普通事件与父事件：

// 示例事件数据
const timeFrames = [
  {
    id: 'parent-1',
    title: '父事件A',
    start: '2024-05-01',
    end: '2024-05-03',
    isParent: true, // 标记为父事件
    children: [
      { id: 'child-1', title: '子事件A1', start: '2024-05-01', end: '2024-05-02' },
      { id: 'child-2', title: '子事件A2', start: '2024-05-02', end: '2024-05-03' }
    ]
  },
  // 普通事件/其他父事件...
];

2. 维护折叠状态 #

在组件中用useState记录哪些父事件处于折叠状态：

import { useState } from 'react';

const [collapsedEvents, setCollapsedEvents] = useState(new Set());

// 切换父事件的折叠状态
const toggleEventCollapse = (eventId) => {
  setCollapsedEvents(prev => {
    const updatedSet = new Set(prev);
    updatedSet.has(eventId) ? updatedSet.delete(eventId) : updatedSet.add(eventId);
    return updatedSet;
  });
};

3. 自定义事件渲染函数 #

通过eventContent渲染带折叠按钮的父事件，控制子事件的显示/隐藏：

const renderEventContent = (info) => {
  const event = info.event;
  const isParent = event.extendedProps.isParent;
  const isCollapsed = collapsedEvents.has(event.id);

  // 普通事件直接渲染标题
  if (!isParent) {
    return <div className="fc-event-title">{event.title}</div>;
  }

  // 父事件渲染：标题+折叠按钮+子事件列表
  return (
    <div className="parent-event">
      <div 
        onClick={() => toggleEventCollapse(event.id)} 
        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', padding: '2px 4px' }}
      >
        <span>{event.title}</span>
        <span>{isCollapsed ? '▼' : '▲'}</span>
      </div>
      {/* 非折叠状态下渲染子事件 */}
      {!isCollapsed && event.extendedProps.children.map(child => (
        <div 
          key={child.id} 
          className="child-event" 
          style={{ 
            padding: '2px 8px', 
            margin: '4px 0 4px 15px', 
            backgroundColor: '#f0f0f0', 
            borderRadius: '4px' 
          }}
        >
          {child.title}
        </div>
      ))}
    </div>
  );
};

4. 调整FullCalendar的事件传入逻辑 #

避免子事件被FullCalendar自动渲染，只传入父事件和普通事件：

// 过滤掉子事件，只传父事件和非父事件
events={[dragEventRow, ...timeFrames.filter(item => !item.isParent || !item.children)]}

5. 可选：样式优化 #

添加基础CSS让折叠结构更清晰：

.parent-event {
  background-color: #ffffff;
  border-radius: 4px;
}
.child-event {
  cursor: default;
  font-size: 0.9em;
}

注意事项 #

• 如果需要父事件拖拽时同步子事件时间，可在eventDrop/eventResize回调中遍历子事件，更新其start和end字段；
• 若子事件需要独立拖拽编辑，需将子事件加入events数组，通过状态控制其显示（父事件折叠时隐藏子事件），但会增加逻辑复杂度。

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