CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-5
balexandre
balexandre

Reputation: 75073

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

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

enter image description here

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"

enter image description here

Upvotes: 2

Views: 8630

Answers (4)

sama55
sama55

Reputation: 1

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

Upvotes: 0

Nathan Bolam
Nathan Bolam

Reputation: 1

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

Upvotes: 0

wivku
wivku

Reputation: 2643

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

Upvotes: 0

Marco Ancona
Marco Ancona

Reputation: 2163

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

Upvotes: 3

Related Questions