rerenderEvents / refetchEvents problem

Question

I am not sure if I am using this correctly so my problem may be my mis-understanding rather than a bug or larger problem.

I have a fullcalendar that gets initiated from doc ready like this (some code left out for brevity).

   function renderEvents() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var technicians = $("div[ID*='ucTechnicians'] :hidden").val();

        var calendar = $('#calendar').fullCalendar({


       ...
            events: "JsonResponse.ashx?technicians=" + technicians,
       ...    
    }

The json response page successfuly returns the events filtered by the chosen technician on initial load. On the main page is a control to change the technicians the user wants to see on the calendar. I cannot get the calendar to re-render and pass the technicians param to the json reposne file.

From button click I have tried calling renderEvents() again. This puts a duplicate calendar on the page. I have tried $('#calendar').('destroy') before calling renderEvents(). This works but if I am in a view other then the default month view it will allways reset and destroying rebuilding the calendar seems like a lot of work for a refresh.

I have also tried $('#calendar').('rerenderEvents') and $('#calendar').('refetchEvents'). I have even tried to reset the source $('#calendar').fullCalendar('addEventSource', 'JsonResponse.ashx?technicans=' + technicians) ahead of time.

In the last case I am able to watch the json response in debug and it picks up on the filter parameter and returns results filtered by the latest parameters but the calendar on the page does not refresh with the new values.

How do I make the calendar refresh with new parameters?

Thanks in advance.

Answer 1

In pseudo, remove old events, add a new event source, then refetch events (from the only source, which is now the new source):

• This is untested, but try removing the old events:

$('#calendar').fullCalendar('removeEvents')

• Then add the new event source (According the the documentation, this should fetch the events and display them on the screen, but it appears not to work, so follow it with the next command which is like a refresh):

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

---

EDIT: Instead of:

Then refetch and render the new events:

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

OR:

• Use the following, as you mention, running addEventSource fetches the new events, so this should render the newly fetched events:

$('#calendar').fullCalendar('rerenderEvents')

Answer 2

Thanks for the help!

Here is what worked based on Scoobler's suggestions the steps that work are (1) removeEvents. (2) addEventSource, (3) rerenderEvents.

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

Answer 3

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

The above solution works, but every time you run it, it add an eventSource.

So when you need to run $('#calendar').fullCalendar('refetchEvents'); you will get events from all sources, so many dublicate events and events from all previous sources.

The solution that works for me good is:

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

And there is no need for "rerenderEvents" or "refetchEvents".

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

After that "refetchEvents" will work as supposed to when needed.

Answer 4

newEvents = [...]

 $('#calendar').fullCalendar('removeEvents');
 $('#calendar').fullCalendar( 'addEventSource', newEvents);

no need to 'rerenderEvents' and works like a charm!

Answer 5

with fulcalendar 4.x I'm using something like this:

initialize calendar as usual:

 var calendar = $('#calendar').fullCalendar({
       ...
        events: "JsonResponse.ashx?technicians=" + technicians,
       ... 
 });

and then when you need to redraw events:

var eventSources = calendar.getEventSources();
for(var i in eventSources)
{
    var evres=eventSources[i];
    evres.refetch();
}
calendar.render();