我需要更改fullcalendar中日期的背景顏色。我的情況與此問題類似:change background color of a range of dates in fullcalendar,但解決方案正在更改EVENT背景顏色。我想要的是改變從控制器收到日期的單元格背景顏色,如["2013-02-22", "2013-2-20"]
完整的Calenday單元格背景顏色
我試着解析這個日期,然後改變它的背景顏色使用jQuery的CSS函數,但它沒有奏效。
我需要更改fullcalendar中日期的背景顏色。我的情況與此問題類似:change background color of a range of dates in fullcalendar,但解決方案正在更改EVENT背景顏色。我想要的是改變從控制器收到日期的單元格背景顏色,如["2013-02-22", "2013-2-20"]
完整的Calenday單元格背景顏色
我試着解析這個日期,然後改變它的背景顏色使用jQuery的CSS函數,但它沒有奏效。
在月視圖中,可以(使用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");