Как добавить/удалить eventSources динамически

Question

К сожалению, документация для этого на сайте FullCalendar немного разрежена.

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

Способ addEventSource является .fullCalendar('addEventSource', source) Способ removeEventSource является .fullCalendar('removeEventSource', source)

Я использую FullCalendar 1.5.3, который в соответствии с документацией

Начиная с версии 1.5, параметр источника стала довольно расслаблены. Вы можете указать Array/URL/функцию источника событий или указать полный объект источника события.

ли я еще уточнить мои EventSources в основной fullCalendar настройке, а затем использовать вышеуказанные методы, и если это так, что в моем случае 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 (разница будет в «е» параметр)

Answer 1

Хотя это и не идеальное решение, у меня есть удалось реализовать это с помощью hide/show divs.

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

Это скроет/покажет каждый из трех типов событий, которые у меня есть. К сожалению, поскольку divs используют абсолютное позиционирование, они оставляют пробел, поэтому решение не идеально. Все еще ищете идеальный вариант - удалите все события, принадлежащие источнику (можно сделать), - возвращайте события (также можете делать, но они возвращаются в стандартном синем цвете и не окрашиваются по мере необходимости).