Is there a way to toggle events visibility based on className FullCalendar

fullcalendar, javascript, jquery

Solution

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.

Problem

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 completely 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.

Original source