javascript - Is there a way to toggle events visibility based on className FullCalendar - Stack Overflow

admin管理员组

文章数量:1404774

I was wondering if there was a way using Full Calendar to show/hide elements based on the className of that event.

The exact situation is I have a checkbox (let's say #daytimeEvent) and I'd like to toggle the visibility of event htat has class daytime in the array....

I tried this so far but it seems to pletely remove the events from the calendar without the possibility to get them back after....

Here is my current code:

$('#daytimeEvent').on('change', function(){
  if ($(this).is(':checked'))
    {
      // That part doesn't work
      calendar.fullCalendar('renderEvent');  
    }
   else
   {
      // This seems to destroy the event without having the opportunity to toggle the visibility back after
      calendar.fullCalendar('removeEvents', function(event){
         return $.inArray('daytime', event.className)
      });
   }
}

I've crawled google and it seems like I'm not the only person with this problem but I couldn't find any solution.

I was wondering if there was a way using Full Calendar to show/hide elements based on the className of that event.

The exact situation is I have a checkbox (let's say #daytimeEvent) and I'd like to toggle the visibility of event htat has class daytime in the array....

I tried this so far but it seems to pletely remove the events from the calendar without the possibility to get them back after....

Here is my current code:

$('#daytimeEvent').on('change', function(){
  if ($(this).is(':checked'))
    {
      // That part doesn't work
      calendar.fullCalendar('renderEvent');  
    }
   else
   {
      // This seems to destroy the event without having the opportunity to toggle the visibility back after
      calendar.fullCalendar('removeEvents', function(event){
         return $.inArray('daytime', event.className)
      });
   }
}

I've crawled google and it seems like I'm not the only person with this problem but I couldn't find any solution.

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited Oct 26, 2016 at 18:24 Yann Chabot asked Oct 26, 2016 at 14:51 Yann ChabotYann Chabot 4,88933 gold badges4343 silver badges5858 bronze badges 1

• 1 There are a few answers on stackoverflow stackoverflow./a/36851477/5360631, stackoverflow./a/33635079/5360631 that use checkboxes for filtering. They don't use the class names but should be easily adaptable to do so – smcd Commented Oct 26, 2016 at 21:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I found a solution (thanks to @smcd for the reference). The good way to do this is in the eventRender method of your calendar. I put my logic in there and then did this:

$('#myCalendar').fullCalendar({
     // your init [...] then
     eventRender: function(event, element) {
            // Array that will store accepted classes
            var eventAcceptedClasses = [];
            if ($('.daytime-events-checkbox').is(':checked')){
                eventAcceptedClasses.push('daytime-events');
            }
            if ($('.nighttime-events-checkbox').is(':checked')){
                eventAcceptedClasses.push('nighttime-events');
            }
            displayEvent = false;
            event.className.forEach(function(element){
                if ($.inArray(element, eventAcceptedClasses) != -1){
                    displayEvent = true;
                }
            });
            return displayEvent;
        }
});

Then, the things to do is just to use the rerenderEvents method in your event listener like this below.

$('.events-filter-checkbox').on('change', function(){
    calendar.fullCalendar('rerenderEvents');
});

You cannot hide and show event on demande, but you can rerender which is quite flexible and fast.

One mistake you have is how you're checking for the class existence:

$.inArray('.daytime', event.className)

There is no string .daytime inside the className, you should check for daytime instead (without the .):

$.inArray('daytime', event.className)

I think the accepted answers are a bit old so, the new approach to solve this issue, is using batchRendering

本文标签： javascriptIs there a way to toggle events visibility based on className FullCalendarStack Overflow