FullCalendar v6背景事件textColor无法修改的解决方法咨询

FullCalendar中设置display: 'background'的事件，默认样式会覆盖textColor属性，导致直接设置不生效，以下是三个可行的解决办法：

方法一：自定义事件内容渲染（推荐，灵活可控） #

利用FullCalendar的eventContent钩子，手动渲染背景事件的标题和样式，完全控制文本颜色：

在你的FullCalendar组件配置里添加：

eventContent: function(info) {
  // 判断是否为背景事件
  if (info.event.display === 'background') {
    return {
      html: `<div style="color: green; padding: 2px;">${info.event.title}</div>`
    };
  }
  // 普通事件保持默认渲染逻辑
  return null;
}

Vue组件中直接将该钩子加入FullCalendar的配置选项即可。

方法二：CSS全局样式覆盖 #

找到FullCalendar背景事件的DOM类，通过全局CSS修改文本颜色：

/* 针对背景事件的标题元素 */
.fc-event.fc-event-background .fc-event-title {
  color: green !important;
}

如果需要给不同背景事件设置不同文本颜色，可以给事件添加customClass做区分：

{
  task_id: 2,
  title: 'Test Time event',
  start: '2024-06-10T15:00:00',
  end: '2024-06-10T16:00:00',
  display: 'background',
  backgroundColor: '#ff9f89',
  borderColor: '#ff9f89',
  customClass: 'bg-event-green-text'
}

对应CSS：

.bg-event-green-text .fc-event-title {
  color: green !important;
}

方法三：放弃display: 'background'，手动实现背景效果 #

如果不想使用内置的背景事件类型，可以移除display: 'background'，通过customClass自定义样式实现背景效果，这样textColor就能正常生效：

{
  task_id: 2,
  title: 'Test Time event',
  start: '2024-06-10T15:00:00',
  end: '2024-06-10T16:00:00',
  backgroundColor: '#ff9f89',
  borderColor: '#ff9f89',
  textColor: 'green',
  customClass: 'manual-bg-event'
}

对应的CSS：

.manual-bg-event {
  opacity: 0.8; /* 模拟背景事件的透明度效果 */
  z-index: 1; /* 确保在普通事件下方，可选配置 */
}

内容的提问来源于stack exchange，提问作者Pai-Ting Lee