虽然我是一名经验丰富的程序员，但我不能说我是一名 JavaScript 专家，而且我也刚刚开始尝试掌握 FullCalendar 的来龙去脉。因此，对于尚未掌握所有方面，尚未在文档中找到所有内容并且并不总是使用正确的术语，我提前道歉。
在我的特殊情况下，事件是从 JSON 提要加载的。使用复选框，我想显示和/或隐藏基于它们的事件extendedProps.type。为了防止不必要的服务器往返，我更喜欢一次加载所有类型的事件并向事件元素添加/删除类，允许我使用 CSS 以可维护的方式显示或隐藏它们。事实证明这比我预期的要难。
第一个挑战是向工具栏添加复选框。不幸的是，FullCalendar 似乎没有一种简单、标准的方式来向工具栏添加额外的行。<button>同样，除了常规类型的交互元素之外，似乎没有其他方法可以添加。因此，我最终使用<template>标签向工具栏添加了一个额外的元素并进行了一些额外的flexbox调整。
困难的部分是事件的显示和隐藏。重要的是要知道我的意图是使初始可见性状态可配置。我最初的想法是添加一个invisible类并使用display: none. 添加类的明显位置似乎是eventDidMount钩子。起初这似乎有效；在初始渲染之后，一些事件是可见的，而有些则不是。然而，当试图展示不可见的事件时，似乎什么也没有发生。visibility: invisible问题分析表明，当事件元素设置为 时，FullCalendar给事件的父元素添加了display: none。
不是这些问题的专家，我的解决方案是display: none将visibility: invisible. 现在，最初不可见的事件在切换其可见性时会显示出来，但还有另一个问题：不可见的事件确实占用了空间。因此，月视图显示具有大量空白空间的日单元格，而列表视图显示没有数据的行。
我能想到的第一件事是某种事件后渲染钩子，我可以在其中添加 adisplay: none到不可见元素。在搜索文档和 stackoverflow 问题后，我得出结论，它们不是这样的。乍一看，一些 stackoverflow 主题似乎提供了一个解决方案，但后来证明使用了不再支持的遗留方法或钩子。
我能想到的第二件事是计算挂载事件的数量，将它们与加载事件的数量进行比较，一旦挂载了所有事件，假设已经为事件分配了空间，为不可见事件添加一个额外的类，允许我display: none在我的样式表中设置一个。至少可以说，这是一个非常hacky的结构。让它更加骇人听闻的是，我找不到一种简单的方法来掌握加载的事件数量。所以我最终得到了丑陋的东西，在钩子中将计数器重置为零，并在loading钩子中添加加载事件的数量eventSourceSuccess。也许初始重置不是必需的，但我不确定eventSourceSuccess钩子被触发了多少次。
不幸的是，这也没有解决问题。显然，“挂载”并不意味着“添加到 DOM 并分配空间”。至少不是我期望的那样，它visibility: invisible仍然显示在事件的父元素上:(
走到这一步我花了很多时间，失望和沮丧的结合，我仍然没有足够的解决方案。缺少某种“在所有事件呈现之后”钩子感觉就像一个真正的缺点，以及一种简单的方法来获取加载的事件总数。更多用于自定义工具栏的句柄也将是一个很大的改进。
我被困住了。这很可能是因为我错过或误解了文档和 stackoverflow 中的内容。希望有人可以帮助我，并为我遇到的部分或全部问题指出正确的方向。
提前致谢。