Fullcalendar日程周视图首行背景色不一致问题求助（jQuery UI主题）

我之前也碰到过类似的情况，这大概率是jQuery UI主题的样式和FullCalendar默认的日程行样式优先级冲突导致的。给你几个实用的解决思路：

1. 用自定义CSS强制统一背景色 #

这是最直接有效的方法，你可以通过更具体的CSS选择器来覆盖原有样式，确保所有行的背景色一致。

首先打开浏览器开发者工具（按F12），定位到周视图里的时间行元素，你会发现第一行可能带有特殊的类（比如fc-first），或者是被jQuery UI的全局样式影响了。然后添加以下CSS代码：

/* 统一周视图所有时间行的背景色为#EEEEEE */
.fc-agendaWeek-view .fc-slats tr {
    background-color: #EEEEEE !important;
}

如果只想单独修正第一行的颜色，也可以针对性写：

/* 仅修正周视图第一行的背景色 */
.fc-agendaWeek-view .fc-slats tr.fc-first {
    background-color: #EEEEEE !important;
}

注意：!important是为了确保你的样式优先级高于jQuery UI和FullCalendar的默认样式，如果不用它也能生效的话，最好去掉，保持样式的可维护性。

2. 定位并覆盖jQuery UI的影响样式 #

有时候是jQuery UI主题里的全局表格样式（比如tr:first-child或者.ui-widget-content相关的规则）影响了第一行的背景色。你可以通过开发者工具的“样式”面板，查看第一行元素的背景色来源，找到对应的jQuery UI CSS规则，然后用更精确的选择器覆盖它。

比如如果发现是.ui-widget-content tr的规则导致的，就写：

.fc-agendaWeek-view .ui-widget-content tr {
    background-color: #EEEEEE;
}

3. 调整FullCalendar的主题配置（可选） #

如果你用的是支持主题配置的FullCalendar版本，在初始化日历的时候，可以检查下themeSystem相关的配置，看看有没有自定义行样式的选项。不过这个方法灵活性不如直接写CSS，所以优先推荐前两种方案。

总之，用开发者工具精准定位样式来源，再写自定义CSS覆盖，基本上就能快速解决这个问题啦。

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