CODEWITHSUNDEEP
asp.net-mvcfullcalendar
WannaCSharp
WannaCSharp

Reputation: 1898

Full Calenday cell background color

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"]

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

Upvotes: 0

Views: 949

Answers (1)

user1332981
user1332981

Reputation: 312

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

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

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.

In agendaWeek view it works differently:

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

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.

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");

Upvotes: 1

Related Questions