如何根据 FullCalendar V5 上的选择值过滤事件？

Question

I've just tried FullCalendar plugin for the first time, so i went with Version 5.

I just want to filter visible events by selecting value in a select dropdown.

I can't seem to find a simple and efficient way to do this with V5.

Many ressources that i found on internet talk about using rererenderEvents or refetchEvents but it refers to previous version of plugin and this is not working here.

I found a workaround by looping through the events and changing the visibility with setProp, but it doesn't look very good. I have a lot of events and the for loop takes several seconds (code in comment in snippet)

Thank you very much for your advice and help

 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

There are a couple of ways to approach filtering with fullCalendar:

1. Filter events out as they are rendered

2. Filter the data at source, before it arrives in fullCalendar.

The approach you've seen for previous versions of fullCalendar filtering the events are they are rendered is still applicable - and that's what I'll demonstrate here. However because there's no rerenderEvents equivalent in v5, you need to use refetchEvents to make fullCalendar fetch and draw the events again. The render function also won't achieve it.

However, refetchEvents won't work unless you have a dynamic event source. Currently you have a static list of events. Consequently there's

Therefore I've written a version with a nominal function-based event source - it returns the exact same events every time, but in practice of course you wouldn't do that - you'd write code to make it request/generate a dynamic set of events based on the dates supplied, or alternativey you'd use a JSON event source where the event data is fetched directly from a URL, and the server controls what is returned.

Also in v5 the eventRender callback is replaced by the event render hooks - for our purpose the eventDidMount callback will be suitable for what we want to do. You can filter each event out as it's rendered (as opposed to your example code where you tried to fetch all the events and update their properties.)

NB I haven't used jQuery at all here, but of course you're welcome to use it wherever you want to in place of the native DOM functions.

 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>