Didi Didi - 1 month ago 12
Javascript Question

Color the days with event on FullCalendar

My events are displayed with random colors, but instead of that, I would like to have a result like this :

fullcalendar

I want to color all the days with an event on it. I already made some researches with custom views and the eventRender method but I don't know how to color all days which have an event.
The simplified code to change :

$('#calendar').fullCalendar({
eventRender: function(event, element) {
// here, event.parent().css("background-color:pink;"); ??
}
});

Answer

To color the background color of a cell (td) that contains an event, you need to find that td and change it's background color. Luckily each td has a data-date so try changing your eventRender to,

eventRender: function (event, element) {
    var eventStart = moment(event.start);
    var eventEnd = event._end === null ? eventStart : moment(event.end);
    var diffInDays = eventEnd.diff(eventStart, 'days');
    $("td[data-date='" + eventStart.format('YYYY-MM-DD') + "']").css('background-color','pink');
    for(var i = 1; i < diffInDays; i++) {
        eventStart.add(1,'day');
        $("td[data-date='" + eventStart.format('YYYY-MM-DD') + "']").css('background-color','pink');
    }
}

I hope this helps.