fullcalendar - 根据 View 过滤要显示的 fullCalendar (v5) 事件

Question

在 dayGridMonth 中，我想查看事件的子集，在 listMonth 中，我想查看所有事件。
例如。在 GridView 中，我不想看到标题为 break 的事件(在我的实际情况中，这是一个更复杂的规则:只显示唯一的事件标题)。

我试过:

eventDidMount: function(info) {
  if (info.view.type == 'dayGridMonth' && info.event.title == 'break') {
    info.event.setProp('display','none')
  }
}

这确实隐藏了它们，但是当从 dayGridMonth 切换到 listMonth 时，隐藏的事件不会返回。我不介意存储 + 恢复原始 display 值，但在切换 View 后，事件不再出现在 eventDidMount 中。

如何仅为该 View “设置属性 display:none”？

Answer 1

感谢@ADyson 的有用建议:使用CSS隐藏。
更好的是，使用 eventClassNames 非常简单，每次渲染时“重置”类。

我最终得到的结果:

...
.fc-event.hidden {
  display: none;
}

let calendar = new Calendar(calendarEl, {
...
  eventClassNames: function(info) {
    var classes = []
    if (info.view.type == 'dayGridMonth' && info.event.title == 'break') {
      classes.push('hidden')
    } 
    // other rules for classes
    return classes
  }
...
}

一个问题:在隐藏事件之后，下一个有一个 margin-top: 18px 导致一个间隙:

<div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs" style="visibility: hidden;">
  <a class="fc-daygrid-event fc-daygrid-dot-event fc-event fc-event-start fc-event-end fc-event-past city hidden" href="xyz" style="color: black;">
    <div class="fc-daygrid-event-dot" style="..."></div>
    <div class="fc-event-title">break</div>
  </a>
</div>

<div class="fc-daygrid-event-harness" style="margin-top: 18px;">
  <a class="fc-daygrid-event fc-daygrid-dot-event fc-event fc-event-start fc-event-end fc-event-past" href="http://xyz" style="color: black;">
    <div class="fc-daygrid-event-dot" style="..."></div>
    <div class="fc-event-title">1st event after hidden events</div>
  </a>
</div>