Search code examples
javascriptfullcalendarfullcalendar-5

How to change the background color of a specific day in FullCalendar 5 with js?


I'm trying to find the way to change the background color of a day (the full cell, not an event) in FullCalendar.

I'm using the current version, 5. I'm also using js, not jQuery. All of the examples I've found so far use dayRender, which doesn't seem to exist any longer in version 5, and jQuery.


Solution

  • You can use dayCellDidMount for this. To get one specific date, you should check for getMonth() next to getDate(), if not you might end up with two colored dates (as getMonth() only gets the day number of the month).

    dayCellDidMount: ({ date, el }) => {
        const requested_date = new Date();
        if (date.getDate() === requested_date.getDate() && date.getMonth() === requested_date.getMonth()) {
            el.style.backgroundColor = 'lime';
        }
    },