FullCalendar dayRender callback not working correctly

Question

Im using fullCalendar 1.6.4 and am having a problem setting custom colors for the weekends and today's cell.

After some searching I found that using the following styling to set background color of the weekend cells would work:

.fc-sat, .fc-sun {
    background-color: #CCCCCC;
}

But it doesn't completely. On the month view it only highlights a couple of pixels at the top and bottom of each weekend cell. in the week and day view it works better by highlighting the entire column with the exception of about 3.5 hours in the middle of the calendar. Even if i scroll the unhighlighted section remains a constant in the middle.

With regards to changing the background color of today, im using the following code:

dayRender: function (date, cell) { 
    var today = new Date();
        if (date.getDate() === today.getDate()) {
        cell.css("background-color", "#FF4D4D");
    }
}

This change only works for a fraction of a second when the calendar loads, i can see the change in color very quickly before the original/standard color overrides the change.

Please advise as to what is going on and how i can fix either of these issues.

Thanks in advance, Grant

Answer 1

I haven't looked into the dayRender event, but there should be no problem using plain old CSS to change the colors:

.fc-today{
    background-color: green;    
}
.fc-sat, .fc-sun{
    background-color: yellow;
}

See jsfiddle for example, there must be something else conflicting with your styles.

Try right clicking on the day and click "Inspect Element" (on Chrome, others may vary). Look at the td with the class you are trying to style and see whats overwriting your styles.