Question

FullCalendar is working great apart from 1 issue I’m having.
The monthview div which loads a calendar in monthview mode, seems to show duplicate holidays loaded in. This happens when I add an event, and then call my calendar bind function, which basically runs the code below.

Has anyone else had a similar issue? It looks like ‘removeEvents’ function is working ok against the data feed which comes from an internal database, but seems to leave the google dates. When the addEventSource is called, it’s adding the same events again.

var googleUkHolidaysFeed = {
    url: 'http://www.google.com/calendar/feeds/uk__en%40holiday.calendar.google.com/public/basic',
    cache: true,
    color: "green"    
};

 $.getJSON(url, {}, function (data) {

        $('#dayview').fullCalendar('removeEvents');
        $('#dayview').fullCalendar('addEventSource', data);        

        if ($("#monthview")[0]) {
            $('#monthview').fullCalendar('removeEvents');
            $('#monthview').fullCalendar('addEventSource', data);
            $('#monthview').fullCalendar('addEventSource', googleUkHolidaysFeed);
        }
    });

Answer 1

I resolved this issue myself. The ‘removeEvents’ has to be called followed by ‘removeEventSource’ like so:

(‘data’ is json array of events provided by the app, ‘googleCalendarUkHolidayFeed’ is the url feed from google).

var googleCalendarUkHolidayFeed = {
   url: "http://www.google.com/calendar/feeds/bla..."       
}    

$('#dayview').fullCalendar('removeEvents');    
$('#dayview').fullCalendar('addEventSource', data);   

if ($("#monthview")[0]) {
    // remove events and re-add event source to reflect search/non-search
    $('#monthview').fullCalendar('removeEvents');  

    $('#monthview').fullCalendar('removeEventSource', googleCalendarUkHolidayFeed);
    $('#monthview').fullCalendar('removeEventSource', data);        

    $('#monthview').fullCalendar('addEventSource', googleCalendarUkHolidayFeed);
    $('#monthview').fullCalendar('addEventSource', data);        
}