FullCalendar v5.9如何为每个资源设置不同的表头或列背景颜色

1. 扩展资源配置，新增自定义颜色字段 #

在你的resources数组项中补充表头背景色、列背景色的自定义参数，示例如下：

resources: [
  { id: 'a', title: 'Room A', headerBg: '#e3f2fd', colBg: '#f5faff' },
  { id: 'b', title: 'Room B', eventColor: 'green', headerBg: '#e8f5e9', colBg: '#f1f8e9' },
  { id: 'c', title: 'Room C', eventColor: 'orange', headerBg: '#fff3e0', colBg: '#fff8e1' },
  { id: 'd', title: 'Room D', eventColor: 'red', headerBg: '#ffebee', colBg: '#fce4ec' }
],

2. 新增日历回调配置，动态修改DOM样式 #

在日历初始化配置中添加两个生命周期回调，分别控制表头和列单元格的背景色，原有其他配置保持不变即可（注意修正你代码里initialDate的笔误dnew Date()为new Date()）：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 新增回调：自定义资源表头样式
  resourceLabelDidMount: function(info) {
    // 给表头元素设置背景色，也可自行补充文字颜色、边框等其他样式
    info.el.style.backgroundColor = info.resource.extendedProps.headerBg;
  },
  // 新增回调：自定义时间槽列样式
  slotDidMount: function(info) {
    // 过滤左侧时间轴槽，只给资源列的时间槽设置背景色
    if (info.resource) {
      info.el.style.backgroundColor = info.resource.extendedProps.colBg;
    }
  },

  // 以下保留你原来的所有配置即可
  initialView: 'resourceTimeGridTwoDay',
  initialDate: new Date(),
  locale: 'it',
  selectable: true,
  dayMaxEvents: true,
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
    meridiem: false
  },
  slotLabelFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
    meridiem: false
  },
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridTwoDay,resourceTimeGridWeek'
  },
  views: {
    resourceTimeGridTwoDay: {
      type: 'resourceTimeGrid',
      duration: { days: 3 },
      buttonText: '3 days',
      slotDuration: '00:15',
      slotMinTime: '08:00',
      slotMaxTime: '21:15',
    }
  },
  resources: [/* 上面修改后的资源配置 */],
  events: events2
});

calendar.render();

可选优化：用CSS类控制样式（更易维护） #

如果需要后续批量调整样式，也可以给元素加自定义类名，而非直接写内联样式：

// 回调修改为
resourceLabelDidMount: function(info) {
  info.el.classList.add(`resource-header-${info.resource.id}`);
},
slotDidMount: function(info) {
  if (info.resource) {
    info.el.classList.add(`resource-col-${info.resource.id}`);
  }
}

然后在CSS文件中定义对应类的样式即可：

.resource-header-a { background: #e3f2fd; }
.resource-col-a { background: #f5faff; }
.resource-header-b { background: #e8f5e9; }
.resource-col-b { background: #f1f8e9; }
/* 其余资源样式依次定义即可 */

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