Estoy tratando de encontrar la manera de cambiar el color de fondo de un día (la celda completa, no un evento) en FullCalendar.
Estoy usando la versión actual, 5. También estoy usando js, no jQuery. Todos los ejemplos que he encontrado hasta ahora usan dayRender, que parece que ya no existe en la versión 5, y jQuery.
El color de un día se puede configurar implementando el evento dayCellDidMount de la siguiente manera:
dayCellDidMount: ({ date, el }) => { if (date.getDate() == new Date().getDate()) el.style.backgroundColor = 'lime' }En este ejemplo, el color de fondo del día actual se establece en lima .
Vea un ejemplo de trabajo a continuación:
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>