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

Question

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

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

Answer 1

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

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

在这个例子中，当天的背景色设置为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>

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

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

javascript

fullcalendar

fullcalendar-5