Search code examples
jqueryfullcalendarfullcalendar-3

FullCalendar Date Text Color Not Changing (Not Event Text)

I am using (version 3.6.2) and have set bootstrap3 as the themeSystem. Upon user triggers some calculation, I would like to update the calendar. A certain date would have new background colour (e.g. DarkRed) and the text colour (of the date) needs to be white to be visible.

This is what I did originally:

$('#calendar').fullCalendar('option', 'dayRender', function (date, cell) {
    if (date.local().isSame(moment(newDate))) {
        cell.css("background-color", "DarkRed");
        cell.css("color", "white");
    }
});

"newDate" is the calculated date in Moment.

The background colour changed correctly. However, the text colour does not change to white.

Then I inspected the cell and realised that the date is on another div. It's displayed on fc-content-skeleton.

How do I change CSS color for this?

Solution

  • Got it! Thanks to a friend who gave some pointers.

    As above, we already know the date of the cell to be changed. We can already change background-color. To get the correct <td> in the fc-content-skeleton, we find using [data-date] attribute.

    $('td').find("[data-date='" + newDateShort + "']") will give the correct <td>, where newDateShort is the date in yyyy-mm-dd format.

    Hence, we change colour of it.

    $('td').find("[data-date='" + newDateShort + "']").css("color", "white");