FullCalendar 6.1.8事件过滤器仅生效一次的问题求助

问题根源 #

你遇到的问题核心在于：第一次筛选后，日历的事件源被替换成了筛选后的子集，后续调用calendar.getEvents()只能拿到当前显示的事件，而非所有原始事件。当你切换其他过滤器时，自然找不到未被包含在上次筛选结果里的事件，导致日历空白。

修复方案 #

提前保存原始事件数据，每次筛选都基于这份完整的原始数据进行过滤，而非操作日历当前的事件集合。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      
      // 保存原始事件数据
      var originalEvents = [
        {
          title: 'Event 1',
          start: '2024-01-01',
          dataFilter: 'filter1'
        },
        {
          title: 'Event 2',
          start: '2024-01-02',
          dataFilter: 'filter2'
        },
      ];

      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: originalEvents, // 使用原始事件数据初始化
        eventClick: function(info) {
          alert('Event: ' + info.event.title);
        },
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
      });

      calendar.render();

      var filterSelect = document.getElementById('filterSelect');

      filterSelect.addEventListener('change', function() {
        var selectedFilter = filterSelect.value;

        // 基于原始事件数据过滤
        var filteredEvents = originalEvents.filter(function(event) {
          return selectedFilter === 'all' || event.dataFilter === selectedFilter;
        });

        calendar.setOption('events', filteredEvents);
      });
    });
  </script>
</head>
<body>
  <label for="filterSelect">Select event:</label>
  <select id="filterSelect">
    <option value="all">All events</option>
    <option value="filter1">Event 1</option>
    <option value="filter2">Event 2</option>
  </select>

  <div id="calendar"></div>
</body>
</html>

关键修改点 #

1. 将原始事件数组提取为独立变量originalEvents，确保每次筛选都能拿到完整的事件集合。
2. 筛选逻辑从calendar.getEvents()改为从originalEvents中过滤，避免依赖日历当前的事件状态。
3. 直接操作原始事件对象，无需访问extendedProps，直接用event.dataFilter即可。

内容的提问来源于stack exchange，提问作者Hector