jQuery FullCalendar : Change the color of every saturday except last saturday in the month

Question

Currently I am working on a project where I have implemented a jQuery Fullcalendar.

There are few requirements like:

1. Change the color of every Sunday (as Sundays will be off)

2. Change the color of every Saturday except last in all the months (last Saturday is on)

I have achieved the first task using the CSS

.fc-sun {
    background-color: #FFe5e5 !important;
}

But I am stuck at trying to achieve the second task.

I have tried to search over the google but could not find that how to do this.

Would like to apply any solution using jquery / Javascript / CSS .

Here is the fiddle

Thanks

Answer 1

Add this to the calendar options:

viewDisplay: function(view) {
   $(".fc-sun, .fc-sat").addClass("non-working-day");
   $(".fc-sat:not(.fc-other-month)").last().removeClass("non-working-day");
},

This to the css:

.non-working-day{
    background-color: #FFe5e5 !important;
}

Explanation:

The viewDisplay function will get call each this the view is reloaded(eg changing months). And each time we need to find the last Saturday for that month. We first add a class to all Saturday's and Sunday's and then we remove that class to the last Saturday since it's a working day.

Answer 2

viewDisplay: Option is not working on some older version So,try this if you have used old version of full calender try this

viewRender: function(view) {
   $(".fc-sun, .fc-sat").addClass("non-working-day");
   $(".fc-sat:not(.fc-other-month)").last().removeClass("non-working-day");
},

remove your old css and add this one

.non-working-day{
    background-color: #FFe5e5 !important;
}