FullCalendar V5如何基于下拉选择框的值过滤日历事件？

核心实现思路 #

• 把事件源定义为函数类型，将过滤逻辑内置在事件源加载逻辑中
• 下拉选择变更时直接调用官方refetchEvents() API触发事件重新加载，FullCalendar内部会做批量渲染优化，无需手动遍历修改每个事件属性，性能远高于手动遍历方案
• 如果事件是从后端接口拉取，只需在事件源函数中把选中的userId作为参数请求后端即可，逻辑完全复用

完整修改代码 #

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  let currentDayDate = new Date().toISOString().slice(0, 10);
  // 缓存原始事件列表，本地静态事件无需重复请求
  const originEvents = [{
    "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"
  }];
  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: function(fetchInfo, successCallback, failureCallback) {
      const selectedUserId = $('#selector').val();
      if (selectedUserId === 'all') {
        successCallback(originEvents);
        return;
      }
      // 过滤匹配userId的事件
      const filteredEvents = originEvents.filter(event => event.userId === selectedUserId);
      successCallback(filteredEvents);
    }
  });
  calendar.render();
  
  // 下拉变更逻辑
  $(document).ready(function() {
    $('#selector').on('change', function() {
      // 直接调用refetchEvents触发重新过滤渲染
      calendar.refetchEvents();
    });
  });
});

HTML代码 #

和原有代码完全一致，无需修改：

<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>

性能优势说明 #

• 不需要手动遍历所有事件修改属性，避免了大量单步DOM操作带来的性能损耗
• 完全复用FullCalendar V5官方提供的事件加载、渲染逻辑，内部做了批量更新优化，即使事件数量达到数千条也不会出现数秒卡顿
• 代码逻辑更简洁，后续扩展过滤条件只需要修改事件源函数内的过滤规则即可

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