如何修改FullCalendar单元格背景色实现成员可用性热力图？

嘿，我完全懂你想做的事——用FullCalendar做一个像when2meet那样的成员可用性热力图，不管单元格里有没有事件，都能根据数据给它涂上对应的背景色对吧？之前用无标题的背景事件踩了颜色不对的坑，我给你分享几个亲测有效的方案：

方案一：直接操作DOM单元格（最推荐，可控性拉满） #

FullCalendar提供了单元格挂载/渲染完成的钩子，我们可以直接拿到每个单元格的DOM元素，然后根据你的可用性数据设置背景色，完全不受事件影响。

React/Vue3 版本示例 #

比如用React的FullCalendar，用dayCellDidMount钩子：

<FullCalendar
  plugins={[dayGridPlugin, timeGridPlugin]}
  initialView="timeGridWeek"
  // 你的其他配置
  dayCellDidMount={({ el, date }) => {
    // 这里替换成你的逻辑：根据date获取对应的可用性等级
    const availability = getAvailabilityForDate(date);
    // 映射颜色，比如高可用绿色，中可用黄色，低可用红色
    let bgColor;
    switch(availability) {
      case 'high':
        bgColor = '#86efac';
        break;
      case 'medium':
        bgColor = '#fbbf24';
        break;
      case 'low':
        bgColor = '#f87171';
        break;
      default:
        bgColor = '#ffffff';
    }
    // 设置背景色，加个透明度避免覆盖事件内容
    el.style.backgroundColor = bgColor;
    el.style.opacity = 0.7;
    // 如果是时间网格的小时单元格，也可以用`slotCellDidMount`钩子
  }}
/>

jQuery/原生JS版本 #

如果是传统的jQuery版本，用eventAfterAllRender事件：

$('#calendar').fullCalendar({
  // 其他配置
  eventAfterAllRender: function(view) {
    // 遍历所有日期单元格
    $('.fc-day').each(function() {
      const date = $(this).data('date');
      const availability = getAvailabilityForDate(date);
      // 同样的颜色映射逻辑
      let bgColor;
      switch(availability) {
        case 'high': bgColor = '#86efac'; break;
        case 'medium': bgColor = '#fbbf24'; break;
        case 'low': bgColor = '#f87171'; break;
        default: bgColor = '#ffffff';
      }
      $(this).css({
        'background-color': bgColor,
        'opacity': 0.7
      });
    });
    // 时间网格的小时单元格可以遍历`.fc-slats td`
  }
});

这个方案的好处是完全不依赖事件，直接针对单元格本身操作，想怎么上色就怎么上色，完美适配热力图的需求。

方案二：修复背景事件的颜色显示问题 #

如果你还是想用背景事件的方式，那大概率是FullCalendar的默认样式覆盖了你的自定义颜色。我们可以通过加强CSS优先级或者正确配置事件属性来解决：

1. 正确配置背景事件 #

const backgroundEvents = [
  {
    title: '', // 无标题
    start: '2024-05-20T09:00:00',
    end: '2024-05-20T10:00:00',
    display: 'background', // 标记为背景事件
    backgroundColor: '#000000',
    borderColor: 'transparent', // 去掉边框干扰
    className: 'custom-availability-bg' // 自定义类名，方便加CSS
  }
];

2. 用CSS强制覆盖默认样式 #

.custom-availability-bg {
  background-color: #000000 !important; /* 强制覆盖默认颜色 */
  opacity: 0.8 !important; /* 调整透明度，避免太暗影响事件阅读 */
  border: none !important;
}

FullCalendar的背景事件默认会有一些内置的透明度和样式，用!important或者更具体的选择器（比如.fc-timeGridWeek .custom-availability-bg）就能强制生效了。

小提示 #

• 如果是时间网格视图（小时级），记得用slotCellDidMount（React/Vue）或者遍历.fc-slats td（jQuery）来处理小时单元格。
• 调整透明度的时候，留一点余地，让单元格里的事件内容能正常显示。

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