Question

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

我有3个eventSources，我想使用一系列3个复选框，当选中时会显示该eventSource，当取消选中时会隐藏它。

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

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

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

我是否仍然在主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'
                }
            ],

正如您所看到的，我使用的是相同的网址（不同之处在于'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使用绝对定位，所以他们留下了一个空白，因此解决方案并不完美。仍在寻找理想 - 删除属于某个来源的所有事件（可以做） - 带回事件（也可以做，但它们以标准蓝色返回，而不是根据需要着色。

如何动态添加/删除eventSources

1 个答案: