jQuery Full Calendar update/filter calendar

Question

I am trying to implement client side filtering using fullcalendar.js. I can render the calendar initially using:

function getCalendar($venue) {

    $('#calendar').fullCalendar({

        eventSources: [
           {
              url: ajaxUrl,
              type: "GET",
              dataType: "json",
              data: {
                  action: 'loop_events_output',
                  venue: $venue,
              },

             beforeSend: function() {
                 $("#calendar").LoadingOverlay("show", {
                     color: "rgba(51,51,51,0.8)",
                 });    
             },
             complete: function() {                
                 $("#calendar").LoadingOverlay("hide");
             },

             error: function() {
                alert('there was an error while fetching events!');
             },
           }
        ]


    }); 
}

// execute on load
getCalendar('townsville');

Now I want to be able to update the calendar based on a checkbox input, here is the second part of my code:

// execute when using filters
$('.calendar-controls input').change(function(){
    if (this.checked) {
        var checkedVal = $(this).val();

        $("#calendar").fullCalendar('removeEvents');
        getCalendar(checkedVal);
        $('#calendar').fullCalendar('refetchEvents')
    }
});

But I can see from the XHR requests that the request url is not changing and remain as: /wp-admin/admin-ajax.php?action=loop_events_output&venue=townsville&start=2016-07-31&end=2016-09-11&_=1472626202164

Any help appreciated.

Answer 1

OK so I ended up figuring this one out. Essentially the way fullcalendar works is that it takes the events object on load and will continue using that object on future renders unless that object is reset. So they way I did it was to change my full calendar function to:

function getCalendar() {

    $('#calendar').fullCalendar({

        events: source,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        eventRender: function (event, element) {
            element.attr('href', '#');
        },
        loading: function( isLoading, view ) {
            if(isLoading) {// isLoading gives boolean value
                alert('loading');
            } else {
                alert('done');
            }
        }


    }); 
}

Then I setup the source:

var source = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=townsville';

Then I updated the source depending on user input:

// execute when using filters
$('.calendar-controls input').change(function(){
    if (this.checked) {
        var checkedVal = $(this).val();

        var newSource = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=' + checkedVal;
        $('#calendar').fullCalendar('removeEventSource', source)
        $('#calendar').fullCalendar('refetchEvents')
        $('#calendar').fullCalendar('addEventSource', newSource)
        $('#calendar').fullCalendar('refetchEvents');
        source = newSource;
    }
});

The most important part is removing the event source, and then adding the new event sources in.