如何在 Fullcalendar.io 的新 v5 中过滤事件答案

【问题标题】：How to filter events in the new v5 of Fullcalendar.io如何在 Fullcalendar.io 的新 v5 中过滤事件
【发布时间】：2020-06-11 10:01:41
【问题描述】：

版本 4 具有 eventRender 并且很容易渲染或不是事件，因为您所要做的就是 was return null

在版本 5（目前为 beta 4）中，该事件已替换为 eventContent 和 eventClassNames，但我正在努力复制相同的想法，因此我可以轻松地在 时间线视图

from the upgrade guide 它说：

eventContent - 如果你通过 eventRender 注入 DOM 内容。 您不能通过返回 false 来取消渲染。相反，在事件输入上附加了display:'none' 属性。

但如果在那个事件中我这样做了，它仍然会显示该事件：

eventContent: (arg) => {
   arg.event.display = 'none'
}

我错过了什么？我们应该返回/设置什么以使事件不再显示？

我也试过

eventContent: (arg) => {
   return { display: 'none' }
}

但它所做的只是隐藏事件本身的内容，不删除事件，我最终得到了事件“框架”

【问题讨论】：

你到底想做什么？当然，如果您想过滤事件，从日历中添加/删除事件本身是有意义的，而不是仅仅阻止它们被显示？
@ADyson 因为有很多可见的事件，我只想在一个按钮上切换（显示/隐藏）相关事件...我不想继续从源获取事件，因为我已经拥有了所有这些...顺便说一句，GitHub Issue 已针对我的问题打开了

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

虽然here 讨论了一种可能的解决方案，但您也可以利用新的eventClassNames 方法：

eventClassNames(args) {
   return args.extendedProps.visible ? "" : "event-hidden";
}

然后定义一个 CSS 规则

.event-hidden {
  display: none;
}

【讨论】：

【解决方案2】：

Upgrade guide 现在提到：

eventContent - 如果你通过 eventRender 注入 DOM 内容。你但是不能通过返回 false 来取消渲染。相反，请确保您的事件对象之前的显示属性设置为“无” eventContent 执行。您可以通过设置动态地执行此操作 event.setProp('display', 'none').

所以两部分：

使用event.setProp('display','none') 设置属性，
event.display = none 将不起作用
这需要在eventContent 之前完成，例如eventDidMount

eventDidMount: function(info) {
  if (...) {
    info.event.setProp('display','none')
  }
}

【讨论】：

【解决方案3】：

您也可以使用新的batchRendering 函数来执行此操作，例如。

vm.rerenderEvents = ->
    vm.calendar.batchRendering ->
      vm.calendar
        .getEvents()
        .forEach (event) ->
          visible = checkFilters event

          if not visible
            event.setProp 'display', 'none'
          else
            event.setProp 'display', 'auto'

          return
        return
      return

【讨论】：

【解决方案4】：

我有同样的问题。我可以通过更改“显示”属性来隐藏事件本身（框）。

eventContent: function(info) {
  var event = info.event;
  event.setProp('display', 'none');
},

【讨论】：