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

Question

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

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

Метод addEventSource - .fullCalendar( 'addEventSource', source ) Метод removeEventSource - .fullCalendar( 'removeEventSource', source )

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

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

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