如何在FullCalendar中使用CSS显示和/或隐藏事件？

如何解决如何在FullCalendar中使用CSS显示和/或隐藏事件？

尽管我是一位经验丰富的程序员，但我不能说我是JavaScript专家，并且也刚开始尝试了解FullCalendar的来龙去脉。因此，我为尚未掌握所有方面，尚未在文档中找到所有内容以及未始终使用正确的术语而事先表示歉意。

在我特定的情况下，事件是从JSON feed中加载的。使用复选框，我想基于事件extendedProps.type显示和/或隐藏事件。为了防止不必要的往返服务器往返，我更喜欢一次加载所有类型的事件，并向事件元素中添加类/从事件元素中删除类，从而允许我使用CSS以可维护的方式显示或隐藏它们。事实证明，这比我预期的要难。

第一个挑战是将复选框添加到工具栏。不幸的是，FullCalendar似乎没有简单，标准的方法向工具栏添加其他行。同样，除了常规的<button>类型的交互元素外，似乎没有其他方法可以添加。因此，我最终使用了<template>标签向工具栏添加了一个额外的元素，并进行了一些其他的flexbox调整。

最困难的部分是事件的显示和隐藏。重要的是要知道我的意图是使初始可见性状态可配置。我最初的想法是添加一个invisible类，并使用display: none对其进行样式设置。添加类的显而易见的地方似乎是eventDidMount钩子。起初这似乎起作用。初始渲染后，一些事件可见，而有些则不可见。但是，当试图显示不可见的事件时，似乎什么也没有发生。问题分析表明，当事件元素设置为visibility: invisible时，FullCalendar将display: none添加到事件的父元素。

我不是解决这些问题的专家，而是将display: none更改为visibility: invisible。现在，最初的不可见事件会在切换可见性时出现，但是还有另一个问题：不可见事件确实会占用空间。因此，月份视图显示的日间单元格有很多空白，列表视图显示的行没有数据。

我首先想到的是某种事后渲染钩子，其中可以在不可见元素中添加display: none。在搜索了文档和stackoverflow问题之后，我得出结论认为这不是问题。某些stackoverflow主题似乎乍看之下提供了一种解决方案，但后来证明是利用不再受支持的旧方法或挂钩。

我想到的第二件事是计算已装入事件的数量，将它们与已装入事件的数量进行比较，并在装入所有事件后，假设已经为事件分配了空间，请为不可见的对象添加一个附加类事件，允许我在样式表中设置display: none。至少可以说，这是一个非常笨拙的构造。使它变得更加骇人听闻的是，我找不到一种简单的方法来掌握加载的事件数。因此，我最终遇到了丑陋的事情，在loading挂钩中将计数器重置为零，并在eventSourceSuccess挂钩中添加了已加载事件的数量。也许没有必要进行初始重置，但是我不确定eventSourceSuccess挂钩被触发了多少次。

不幸的是，这也没有解决问题。显然，“挂载”并不意味着“添加到DOM和分配的空间”。至少不是我所期望的那样，visibility: invisible仍显示在事件的父元素中：（

走到这一步花了我很多时间，失望和沮丧相结合，我仍然没有适当的解决方案。缺少某种“毕竟发生的事件”挂钩似乎是一个真正的缺陷，也是一种获取加载的事件总数的简单方法。更多自定义工具栏的手柄也将是一个很大的改进。

我被困住了。那很可能是因为我错过或误解了文档中和stackoverflow上的东西。希望有人能帮助我，并为我遇到的部分或全部问题指明正确的方向。

谢谢。

解决方法

我意识到我完全错误地接受了显示/隐藏挑战。尝试使用CSS来实现它不是正确的方法。例如，考虑到多日活动可能引起的复杂性，也许我应该从一开始就意识到这一点。

经过更多的挖掘和搜索，我发现了如何使用事件源来完成它。最有用的是Andy提出的建议解决方案，它回答了另一个stackoverflow问题：Is it possible to Remove EventSources and add them back dynamically based on View Name?。通过简单地将不同的事件源用于不同的事件类型，并根据请求添加和删除它们，实际上很容易切换事件类型的可见性。唯一的缺点似乎是需要多个API请求，每个事件源一个。也许对此解决方案也隐藏在我喜欢听到的地方。