按周替换全日历行背景颜色答案

【问题标题】：alternate fullcalendar row background color by week按周替换全日历行背景颜色
【发布时间】：2020-07-31 22:58:22
【问题描述】：

(I check this post already) 我尝试从 fullcalendar 中替换周背景颜色，我尝试了很多，但它改变了我的所有背景，或者只是改变了事件背景。我使用 chrome 检查工具，看到他们使用了该表，但每个表都没有类名。

//这是我尝试的代码：

table tr:nth-child(even) {
background: #CCC
}

table tr:nth-child(odd) {
background: #FFF
}

上面的代码只改变我的活动内容背景颜色，而不是整个星期的行背景。

非常感谢大家！

【问题讨论】：

【解决方案1】：

不要使用nth-child，而是使用nth-of-type。

此外，您需要定位代表行的一系列 <div> 元素 - 它们不是表格。它们在一个表中，并且其中还有更多表，但行本身实际上是<div>s（您可以在使用浏览器工具检查呈现的日历 HTML 时看到这一点）。

.fc-day-grid > div.fc-row:nth-of-type(even) {
    background: #CCC;
}

请参阅http://jsfiddle.net/sbxpv25p/66/ 以获得工作演示。

感谢这个答案：CSS div alternating colour 提供了一个在divs 上交替颜色的通用示例 - 实际上，此解决方案并非特定于 fullCalendar，而是特定于 HTML 的结构。

【讨论】：

【解决方案2】：

对于@fullcalendar 角度实现，您可以使用此选择器来实现这一点

.fc-timegrid-slots tr:nth-of-type(even) {
    background: #CCC;
}

【讨论】：