FullCalendar 6 eventBackgroundColor仅在timeGridWeek视图生效问题求助

问题根源是Bootstrap的锚点（<a>标签）CSS规则优先级高于FullCalendar默认的事件样式，而dayGridMonth、timeGridDay视图中的事件元素是<a>标签，导致你设置的eventBackgroundColor被覆盖。

以下是两种可行的解决方法：

方法一：用高优先级CSS直接覆盖 #

在你的样式文件中添加以下代码，强制指定事件的背景色：

.fc-event {
  background-color: red !important;
  border-color: red !important; /* 可选：如果需要统一事件边框颜色 */
}

!important会提升样式优先级，确保覆盖Bootstrap的锚点样式。

方法二：自定义事件类名 #

在FullCalendar配置中添加eventClassNames属性，指定自定义类：

var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他配置...
    eventBackgroundColor: 'red', // 保留原配置，配合自定义类增强优先级
    eventClassNames: 'custom-event-background',
    // 其他配置...
});

然后在样式文件中给这个类写样式：

.custom-event-background {
  background-color: red !important;
  border-color: red !important;
}

两种方法都能解决Bootstrap样式覆盖的问题，任选其一即可。

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