如何动态地添加/删除eventSources

问题描述：

不幸的是FullCalendar网站上的这个文档有点稀疏。如何动态地添加/删除eventSources

我有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”参数）

经过大量玩弄我第一次该系统删除事件，问题是让他们回来，我终于让他们回来了，但他们回到了标准的蓝色，而不是颜色分配。有没有人有任何想法？ – Mych 2012-03-14 08:59:20

好让我们试试和皮肤一个猫的另一种方式...我可以加载所有事件，然后根据复选框的值隐藏或显示这些特定事件的div吗？我会寻找什么div？我认为他们会有相同的div但具有不同的风格属性。 – Mych 2012-03-14 13:13:32

答

虽然不是完美的解决方案，我有设法实现这个使用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使用绝对定位，他们留下了一个缺口，所以解决方案并不完美。仍然在寻找理想 - 去除属于某个来源的所有事件（可以这样做） - 带回事件（也可以做，但它们会以标准蓝色返回并且不会根据需要着色

如何动态地添加/删除eventSources

相关推荐