FullCalendar.js - "there was an error while fetching events"

Question

I'm using FullCalendar.js to display Google Calendar events from multiple sources. It's been working OK up until today. For some reason FullCalendar started popping up the "there was an error while fetching events" error message and all the events are obviously gone. Here is a jsfiddle.

http://jsfiddle.net/mlk4343/1wko0z1j/1/

$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
            contentHeight: 600,

eventMouseover: function(calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent">' + calEvent.title + '</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
    $(this).css('z-index', 10000);
    $('.tooltipevent').fadeIn('500');
    $('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function(e) {
    $('.tooltipevent').css('top', e.pageY + 10);
    $('.tooltipevent').css('left', e.pageX + 20);
});
},

eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},

eventSources: [


{
        // Adele H 
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_u030vtntt1tp7gjn8cnqrr9nsk%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    },


        {
        // Altimira 
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_e6j3ejc40g02v4sdo0n3cakgag%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'red',   // a non-ajax option
        textColor: 'white' // a non-ajax option
    },


        {
        // Charter 
        url: 'https://www.google.com/calendar/feeds/sonomacharterschool.org_0p2f56g5tg8pgugi1okiih2fkg%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'LightSalmon',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    },

         {// Dunbar 
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_4tmsks5b9s70k6armb6jkvo9p0%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'green',   // a non-ajax option
        textColor: 'white' // a non-ajax option
    },

     {// El Verano 
        url: 'https://www.google.com/calendar/feeds/pv2hfl7brn6dj8ia3mqksp9fl0%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'LightBlue',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    },


        { // Flowery 
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_v0a2nmtu4jrca90lui62tccbd4%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'blue',   // a non-ajax option
        textColor: 'white' // a non-ajax option
    },


                { // Prestwood 
           url:'https://www.google.com/calendar/feeds/sonomaschools.org_25rjgf4pu3vsa5i7r7itnqkigs%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'purple',   // a non-ajax option
        textColor: 'white' // a non-ajax option
    },


                { // Sassarini 
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_18a25r5mrc084gn4ekegadpfm8%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'Aqua ',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    },


       { // SVHS 
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_h450occacktra5errgbhsrv3k4%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'Chartreuse',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    },


 { // SVUSD
        url: 'https://www.google.com/calendar/feeds/sonomaschools.org_2i1596pg2fokba99kvatqn45bk%40group.calendar.google.com/public/basic',
        type: 'POST', 
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'MediumVioletRed',   // a non-ajax option
        textColor: 'white' // a non-ajax option
    },


    ]
});
});

The events show OK on Google Calendar.

Answer 1

I tried the other solutions, which got me close to a fix but not entirely there. The results were fetching the entire set of calendar events and not a set number in a certain date-range.

What I discovered was that the names of the Parameters have also changed in the new API.

See: https://developers.google.com/google-apps/calendar/v3/reference/events/list

My fix involves adding the new APIv3 parameters to the data variable. Also the date-format for timeMin and timeMax are RFC3339/ATOM and not ISO 8601 (which Moment.js outputs by default) so I have added a format string to produce RFC3339 formatted dates.

Use the APIv3 URL format in your HTML/PHP file:

https://www.googleapis.com/calendar/v3/calendars/CALENDAR-ID/events?key=API-KEY

Update your gcal.js to the following code. This is based on the fixes posted by user4263042 and Stephen (Thanks guys!)

(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define([ 'jquery' ], factory);
    }
    else {
        factory(jQuery);
    }
})(function($) {


var fc = $.fullCalendar;
var applyAll = fc.applyAll;


fc.sourceNormalizers.push(function(sourceOptions) {

    if (sourceOptions.dataType == 'gcal' ||
        sourceOptions.dataType === undefined &&
        (sourceOptions.url || '').match(/^(http|https):\/\/www.googleapis.com\/calendar\/v3\/calendars/)) {
            sourceOptions.dataType = 'gcal';
            if (sourceOptions.editable === undefined) {
                sourceOptions.editable = false;
            }
        }
});


fc.sourceFetchers.push(function(sourceOptions, start, end, timezone) {
    if (sourceOptions.dataType == 'gcal') {
        return transformOptions(sourceOptions, start, end, timezone);
    }
});


function transformOptions(sourceOptions, start, end, timezone) {

    var success = sourceOptions.success;
    var data = $.extend({}, sourceOptions.data || {}, {
        'singleEvents' : true,
        'maxResults': 250,
        'timeMin': start.format('YYYY-MM-DD[T]HH:mm:ssZ'),
        'timeMax': end.format('YYYY-MM-DD[T]HH:mm:ssZ'),
    });

    return $.extend({}, sourceOptions, {
        url: sourceOptions.url + '&callback=?',
        dataType: 'jsonp',
        data: data,
        success: function(data) {
            var events = [];
            if (data.items) {
                $.each(data.items, function(i, entry) {
                    events.push({
                        id: entry.id,
                        title: entry.summary,
                        start:  entry.start.dateTime || entry.start.date,
                        end: entry.end.dateTime || entry.end.date,
                        url: entry.htmlLink,
                        location: entry.location,
                        description: entry.description || '', 
                    });

                });
            }
            var args = [events].concat(Array.prototype.slice.call(arguments, 1));
            var res = applyAll(success, this, args);
            if ($.isArray(res)) {
                return res;
            }
            return events;
        }
    });

}


// legacy
fc.gcalFeed = function(url, sourceOptions) {
    return $.extend({}, sourceOptions, { url: url, dataType: 'gcal' });
};


});

Answer 2

Here's the fix everyone:

https://github.com/jonnyhweiss/fullcalendar/commit/520022a4da81ded61f3a1cc7020df4df54726fbc?diff=split

It requires editing of gcal.js and gcal.html to get the demo's working; from those demos you should be able to fix your own broken calendars, hopefully ; )

Please note:

Requires Full-Calendar 2.2.0

I quickly discovered it will not work on Full Calendar 1.x.x, or if it will, I'm not code savvy enough to figure it out. Full Calendar 2.2.0 adds moment.js as a dependent JS link, which is not a part of Full Calendar 1.x.x, so copy and pasting what is available on the link above into your Full Calendar 1.x.x files will not work.

Happy coding and fixing your Google Calendars!