如何动态添加/删除eventSources

Question

不幸的是，FullCalendar网站上的文档有点稀疏。

我有3个事件源，我想使用一系列的3个复选框，当选中时将显示该事件源，当未选中时将隐藏它。

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

我使用的是FullCalendar 1.5.3，根据文件

自1.5版本以来，源参数变得相当宽松。您可以提供事件源的数组/URL/函数，也可以指定完整的事件源对象。

我是否仍然在主fullCalendar设置中指定我的EventSources，然后使用上述方法？如果是这种情况，在我的情况下source是什么？

以下是我的活动来源：

 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的隐藏/显示实现了这一点。

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种类型的事件中的每一种。不幸的是，由于div使用绝对定位，它们留下了一个间隙，因此解决方案并不完美。仍在寻找理想的-删除属于源的所有事件（可以做）-带回事件（也可以做，但它们以标准蓝色返回，而不是按要求着色。