3

在dayGridMonth我想看到事件的一个子集，在listMonth我想看到所有这些。
例如，在网格视图中，我不想看到带有标题的事件break（在我的实际情况下，这是一个更复杂的规则：只显示唯一的事件标题）。

我试过了：

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

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

如何仅为该视图“设置属性显示：无”？

4

2 回答 2

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>

在此处输入图像描述

于 2020-07-08T13:45:36.530 回答
0

尝试添加一个else以在其他视图上重置事件的显示属性：

eventDidMount: function(info) {
  if (info.view.type == 'dayGridMonth' && info.event.title == 'break') {
    info.event.setProp('display','none')
  }
  else info.event.setProp('display', 'auto');
}
于 2020-07-07T23:17:40.513 回答