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

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

我根据那个答案做了一支笔，但不起作用。。。能帮我个忙吗

---

谢谢

您的演示与其他问题的关键区别在于

calendar.refetchEvents（）

导致从动态（服务器端）事件源重新获取事件，然后触发

eventDidMount

。但您使用的是静态数据源，因此refetchEvents会查看该数据源，并决定不需要再进行任何修改，因为数据是静态的，它不知道在哪里查找新事件。因此，它保持事件的原样，并且不会触发

eventDidMount

，这意味着决定显示/隐藏事件的代码永远不会运行

但是，您可以通过使用该功能并在“success”回调中返回静态数组来模拟动态数据源。这会愚弄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"
    }
  ]);
},

演示：

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"
    }
  ]);
},