是否有一种方法来切换基于className FullCalendar的事件可见性

Question

我想知道是否有一种方法使用完整日历显示/隐藏基于该事件的className元素。

确切的情况是，我有一个复选框(让我们说#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)
      });
   }
}

我已经爬上谷歌，似乎我不是唯一一个有这个问题的人，但我找不到任何解决方案。

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)

在className里面没有字符串.daytime，你应该检查daytime代替(没有.):

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

Answer 3

我认为接受的答案有点老了，所以，解决这个问题的新方法是使用batchRendering