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"

what are you actually trying to do? Surely if you want to filter events it would make sense to add/remove the events themselves from the calendar, rather than just prevent them being displayed? — ADyson, Jun 21 '20 at 23:25
@ADyson as there's a lot of events visible, I simply want to, upon a button, toggle (show/hide) only relevant events... I do not want to keep fetching events from the source, as I already have them all... BTW, a [GitHub Issue](https://github.com/fullcalendar/fullcalendar/issues/5515) was opened about my question — balexandre, Jun 22 '20 at 00:33

score 3 · Accepted Answer · answered Jul 04 '20 at 00:10

3

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

answered Jul 04 '20 at 00:10

Marco Ancona

2,073
3
22
37

score 0 · Answer 2 · answered Jul 07 '20 at 18:19

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 e.g. eventDidMount

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

score 0 · Answer 3 · edited Jul 08 '20 at 17:49

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

score 0 · Answer 4 · answered Jul 23 '20 at 23:48

0

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');
},

answered Jul 23 '20 at 23:48

sama55

1

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

4 Answers4