Есть ли способ переключить видимость событий на основе классаName FullCalendar

Question

Мне было интересно, был ли способ использования полного календаря для отображения/скрытия элементов на основе классаName этого события.

Точная ситуация у меня есть флажок (скажем #daytimeEvent), и я хотел бы, чтобы переключить видимость события Хтат имеет класс дневное время в массиве ....

Я попытался это, но до сих пор это, кажется, полностью удалить события из календаря без возможности получить их обратно после того, как ....

Вот мой текущий код:

$('#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) 
     }); 
    } 
} 

Я подполз Google и кажется, что я m не единственный человек с этой проблемой, но я не мог найти решение.

Answer 1

Я нашел решение (спасибо @smcd за ссылку). Хороший способ сделать это в методе eventRender вашего календаря. Я положил мою логику там, а затем сделал это:

$('#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; 
     } 
}); 

Затем вещи нужно сделать, это просто использовать метод rerenderEvents в прослушивателя событий, как это ниже.

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

Вы не можете скрывать и показывать событие по требованию, но вы можете сделать рендер достаточно гибким и быстрым.

Answer 2

Одна ошибка у вас есть то, как вы проверяете для класса существования:

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

Там нет строки .daytime внутри className, вы должны проверить daytime вместо (без .):

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