如何使用js在FullCalendar 5中更改特定日期的背景颜色

Question

我正试图找到在FullCalendar中更改一天(整个单元格，而不是事件(背景颜色的方法。

我使用的是当前版本，5。我也在使用js，而不是jQuery。到目前为止，我发现的所有示例都使用dayRender和jQuery，后者在版本5中似乎不再存在。

Answer 1

可以通过实现dayCellDidMount事件来设置一天的颜色，如下所示：

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

在本例中，当前日期的背景色设置为石灰。

参见下面的工作示例：

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>