CODEWITHSUNDEEP
javascriptajaxjqueryfullcalendar
silentmeditations
silentmeditations

Reputation: 31

FullCalendar - After initial load, dynamically updating ajax parameters not working

I'm working with http://arshaw.com/fullcalendar/ and I would like to dynamically filter the events shown based on various checkboxes on the page. I am using an ajax source (with filters passed as parameters) to gather data.

The problem I am running into is once I load the calendar, I cannot, for the life of me (or stackoverflow searches) figure out how to update the parameters. It seems once the calendar is loaded, those parameters are "baked" and cannot be changed.

I have tried every combination of addEventSource, removeEventSources, removeEvents, refetchEvents, etc (as recommended here: rerenderEvents / refetchEvents problem), with still no luck.

My current solution is to re-initiate the entire .fullCalendar every time a filter is updated-- this is leading to tons of issues as well and really isn't an elegant solution.

Any ideas on a simpler way to do this? Refetching your source with updated parameters each time should be automatic. I really do appreciate your help.

Upvotes: 1

Views: 1253

Answers (2)

mad.net
mad.net

Reputation: 53

The solution that works for me is:

$('#calendar').fullCalendar('removeEventSource', 'JsonResponse.ashx?technicans=' + technicians);
technicians = new_technicians_value;
$('#calendar').fullCalendar('addEventSource', 'JsonResponse.ashx?technicans=' + technicians);

After "addEventSource" events will be immediately fetched from the new source.

full answer here https://stackoverflow.com/a/36361544/5833265

Upvotes: 0

Yann86
Yann86

Reputation: 1017

In my code i do like that :

I have an array with the calendars id to display and i update it when the user check or uncheck the checkbox.

In fullCalendar initialization I retrieve all events and i filter them with this function :

function fetchEvent( calendars, events) {

    function eventCorrespond (element, index, array) {

          return $.inArray(element.calendarid, calendars) > -1;

    }

return  events.filter(eventCorrespond);
}

$('#calendar').fullCalendar({
    events: function(start, end, callback) {

    //fetch events for date range  on the server and retrieve an events array
    //update calendars, your array of calendarsId 

    //return a filtered events array
        callback(fetchEvent(calendars , events));
    }
});

and when the user check or uncheck a checkbox i do :

$('#calendar').fullCalendar('refetchEvents');

Upvotes: 0

Related Questions