Fullcalendar: Change the color for specific days

For those looking to simply change the color of past dates, target .fc-past in your css and add a background-color property. E.g.,:

.fc-past {
    background-color: silver;
}

For the views month, basicWeek and basicDay you can change the rendering of the days by providing a dayRender function. E.g.:

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        cell.css("background-color", "red");
    }
});

The documentation for dayRender is available here: http://arshaw.com/fullcalendar/docs/display/dayRender/

And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

    dayRender: function(date, cell){
        if (moment().diff(date,'days') > 0){
            cell.css("background-color","silver");
        }
    },

Related