如何在 Fullcalendar.io 的新 v5 中過濾事件

Question

版本 4具有eventRender並且很容易渲染或不是事件，因為您所要做的就是返回null

使用版本 5（當前為 beta 4），該事件被替換為eventContent和eventClassNames但我正在努力復制相同的想法，因此我可以輕松地在時間線視圖中顯示有和沒有事件的資源

從升級指南中說：

eventContent - 如果您通過 eventRender 注入 DOM 內容。 但是，您不能通過返回 false 來取消渲染。 相反，在事件輸入上附加了一個display:'none'屬性。

但如果在那種情況下我這樣做，它仍然會顯示該事件：

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

我錯過了什么？ 我們應該返回/設置什么以便不再顯示事件？

---

我也試過

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

但它所做的只是隱藏事件本身的內容，不刪除事件，我最終得到了事件“框架”

Answer 1

雖然這里討論了一種可能的解決方案，但您也可以利用新的eventClassNames方法：

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

然后定義一個 CSS 規則

.event-hidden {
  display: none;
}

Answer 2

升級指南現在提到：

eventContent - 如果您通過 eventRender 注入 DOM 內容。 但是，您不能通過返回 false 來取消渲染。 相反，請確保您的事件 object 在 eventContent 執行之前將其顯示屬性設置為“無”。 您可以通過設置 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');
},