Fullcalendar单元格背景颜色

Question

我需要在fullcalendar中更改日期的背景颜色。我的情况类似于这个问题：change background color of a range of dates in fullcalendar但是那里的解决方案是改变EVENT背景颜色。我想要的是更改从控制器收到的日期的单元格背景颜色，如["2013-02-22", "2013-2-20"]

我尝试解析这个日期，然后使用jquery css函数更改其背景颜色，但它不起作用。

Answer 1

在月视图中，您可以像这样设置各个日期的背景颜色（使用jQuery）：

$(".fc-day4").addClass("myBackgroundClass");

在CSS文件中，您将拥有以下内容：

.myBackgroundClass {
    background-color: grey;
}

这将给视图的第四天（不一定是月份的第四天，因为月份视图中的第一天通常实际上来自上个月）灰色背景。

在agendaWeek视图中，它的工作方式不同：

$(".fc-col0").addClass("myBackgroundClass");

这将为一周中最左侧的一天视图显示灰色背景（对于一周中的其他六天使用fc-col1 .. fc-col6）。在agendaDay视图中，只需使用fc-col0。

困难的部分是计算哪个日期对应于日历中的哪一列（以及月视图中的行）。您可以在viewDisplay回调中执行这些计算，根据docs，“当日历加载时以及每次显示不同的日期范围时触发”。

开始计算时，您需要从所有列和行中删除自定义背景，您可以这样做：

$(".myBackgroundClass").removeClass("myBackgroundClass");