如何动态添加/删除事件源

Question

不幸的是，FullCalendar 网站上的相关文档有点少。

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

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

我正在使用根据文档的 FullCalendar 1.5.3

从 1.5 版本开始，source 参数变得相当宽松。您可以提供事件源的 Array/URL/Function，也可以指定完整的事件源对象。

我是否仍然在主 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 使用绝对定位，它们留下了一个空白，所以解决方案并不完美。仍在寻找理想 - 删除属于源的所有事件（可以做） - 带回事件（也可以做，但它们以标准蓝色返回，而不是按要求着色。