如何在Timeline view中显示全天事件及全天区域？

一、开启全天区域显示 #

Timeline视图（比如resourceTimeline）可以通过简单配置开启全天区域：

• 在日历配置里添加allDaySlot: true，就能在视图顶部显示全天专属区域；
• 用allDaySlotContent可以自定义区域标题，比如改成“全天”。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'resourceTimelineDay',
    resources: [
      { id: 'a', title: '资源A' },
      { id: 'b', title: '资源B' }
    ],
    allDaySlot: true, // 启用全天区域
    allDaySlotContent: '全天', // 自定义区域名称
    events: [
      { title: '项目评审', start: '2024-05-20T10:00', end: '2024-05-20T12:00', resourceId: 'a' }
    ]
  });
  calendar.render();
});

二、批量处理全天事件的resourceId（不用逐个添加） #

不想手动给每个全天事件加resourceId？试试这两种高效方法：

方法1：用事件源批量设置 #

给全天事件单独创建一个事件源，一次性指定资源范围：

// 主事件列表（普通带资源的事件）
events: [
  { title: '项目评审', start: '2024-05-20T10:00', end: '2024-05-20T12:00', resourceId: 'a' }
],
// 全天事件专用源，自动分配资源
eventSources: [
  {
    events: [
      { title: '公司会议', start: '2024-05-20', allDay: true },
      { title: '全员培训', start: '2024-05-21', allDay: true }
    ],
    resourceId: '*' // 显示在所有资源列；也可以指定资源数组，比如['a','b']
  }
]

方法2：用渲染钩子自动赋值 #

通过eventRender钩子，识别全天事件并自动添加resourceId：

eventRender: function(info) {
  if (info.event.allDay) {
    // 给全天事件设置所有资源可见，或者指定单个资源id
    info.event.setExtendedProp('resourceId', '*');
  }
}

三、自定义全天区域样式（可选） #

如果默认样式不符合需求，用CSS调整：

.fc-all-day-slot {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}
.fc-all-day {
  font-weight: 600;
  color: #495057;
}

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