Question

Unfortunately the documentation for this on the FullCalendar site is a bit sparse.

I have 3 eventSources and I want to use a series of 3 checkboxes that when checked will display that eventSource and when unchecked will hide it.

The method for addEventSource is .fullCalendar( 'addEventSource', source )
The method for removeEventSource is .fullCalendar( 'removeEventSource', source )

I’m using FullCalendar 1.5.3 which according to the documentation

Since version 1.5, the source parameter has become rather relaxed. You can provide an event source’s Array/URL/Function or you can specify the full Event Source Object.

Do I still specify my EventSources within the main fullCalendar set-up and then use the above methods and if that is the case what is source in my case?

Below are my 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'
                }
            ],

As you can see I’m using the same URL (the difference would be the ‘e’ parameter)

Answer 1

Although not the perfect solution, I have managed to implement this using hide/show of divs.

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(); 
        }
    }

This will hide/show each of the 3 types of events I have. Unfortunately because the divs use absolute positioning they leave a gap so the solution is not perfect. Still looking for the ideal – remove all events belonging to a source (can do) – bring back events (also can do but they return in the standard blue and not coloured as required.