FullCalendar V5 timeGridWeek能否为指定时段单元格添加背景色？

因为FullCalendar的timeGrid视图是用行元素+时段区块的方式渲染的，没有单独的单元格DOM元素，所以得用官方提供的钩子或背景事件来实现需求：

方法一：使用背景事件（推荐，官方原生支持） #

直接添加一个background类型的事件，让它填充目标时段的背景，无需手动操作DOM：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    events: [
      // 其他业务事件
      {
        start: '2024-05-20T07:00:00', // 替换成目标周一的日期
        end: '2024-05-20T10:00:00',
        display: 'background',
        backgroundColor: 'red'
      }
    ]
  });
  calendar.render();
});

• 这个方法会自动在对应日期的7:00-10:00区域渲染红色背景，完全适配FullCalendar的视图逻辑，不会出现样式错位问题。
• 如果需要动态添加/移除这类背景，调用calendar.addEvent()或calendar.removeEvent()即可。

方法二：通过slotDidMount钩子操作DOM #

如果需要更灵活的DOM控制，可以用v5+版本提供的slotDidMount回调，判断每个时段的时间范围后修改样式：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    slotDidMount: function(info) {
      // 获取当前slot的日期和时间
      var slotStart = info.slotStart;
      // 判断是否是目标周一（示例为2024-05-20，可替换成动态判断逻辑）
      var isTargetDate = slotStart.getDate() === 20 && slotStart.getMonth() === 4 && slotStart.getFullYear() === 2024;
      // 判断时间是否在7:00-10:00之间
      var hour = slotStart.getHours();
      var isTargetHour = hour >=7 && hour <10;
      
      if(isTargetDate && isTargetHour) {
        // 修改slot的背景色
        info.el.style.backgroundColor = 'red';
        // 如需半透明可添加：info.el.style.opacity = '0.5';
      }
    }
  });
  calendar.render();
});

• 注意：slotDidMount会在每个时段区块渲染时触发，需要准确判断日期和小时范围。
• FullCalendar v4及以前版本可使用slotRender代替slotDidMount。

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