Full Calendar Nested Events 实现班次内嵌休息时段展示方法问询

FullCalendar原生没有专门的嵌套事件配置项，但有两种非常简便的方式可以实现需求，不需要引入额外依赖：

方案1：父子事件关联法（支持子事件独立交互） #

如果休息时段需要支持独立的拖拽、编辑、点击查看详情等交互，优先选这个方案：

• 给事件加parentId扩展字段区分层级，主班次事件不带该字段，休息子事件的parentId绑定对应主班次的id，数据示例：

// 主事件（工作班次）
{
  id: 'shift_001',
  title: '白班',
  start: '2024-06-10 09:00:00',
  end: '2024-06-10 18:00:00',
  color: '#bfdbfe'
}
// 子事件（休息时段）
{
  id: 'break_001',
  parentId: 'shift_001',
  title: '午休',
  start: '2024-06-10 12:00:00',
  end: '2024-06-10 13:00:00',
  color: '#fca5a5'
}

• 新增eventDidMount钩子调整层级样式，保证休息事件显示在班次上层：

eventDidMount: function(info) {
  // 给子事件设置更高层级，避免被主事件遮挡
  if (info.event.extendedProps.parentId) {
    info.el.style.zIndex = 10;
    // 可自定义子事件样式，比如缩小内边距、调整字体大小
    info.el.style.padding = '2px 4px';
  }
}

这个方案不需要修改核心配置，FullCalendar可以直接正常渲染两类事件，所有原生事件的交互能力都能保留。

方案2：主事件内嵌内容法（无独立交互需求优先选） #

如果休息时段不需要单独的交互操作，可以直接在主班次内部渲染休息块，更简洁：

• 主班次的扩展属性里加休息时段数组：

{
  id: 'shift_001',
  title: '白班',
  start: '2024-06-10 09:00:00',
  end: '2024-06-10 18:00:00',
  extendedProps: {
    breaks: [
      {start: '2024-06-10 12:00:00', end: '2024-06-10 13:00:00', title: '午休'},
      {start: '2024-06-10 15:00:00', end: '2024-06-10 15:15:00', title: '下午茶'}
    ]
  }
}

• 通过eventContent钩子计算每个休息块的宽度和位置，直接插入到主班次的DOM节点中即可，不需要额外定义子事件。

注意事项 #

• 两种方案都需要提前校验休息时段的时间范围，必须完全落在对应班次的时间范围内，避免出现渲染错位
• 使用方案1时如果需要隐藏所有休息时段，直接通过事件过滤规则剔除带parentId的事件即可，不需要修改原始数据

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