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

Question

版本 4 有 eventRender 并且很容易呈现或不是事件，因为你必须做的就是 was return null

在版本 5（目前为 beta 4）中，该事件已被 eventContent 和 eventClassNames 取代，但我正在努力复制相同的想法，因此我可以轻松地使用和显示资源时间轴视图中没有事件

eventContent - for if you injected DOM content via eventRender. You cannot cancel rendering by returning false however. Instead, attached a display:'none' property on the Event Input.

但如果在那种情况下我这样做，它仍然会显示事件：

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

我错过了什么？我们应该如何 return/setup 让事件不再显示？

我也试过了

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

但它所做的只是隐藏事件本身的内容，并没有删除事件，我最终得到了事件 "frame"

Answer 1

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

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

然后定义一个CSS规则

.event-hidden {
  display: none;
}

Answer 2

Upgrade guide 现在提到：

eventContent - for if you injected DOM content via eventRender. You cannot cancel rendering by returning false however. Instead, make sure your event object has its display property set to 'none' before eventContent executes. You can do this dynamically by setting event.setProp('display', 'none').

所以分为两部分：

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

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

Answer 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

Answer 4

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

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

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

How to filter events in the new v5 of Fullcalendar.io

javascript

fullcalendar

fullcalendar-5