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

Question

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

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

我似乎找不到使用 V5 的简单有效的方法。

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

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

非常感谢您的建议和帮助

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 将不起作用。目前，您有一个静态的事件列表。因此有

因此，我编写了一个带有标称 function-based 事件源的版本——它每次都返回完全相同的事件，但实际上你当然不会这样做——你会编写代码来让它请求/根据提供的日期生成一组动态事件，或者您可以使用 JSON event source 直接从 URL 获取事件数据，并由服务器控制返回的内容。

同样在 v5 中，eventRender 回调被 event render hooks 取代 - 出于我们的目的，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>