FullCalendar.js - "An error occurred while retrieving events"

Question

I use FullCalendar.js to display Google Calendar events from multiple sources. Until today, it worked fine. For some reason, FullCalendar started popping up the error message "an error occurred while retrieving events" and all the events obviously disappeared. Here is the 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 }, ] }); }); 

Events are displayed on Google Calendar.

Answer 1

I tried other solutions that brought me closer to the fix, but not completely. The result was a complete set of calendar events, rather than a given number in a specific date range.

I found that the parameter names also changed in the new API.

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

My fix involves adding new APIv3 parameters to the data variable. Also, the date format for timeMin and timeMax is RFC3339 / ATOM, not ISO 8601 (which gives Moment.js by default), so I added a format string to create the RFC3339 formatting date.

Use the APIv3 URL 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 fixes posted by user 4263042 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

I believe that I have a solution.

After a little digging, I found this page , but written as is, the code did not work correctly. BUT after a small modification, see below, I now have things in working condition again.

To use the new code snippet, you need to change the source URL for one calendar in the form:

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

Paste your own calendar id and API public key into the URL provided. You can get your API key by setting up a project inside the Google Developers Console , and then creating an open access API browser key.

Here is the actual code to use in place of those found in the current gcal.js file.

 (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 == 'gcalv3' || (sourceOptions.dataType === undefined && (sourceOptions.url || '').match(/^(http|https):\/\/www.googleapis.com\/calendar\/v3\/calendars\//))) { sourceOptions.dataType = 'gcalv3'; if (sourceOptions.editable === undefined) { sourceOptions.editable = false; } } }); fc.sourceFetchers.push(function(sourceOptions, start, end, timezone) { if (sourceOptions.dataType == 'gcalv3') { return transformOptionsV3(sourceOptions, start, end, timezone); } }); function transformOptionsV3(sourceOptions, start, end, timezone) { var success = sourceOptions.success; var data = $.extend({}, sourceOptions.data || {}, { singleevents: true, 'max-results': 9999 }); return $.extend({}, sourceOptions, { url: sourceOptions.url, dataType: 'json', data: data, startParam: 'start-min', endParam: 'start-max', success: function(data) { var events = []; if (data.items) { $.each(data.items, function(i, entry) { events.push({ id: entry.id, title: entry.summary || '', // must allow default to blank, if it not set it doesn't exist in the json and will error here start: entry.start.dateTime || entry.start.date, end: entry.end.dateTime || entry.start.date, // because end.date may be the next day, cause a '2-all-day' event, we use start.date here. url: entry.htmlLink, location: entry.location || '', // must allow default to blank, if it not set it doesn't exist in the json and will error here description: entry.description || '' // must allow default to blank, if it not set it doesn't exist in the json and will error here }); }); } var args = [events].concat(Array.prototype.slice.call(arguments, 1)); var res = applyAll(success, this, args); if ($.isArray(res)) { return res; } return events; } }); } }); 

Answer 3

Here's a fix for everyone:

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

You need to edit gcal.js and gcal.html to get a demo; with these demos, you can probably fix your broken calendars; )

Note:

Requires Full-Calendar 2.2.0

I quickly discovered that it would not work in Full Calendar 1.xx, or if that happens, I am not good enough at the code to figure it out. Full Calendar 2.2.0 adds moment.js as a dependent JS link, which is not part of Full Calendar 1.xx, so copying and pasting what is available from the link above will not work in your Full Calendar 1.xx files.

Happy coding and fixing your Google Calendar!

Answer 4

To correct a comment on the Google Holiday channel if you use it. It found it for us. Obviously, they have problems with food. This is the only channel from Google that I use, so other Google sources may also be affected.

Answer 5

Version 2 of the API is deprecated today.