如何在FullCalendar V5上根据选择值筛选事件

Question

我刚刚第一次尝试FullCalendar插件，所以我选择了版本5。

我只想通过在选择下拉列表中选择值来过滤可见事件。

我似乎找不到一种简单有效的方法来用V5实现这一点。

我在互联网上发现的许多资源都在谈论使用rerenderEvents或refetchEvents，但它指的是插件的前一版本，这在这里不起作用。

我找到了一个解决方法，通过循环事件并使用setProp更改可见性，但看起来不太好。我有很多事件，for循环需要几秒钟(代码段中注释中的代码(

非常感谢您的建议和帮助

document.addEventListener('DOMContentLoaded', function() {
let currentDayDate = new Date().toISOString().slice(0, 10);
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
firstDay: 1,
hiddenDays: [ 0, 6 ],
slotMinTime: '07:00',
slotMaxTime: '20:00',
allDaySlot: false,
headerToolbar: {
left: 'prev,today,next',
center: 'title',
right: 'timeGridDay,timeGridWeek'
},
views: {
timeGridWeek: {
type: 'timeGrid',
duration: { days: 2 },
buttonText: '2 day'
}
},
events: [{
"title": "Marc",
"start": currentDayDate + " 07:30",
"end": currentDayDate + " 08:30",
"userId": "1"
}, {
"title": "Tom",
"start": currentDayDate + " 09:30",
"end": currentDayDate + " 10:30",
"userId": "2"
}, {
"title": "David",
"start": currentDayDate + " 11:30",
"end": currentDayDate + " 12:30",
"userId": "3"
}]
});
calendar.render();

//  $( document ).ready(function() {
//   $('#selector').on('change',function(){            
//     var events = calendar.getEvents();
//     for (var i = events.length - 1; i >= 0; i--) {
//       if ($("#selector").val() == events[i].extendedProps.userId || $("#selector").val() == "all") {
//         events[i].setProp("display", "block");
//       }
//       else {
//         events[i].setProp("display", "none");
//       }
//     }
//   });
// });

});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
<option value="all">All</option>
<option value="1">Marc</option>
<option value="2">Tom</option>
<option value="3">David</option>
</select>
<div id="calendar">
</div>

Answer 1

有几种方法可以使用fullCalendar进行过滤：

1. 在呈现时过滤掉事件

2. 在数据到达fullCalendar之前，在源处筛选数据。

您在以前版本的fullCalendar中看到的在呈现事件时过滤事件的方法仍然适用，这就是我将在这里演示的。但是，由于v5中没有等效的rerenderEvents，因此需要使用refetchEvents使fullCalendar再次获取和绘制事件。render功能也无法实现。

但是，如果没有动态事件源，refetchEvents将无法工作。当前您有一个静态事件列表。因此出现了

因此，我编写了一个带有基于名义函数的事件源的版本-它每次都返回完全相同的事件，但在实践中你当然不会这么做-你可以编写代码，让它根据提供的日期请求/生成一组动态事件，或者你可以使用JSON事件源，其中事件数据直接从URL获取，并且服务器控制返回的内容。

同样在v5中，eventRender回调被事件呈现挂钩所取代-为了我们的目的，eventDidMount回调将适合我们想要做的事情。你可以在呈现每个事件时过滤掉它(与你的示例代码相反，你试图获取所有事件并更新其属性。(

注意：我在这里根本没有使用jQuery，但当然欢迎您在任何地方使用它来代替原生DOM函数。

document.addEventListener('DOMContentLoaded', function() {
let currentDayDate = new Date().toISOString().slice(0, 10);
let selector = document.querySelector("#selector");
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
firstDay: 1,
hiddenDays: [0, 6],
slotMinTime: '07:00',
slotMaxTime: '20:00',
allDaySlot: false,
headerToolbar: {
left: 'prev,today,next',
center: 'title',
right: 'timeGridDay,timeGridWeek'
},
views: {
timeGridWeek: {
type: 'timeGrid',
duration: {
days: 2
},
buttonText: '2 day'
}
},
eventDidMount: function(arg) {
let val = selector.value;
if (!(val == arg.event.extendedProps.userId || val == "all")) {
arg.el.style.display = "none";
}
},
events: function (fetchInfo, successCallback, failureCallback) {
successCallback([{
"title": "Marc",
"start": currentDayDate + " 07:30",
"end": currentDayDate + " 08:30",
"userId": "1"
}, {
"title": "Tom",
"start": currentDayDate + " 09:30",
"end": currentDayDate + " 10:30",
"userId": "2"
}, {
"title": "David",
"start": currentDayDate + " 11:30",
"end": currentDayDate + " 12:30",
"userId": "3"
}]);
}
});
calendar.render();
selector.addEventListener('change', function() {
calendar.refetchEvents();
});
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<select id="selector">
<option value="all">All</option>
<option value="1">Marc</option>
<option value="2">Tom</option>
<option value="3">David</option>
</select>
<div id="calendar">
</div>