FullCalendar：资源视图「Rooms/Shifts」的自定义时间线与事件插槽

完全可以通过FullCalendar Pro的Resource Timeline视图实现你要的效果，核心思路是把「每日班次」作为独立资源，让每个资源对应一个可容纳多事件的插槽，具体实现步骤如下：

• 定义班次资源
  将每日的两个班次拆分为独立的资源项，每个资源对应一个「日/班次」插槽。你可以手动定义资源，也可以通过函数动态生成指定日期范围内的班次资源（比如未来7天的早/晚班）。

• 配置Timeline视图
  使用resourceTimeline视图，隐藏不必要的小时刻度，让每个资源行直接代表一个班次插槽。通过resourceAreaHeaderContent设置资源区的标题为「日/班次」。

• 绑定事件到对应班次
  给每个事件指定对应的resourceId（匹配班次资源的ID），并设置事件的日期范围为对应班次的日期，这样多个事件会自动堆叠在同一个班次插槽内。

示例代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 动态生成指定日期范围的班次资源
  function generateShiftResources(startDateStr, totalDays) {
    const resources = [];
    const currentDate = new Date(startDateStr);
    
    for (let i = 0; i < totalDays; i++) {
      const dateStr = currentDate.toISOString().split('T')[0];
      const month = currentDate.getMonth() + 1;
      const day = currentDate.getDate();
      
      // 添加早班资源
      resources.push({
        id: `${dateStr}-shift1`,
        title: `${month}/${day} 早班`
      });
      // 添加晚班资源
      resources.push({
        id: `${dateStr}-shift2`,
        title: `${month}/${day} 晚班`
      });
      
      currentDate.setDate(currentDate.getDate() + 1);
    }
    return resources;
  }

  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    plugins: ['resourceTimeline'],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimelineDay'
    },
    initialView: 'resourceTimelineDay',
    // 生成未来7天的班次资源
    resources: generateShiftResources('2024-05-20', 7),
    events: [
      {
        title: '团队会议',
        start: '2024-05-20',
        end: '2024-05-21',
        resourceId: '2024-05-20-shift1'
      },
      {
        title: '客户对接',
        start: '2024-05-20',
        end: '2024-05-21',
        resourceId: '2024-05-20-shift1'
      },
      {
        title: '项目复盘',
        start: '2024-05-20',
        end: '2024-05-21',
        resourceId: '2024-05-20-shift2'
      }
    ],
    // 隐藏小时刻度，简化显示
    slotLabelFormat: [],
    resourceAreaHeaderContent: '日/班次',
    // 允许同一插槽内堆叠多个事件
    eventOverlap: true
  });

  calendar.render();
});

额外优化点 #

• 如果需要按周/月视图展示，可以切换到resourceTimelineWeek或resourceTimelineMonth，资源会自动按日期分组显示。
• 可以通过eventContent自定义事件的显示样式，让多事件堆叠更清晰。

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