FullCalendar 5.7月视图隔行变色 nth-child需定位哪个目标元素

问题原因 #

FullCalendar 5.x 版本对视图DOM结构做了全量重构，两类旧写法均无法适配当前版本：

• 直接匹配td:nth-child(odd)的写法选中的是每行内的奇数列单元格，最终呈现列交替效果，不符合行变色需求
• 针对v4及更早版本的div.fc-row选择器已失效，新版本月视图的周行已经改为标准table tr结构，不存在旧版的div行节点。

可用实现代码 #

直接添加以下CSS即可实现月视图交替行（按周交替）变色效果，样式不会污染其他视图：

/* 月视图偶数周行日期单元格背景色 */
.fc-dayGridMonth-view .fc-daygrid-body tr:nth-of-type(even) .fc-daygrid-day {
    background: rgba(240,240,247,1);
}
/* 基础样式修正，避免边框错位 */
.fc-dayGridMonth-view .fc-scrollgrid {
    border-collapse: collapse;
    border-spacing: 0;
}
.fc-dayGridMonth-view .fc-daygrid-day {
    font-size: 1em;
}

如果需要奇数行变色，把:nth-of-type(even)替换为:nth-of-type(odd)即可。

选择器说明 #

• 外层加.fc-dayGridMonth-view作用域，仅对月视图生效，不影响周视图、日程视图等其他FullCalendar视图
• 选中.fc-daygrid-body下的tr节点，该节点对应日历中每一周的整行，不会匹配顶部的星期表头行
• 背景色必须设置在.fc-daygrid-day（单个日期单元格）节点上，直接给tr设置背景会被单元格默认背景层覆盖，无法生效。

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