2011-11-03 81 views
1

我在使用removeEvent方法刪除事件後將事件添加回日曆時遇到問題。使用FullCalendar過濾事件並將它們添加回去

我有一個JSON對象,包含用戶應該看到的所有日曆事件。列表中填充了複選框,以便用戶能夠通過以下代碼按類別顯示和隱藏事件。

var value = $(this).val(); 
$('#calendar').fullCalendar('removeEvents', function(event) { 
return event.subscription == value; 
}); 

我想顯示/渲染用戶選擇隱藏,當他們再選中相應的框無需重新加載整個頁面和JSON源,但保持是未經檢查,去除其他事件的事件。

有沒有辦法通過使用我用來刪除事件的相同數據來做到這一點?
即。 return event.subscription == value;

回答

2

這是我用於我的應用程序的實現。我做了一個自定義的EventManager對象,它保存了我所有事件的Master數組。另外,我告訴fullCalendar要在日曆中加載哪些事件子集(使用'addEventSource'和'removeEventSource'方法)。

希望這有助於! :-)

EventManager = (function(){ 

    var rootEventSource = []; 
    var filteredEventSource = []; 

    return { 
     // Usage: EventManager.setSource([pass,event,array,here]); 
     setRootSource : function(events){ 
      rootEventSource = events; 
     }, 

     filterCalendar : function(filterFN){ 

      $("#calendar").fullCalendar('removeEventSource',filteredEventSource); 

      filteredEventSource = $.map(rootEventSource, function(event){ 
       filterFN(event); 
      }); 

      $("#calendar").fullCalendar('addEventSource', filteredEventSource); 
     } 
    }; 
})(); 

//In your fullcalendar init code: 
$("#calendar").fullCalendar({ 
    // init options 
    // go in here... 
    , events: function(start, end, callback) { 
     //get events from your server, etc... 
     events = some ajax function(start, end)... 

     //store the full set of events in our Event Manager 
     EventManager.setRootSource(events); 
     //pass fullcalendar an empty array 
     callback([]); 
    } 
}); 


//in your check/uncheck handler 
value = $(this).val(); 
EventManager.filterCalendar(function(event) { 
    return event.subscription == value; 
}); 
+0

謝謝,這是一個有趣的替代方式,我正在做的。當我得到一些時間後,我會給它一個鏡頭 –

+1

我用這個編輯版本來完成我所需要的,感謝您的指導!一個注意,代碼中存在問題(希望複製麪食檢查;))確保你用'filterFN(event);'做了一些事情;'如果你想讓jquery的map函數產生任何效果。 –

+0

對此感到高興,差不多2年後:p –

相關問題