如果不是正在查看的月份，如何防止显示 FullCalendar 事件流事件？

Question

我在 FullCalendar 5 中使用月份显示。查看这个月时，会显示四月的最后几天以及六月的前几天。

我的问题是，当 FullCalendar 发送开始和结束日期时，它会发送显示日期的开始和结束日期，例如 4 月 28 日至 6 月 5 日，然后显示事件，包括之前的事件显示月份和下个月的天数。

有什么方法可以使用此示例将显示限制为 5 月的事件吗？

Answer 1

我在文档中遇到的最有前途的选项是 eventClassNames，Event Render Hooks. Following the link there to the docs about className Inputs 下给出了如何使用它的更好示例。

简而言之，我们可以指定一个 eventClassNames 回调函数，它可以在每个事件呈现时选择性地向每个事件添加 class 名称。回调接收一个参数，该参数是一个对象，其中包含有关当前视图和正在呈现的事件的各种数据。稍微 console.dir()ing 让我们看看它的样子。

从那里，我们可以检查事件是否是当前显示月份的 before/after 和 start/end，如果是，添加一个 CSS class它。我选择了 hidden 但当然它可以是任何东西。请注意，您的 CSS 确实需要非常具体，以确保 class 覆盖 Fullcalendar 已经应用的其他内容。

let events = [
    {title: 'Event 1', start: '2022-05-01'},
    {title: 'Event 2', start: '2022-05-10'},
    {title: 'Event 3', start: '2022-05-31'},
    {title: 'Event 3', start: '2022-06-01'},
    {title: 'Event 4', start: '2022-06-04'},
];

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: events,
        eventClassNames: function(arg) {
            // console.dir(arg);
            let eventStart = arg.event.start;
            let monthStart = arg.view.currentStart;
            let monthEnd = arg.view.currentEnd;
            return (eventStart < monthStart || eventStart >= monthEnd)
                ? 'hidden'
                : '';
        }
    });
    calendar.render();
});

/* Needs to be quite specific to make sure it overrides other styles */
a.fc-daygrid-event.hidden {
    display: none;
}

<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>

如果不是正在查看的月份，如何防止显示 FullCalendar 事件流事件？

How to prevent FullCalendar event stream events from being displayed if they are not for the month being viewed?

events

fullcalendar