如何動態地添加/刪除eventSources

Question

不幸的是FullCalendar網站上的這個文檔有點稀疏。

我有3個eventSources，我想使用一系列3個複選框，當選中時將顯示該eventSource，而未選中時將隱藏它。

爲addEventSource的方法是.fullCalendar('addEventSource', source) 爲removeEventSource的方法是.fullCalendar('removeEventSource', source)

我使用了根據文檔

由於1.5版本中，源參數已變得相當FullCalendar 1.5.3輕鬆。您可以提供事件源的Array/URL/Function，或者您可以指定完整的事件源對象。

我仍然主要fullCalendar建立內指定我EventSources，然後用上面的方法，如果是這樣的話是什麼在我的情況source？

下面是我eventSources：

eventSources: [    //sets up where we will get the data for claims (fullCalendar refers to them as events) 
       { 
       url: '../Users/json-events.aspx', //file which generates a json feed 
       type: 'GET', 
       allDay: false, 
       editable: false, 
       data: {     //extra params that will signify which sql script to use 
        e: 'tsb',   //gets tsb claims  
        c: ccview,   //for this cost centre 
        t: tview,   //for this team 
        p: pid    //for this pid 
       }, 
       error: function() { 
        alert('There was an error while fetching TSB claims'); 
       }, 
       color: '#a6b28c',  //background color of block 
       textColor: 'black'  //text colour of block 
      }, 
       { 
        url: '../Users/json-events.aspx', 
        type: 'GET', 
        allDay: false, 
        editable: false, 
        data: { 
         e: 'co',   //get call out claims 
         c: ccview,   //for this cost centre 
         t: tview,   //for this team 
         p: pid    //for this pid 
        }, 
        error: function() { 
         alert('There was an error while fetching Call-Out claims'); 
        }, 
        color: '#ea9473', 
        textColor: 'black' 
       }, 
       { 
        url: '../Users/json-events.aspx', 
        type: 'GET', 
        allDay: false, 
        editable: false, 
        data: { 
         e: 'ot',   //get overtime claims 
         c: ccview,   //for this cost centre 
         t: tview,   //for this team 
         p: pid    //for this pid 
        }, 
        error: function() { 
         alert('There was an error while fetching Overtime claims'); 
        }, 
        color: '#a8bac8', 
        textColor: 'black' 
       } 
      ], 

正如你可以看到我使用的是相同的URL（差異將是「E」參數）

Answer 1

雖然不是完美的解決方案，我有設法實現這個使用div/show的顯示。

function TSBToggle() {   
     if ($("#chb_TSB").is(':checked')) { 
      $('div').filter(function() { 
       var match = '#a6b28c'; //match background colour for TSB 
       /* true will keep this div in our wrapped set 
       false will exclude div from wrapped set */ 
       return ($(this).css('background-color') == match); 
      }).show(); // shows all div that were matched 
     } else { 
      $('div').filter(function() { 
       var match = '#a6b28c'; //match background colour for TSB 
       /* true will keep this div in our wrapped set 
       false will exclude div from wrapped set */ 
       return ($(this).css('background-color') == match); 
      }).hide(); // hides all div that were matched 
     } 
    } 

    function COToggle() {   
     if ($("#chb_CO").is(':checked')) { 
      $('div').filter(function() { 
       var match = '#ea9473'; 
       return ($(this).css('background-color') == match); 
      }).show(); 
     } else { 
      $('div').filter(function() { 
       var match = '#ea9473'; 
       return ($(this).css('background-color') == match); 
      }).hide(); 
     } 
    } 

    function OTToggle() { 
     if ($("#chb_OT").is(':checked')) { 
      $('div').filter(function() { 
       var match = '#a8bac8'; 
      }).show(); 
     } else { 
      $('div').filter(function() { 
       var match = '#a8bac8'; 
       return ($(this).css('background-color') == match); 
      }).hide(); 
     } 
    } 

這將隱藏/顯示我有3種類型的事件。不幸的是，因爲divs使用絕對定位，他們留下了一個缺口，所以解決方案並不完美。仍然在尋找理想 - 去除屬於某個來源的所有事件（可以這樣做） - 帶回事件（也可以做，但它們會以標準藍色返回並且不會根據需要着色