有沒有辦法切換基於className的事件可視性FullCalendar

我想知道是否有一種方法使用完全日曆來顯示/隱藏基於該事件的className的元素。有沒有辦法切換基於className的事件可視性FullCalendar

確切的情況是我有一個複選框（假設#daytimeEvent），我想切換事件htat有數組類白天的能見度....

我嘗試這樣做，但迄今爲止它似乎完全刪除從日曆事件沒有可能讓他們回來後....

這裏是我當前的代碼：

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

我爬谷歌和它看起來像我我不是唯一有這個問題的人，但我找不到任何人解決方案。你有

來源

2016-10-26 Yann Chabot

有幾個答案在stackoverflow http://stackoverflow.com/a/36851477/5360631，http://stackoverflow.com/a/33635079/5360631使用複選框進行過濾。他們不使用類名稱，但應該很容易地適應這樣做 – smcd

我找到了一個解決方案（感謝@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'); 
});

你不能在demade上隱藏和顯示事件，但你可以重新渲染，這是相當靈活和快速的。

來源

2016-10-27 15:54:30

錯誤之一是，你是如何檢查的類存在：

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

沒有串.daytime的className裏面，你應該檢查daytime代替（不.）：

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

來源

2016-10-26 14:59:33 nem035

這將是更好的，並將爲刪除工作，但沒有辦法切換他們重新出現後... –

你可以有一個數組的地方在刪除它之前將保存這些數據的外部環境中，然後在需要時將其恢復。 – nem035

我想了解這一點，但我不確定它會正確重繪。此外，我還有其他一些複選框，所以我認爲這不是最好的主意，但我可能不得不如果我找不到其他答案... –

有沒有辦法切換基於className的事件可視性FullCalendar

回答

相關問題