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.
The color of a day can be set by implementing the dayCellDidMount event like so:
dayCellDidMount: ({ date, el }) => {
if (date.getDate() == new Date().getDate())
el.style.backgroundColor = 'lime'
}
In this example, current day background color is set to lime.
See a working example below:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
events: 'https://fullcalendar.io/api/demo-feeds/events.json',
editable: true,
selectable: true,
dayCellDidMount: ({ date, el }) => {
if (date.getDate() == new Date().getDate())
el.style.backgroundColor = 'lime'
}
});
calendar.render();
});html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css">
<div id='calendar'></div>