Fullcalendar v5 如何使用复选框显示和隐藏事件答案

【问题标题】：Fullcalendar v5 how to show and hide events with checkboxFullcalendar v5 如何使用复选框显示和隐藏事件
【发布时间】：2020-10-04 18:29:38
【问题描述】：

我正在尝试使用复选框显示和隐藏事件，我在堆栈上看到另一个问题并尝试实现此处解释的相同配置： https://stackoverflow.com/a/62865578/5376930

我根据那个答案做了一支笔，但没有用...请帮帮我吗？

codepen demo

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  now: '2020-07-11',
  scrollTime: '00:00',
  aspectRatio: 1.8,
  headerToolbar: {
    left: 'today prev,next',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
  },
  initialView: 'dayGridMonth',
events: 
  [{"id":"1","title":"event1","start":"2020-07-01 19:30","end":"2020-07-02 19:30","backgroundColor":"#39CCCC","cid":"1"},{"id":"2","title":"event2","start":"2020-07-09 19:30","end":"2020-07-10 19:30","backgroundColor":"#F012BE","cid":"2"}],
eventDidMount: function(arg) {  
var cs = document.querySelectorAll('.cs');
cs.forEach(function(v) {
  if(v.checked){
    if(arg.event.extendedProps.cid === v.value) {
    arg.el.style.display = 'block';
    }
    } else {
    if(arg.event.extendedProps.cid === v.value) {
    arg.el.style.display = 'none';
    }
  }
})
}  
});
calendar.render();

var csx = document.querySelectorAll(".cs")
csx.forEach(function(el) {
    el.addEventListener('change', function() {
        calendar.refetchEvents();
        console.log(el);
})
});
});

谢谢

【问题讨论】：

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

您的演示与其他问题之间的主要区别在于calendar.refetchEvents(); 导致从动态（服务器端）事件源重新获取事件，然后触发eventDidMount。但是您使用了静态数据源，因此 refetchEvents 会查看它并决定没有要重新获取的内容，因为它的数据是静态的并且它不知道在哪里寻找新事件。因此它将事件保持原样，eventDidMount 不会触发，这意味着决定显示/隐藏事件的代码永远不会运行。

但是，您可以使用events-as-a-function 功能模拟动态数据源，并在“成功”回调中返回您的静态数组。这会使 fullCalendar 误以为您的事件数据是动态的，因此每次调用 refetchEvents 时它都会重新绘制事件，从而在此过程中触发 eventDidMount 回调。

像这样：

events: function (fetchInfo, successCallback, failureCallback) {
  successCallback([
    {
      id: "1",
      title: "event1",
      start: "2020-07-01 19:30",
      end: "2020-07-02 19:30",
      backgroundColor: "#39CCCC",
      cid: "1"
    },
    {
      id: "2",
      title: "event2",
      start: "2020-07-09 19:30",
      end: "2020-07-10 19:30",
      backgroundColor: "#F012BE",
      cid: "2"
    }
  ]);
},

演示：https://codepen.io/ADyson82/pen/mdEbyQr

【讨论】：