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

Question

我在FullCalendar 5中使用月份显示。查看该月时，将显示4月的最后几天以及6月的前几天。

我的问题是，当FullCalendar发送开始和结束日期时，它发送它们用于显示日期的开始和结束，例如4月28日- 6月5日，然后显示事件，包括上个月和下个月显示的天数。

在这个例子中，有没有办法将显示限制在5月份的事件?

Answer 1

我在文档中遇到的最有希望的选项是eventClassNames，在事件渲染钩子下。下面是className Inputs文档的链接，这里有一个关于如何使用它的更好的例子。

简而言之，我们可以指定一个eventClassNames回调函数，可以选择性地为每个事件添加类名，因为它被呈现。回调接收一个参数，该参数是一个对象，其中包含有关当前视图和正在呈现的事件的所有类型的数据。一点console.dir()可以让我们看到它是什么样子的。

从那里，我们可以检查事件是否在当前显示月份的开始/结束之前/之后，如果是，添加一个CSS类。我选择了hidden，但当然它可以是任何东西。注意，你的CSS确实需要非常具体，以确保该类覆盖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>