javascript - How to filter events in the new v5 of Fullcalendar.io - Stack Overflow

admin管理员组

文章数量:1410712

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"

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"

• javascript
• fullcalendar
• fullcalendar-5

Share Improve this question Follow edited Jun 21, 2020 at 23:24 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Jun 11, 2020 at 10:01 balexandrebalexandre 75.2k4747 gold badges238238 silver badges351351 bronze badges 2

• 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 Commented Jun 21, 2020 at 23:25
• 1 @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 was opened about my question – balexandre Commented Jun 22, 2020 at 0:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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;
}

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

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

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

本文标签： javascriptHow to filter events in the new v5 of FullcalendarioStack Overflow