filter fullCalendar (v5) events to be displayed based on view

user_678951 0
Viewed 4651

In dayGridMonth I want to see a subset of the events, and in listMonth I want to see all of them.
E.g. in the grid view I don't want to see events with title break (in my actual case it is a more complex rule: only show unique event titles).

I tried:

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

This does hide them, but when switching from dayGridMonth to listMonth the hidden events don't come back. I don't mind storing + restoring the original display value, but the events don't appear at all any more in eventDidMount after switching views.

How do I "set the property display:none" only for that view?

fullcalendar-5 fullcalendar
2 Answers

Thanks to @ADyson for the useful suggestion: hide using CSS.
Even better, with the use of eventClassNames it is super straightforward, the classes "reset" for each render.

What I ended up with:

...
.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
  }
...
}

One issue: after the hidden events, the next one has a margin-top: 18px resulting in a gap:

<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>

enter image description here

user_6789510

Try adding an else to reset the event's display property on other views:

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