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

Question

version 4 had eventRender and was quite easy to render or not an event as all you had to do was return null

with version 5 (currently on beta 4), that event was replaced with eventContent and eventClassNames but I'm struggling to replicate the same idea, so I can easily show resources with and without events in a timeline view

from the upgrade guide it says:

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.

but if in that event I do that, it still shows the event:

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

what am I missing? What should we return/setup so the event is no longer shown?

---

I've also tried

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

but all it does is hide the content of the event itself, does not remove the event, and I end up having the event "frame"

Answer 1

While a possible solution was discussed here , you can also exploit the new eventClassNames method:

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

then define a CSS rule

.event-hidden {
  display: none;
}

Answer 2

Upgrade guide now mentions:

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').

So two parts:

• setting property is done using event.setProp('display','none') ,
  event.display = none will not work
• this needs to be done before eventContent , so eg eventDidMount

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

Answer 3

You can use the new batchRendering function to do this as well eg.

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

I had same problem. I was able to hide event itself(box) by changing "display" attribute.

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