Fullcalendar: Change the color for specific days

Question

I\'m stuck with a project I get at work. I need to change the background color of some days. It\'s a calendar where the user should see, which days are available and which n

Answer 1

To compare using the date parameter for a specific day:

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        if (date.isSame('2016-08-04')) {
           cell.css("background-color","red");
        }
    }
});

isSame comes from moment.js, which is used by fullcalendar: http://momentjs.com/docs/#/query/is-same/

Answer 2

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/

Answer 3

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;
}

Answer 4

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

Answer 5

If any one want to jquery fullcalendar previous all day red(or any other) colored then this is the code.

    var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },

    defaultView: 'month',

    dayRender: function (date, cell) {
       var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
                    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
                    if (check < today) {
                        cell.css("background-color", "red");
                    }
    }
});

Regin Larsen code help me achive this. Thanks Regin Larsen.

Answer 6

getDate does not work I guess, use moment instead.

inside var calendar = $('#calendar').fullCalendar({ ... }

dayRender: function (date, cell) {
        var today = moment('2018-06-22T00:00Z');
        if (date.isSame(today, "day")) {
            cell.css("background-color", "blue");
        }
    },