完整的Calenday细胞背景颜色 [英] Full Calenday cell background color

问题描述

我需要在fullcalendar中更改日期的背景颜色。我的情况类似于这个问题：改变背景颜色全日历范围内的日期范围，但解决方案正在改变事件背景颜色。我想要的是改变从控制器收到的日期的单元格背景颜色，如 [2013-02-22，2013-2-20]

I need to change the background color of dates in fullcalendar. My case is similar to this question: change background color of a range of dates in fullcalendar but the solution there is changing the EVENT background color. What I want is to change the cell background color of dates recieved from the controller like ["2013-02-22", "2013-2-20"]

我试着解析这个日期，然后使用jquery css函数更改它的背景颜色，但它没有用。

I tried parsing this dates then change its background color using jquery css function but it didn't work.

推荐答案

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

In month view, you can set the background color of individual days like this (using jQuery):

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

在您的CSS文件中，您将拥有如下所示的内容：

In your CSS file, you will have something like this:

.myBackgroundClass {
    background-color: grey;
}

这会给第四天的观点（不一定是第四天这个月，自从月的第一天开始，实际上往往是从上个月开始）灰色背景。

This will give the fourth day of the view (not necessarily the fourth day of the month, since the first day in month view is often actually from the previous month) a grey background.

在 agendaWeek 查看它的工作方式不同：

In agendaWeek view it works differently:

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

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

This will give the left-most day of the week view a grey background (use fc-col1 .. fc-col6 for the other six days of the week). In agendaDay view, simply use fc-col0.

困难的部分是计算哪个日期对应于日历中的哪一列（以及在月视图中是行）。您可以在 viewDisplay 回调中执行这些计算，根据 docs 。

The hard part is calculating which date corresponds to which column (and, in case of month view, row) in the calendar. You can do these calculations in the viewDisplay callback, which, according to the docs, is triggered "when the calendar loads and every time a different date-range is displayed."

当您启动计算，你会想从所有的列和行中删除你的自定义背景，你可以这样做：

When you start your calculations, you will want to remove your custom background from all columns and rows, which you can do like this:

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

这篇关于完整的Calenday细胞背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！