如何在FullCalendar V5中基于多复选框及多扩展属性过滤事件

要同时基于cid（内容类型）和sid（平台）两个扩展属性实现事件复选框过滤，可按以下步骤修改代码：

1. 优化HTML复选框 #

为复选框添加data-prop属性，明确每个选项对应事件的哪个扩展属性，便于后续逻辑区分：

<input class="cs" value="Movie" type="checkbox" checked data-prop="cid">Movie
<input class="cs" value="Series" type="checkbox" checked data-prop="cid">Series
<input class="cs" value="Netflix" type="checkbox" checked data-prop="sid">Netflix
<input class="cs" value="Disney" type="checkbox" checked data-prop="sid">Disney

2. 事件数据示例 #

[
  { 
    id: "1", 
    title: "event1", 
    start: "2020-07-01 19:30", 
    end: "2020-07-02 19:30", 
    backgroundColor: "#39CCCC", 
    cid: "Movie", 
    sid: "Netflix" 
  }, 
  { 
    id: "2", 
    title: "event2", 
    start: "2020-07-09 19:30", 
    end: "2020-07-10 19:30", 
    backgroundColor: "#F012BE", 
    cid: "Series", 
    sid: "Disney" 
  }
]

3. 修改FullCalendar过滤逻辑 #

以下代码实现**“或逻辑”**：事件的cid或sid对应复选框被选中时，事件即显示；若所有复选框未选中，则隐藏所有事件。

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  // 基础日历配置（如header、views等）
  events: [
    // 插入你的事件数据
    { id: "1", title: "event1", start: "2020-07-01 19:30", end: "2020-07-02 19:30", backgroundColor: "#39CCCC", cid: "Movie", sid: "Netflix" },
    { id: "2", title: "event2", start: "2020-07-09 19:30", end: "2020-07-10 19:30", backgroundColor: "#F012BE", cid: "Series", sid: "Disney" }
  ],
  eventDidMount: function(arg) {
    // 收集选中的过滤条件
    const checkedCids = [];
    const checkedSids = [];
    document.querySelectorAll(".cs:checked").forEach(checkbox => {
      const prop = checkbox.dataset.prop;
      const value = checkbox.value;
      prop === "cid" ? checkedCids.push(value) : checkedSids.push(value);
    });

    // 判断事件是否符合显示规则
    let shouldShow = false;
    if (checkedCids.includes(arg.event.extendedProps.cid) || checkedSids.includes(arg.event.extendedProps.sid)) {
      shouldShow = true;
    }
    // 无选中条件时默认隐藏所有事件（可根据需求删除此判断）
    if (checkedCids.length === 0 && checkedSids.length === 0) {
      shouldShow = false;
    }

    arg.el.style.display = shouldShow ? "block" : "none";
  }
});

calendar.render();

// 监听复选框变化，触发事件重新渲染
document.querySelectorAll(".cs").forEach(el => {
  el.addEventListener("change", () => calendar.refetchEvents());
});

切换为“与逻辑” #

若需要事件的cid和sid对应复选框同时被选中才显示，只需修改shouldShow的判断条件：

let shouldShow = false;
// 仅当cid和sid都匹配选中条件时显示
if (checkedCids.includes(arg.event.extendedProps.cid) && checkedSids.includes(arg.event.extendedProps.sid)) {
  shouldShow = true;
}

核心逻辑说明 #

• 先按属性分组收集所有选中的过滤值，避免遍历复选框时重复判断事件状态；
• 根据业务需求（或/与逻辑）判断事件是否符合显示条件；
• 复选框状态变更时，调用refetchEvents()触发eventDidMount，重新执行过滤逻辑。

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