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.
/
$(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: '_u030vtntt1tp7gjn8cnqrr9nsk%40group.calendar.google/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: '_e6j3ejc40g02v4sdo0n3cakgag%40group.calendar.google/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: '_0p2f56g5tg8pgugi1okiih2fkg%40group.calendar.google/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: '_4tmsks5b9s70k6armb6jkvo9p0%40group.calendar.google/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: '.calendar.google/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: '_v0a2nmtu4jrca90lui62tccbd4%40group.calendar.google/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:'_25rjgf4pu3vsa5i7r7itnqkigs%40group.calendar.google/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: '_18a25r5mrc084gn4ekegadpfm8%40group.calendar.google/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: '_h450occacktra5errgbhsrv3k4%40group.calendar.google/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: '_2i1596pg2fokba99kvatqn45bk%40group.calendar.google/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.
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/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./calendar/feeds/sonomaschools_u030vtntt1tp7gjn8cnqrr9nsk%40group.calendar.google./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./calendar/feeds/sonomaschools_e6j3ejc40g02v4sdo0n3cakgag%40group.calendar.google./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./calendar/feeds/sonomacharterschool_0p2f56g5tg8pgugi1okiih2fkg%40group.calendar.google./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./calendar/feeds/sonomaschools_4tmsks5b9s70k6armb6jkvo9p0%40group.calendar.google./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./calendar/feeds/pv2hfl7brn6dj8ia3mqksp9fl0%40group.calendar.google./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./calendar/feeds/sonomaschools_v0a2nmtu4jrca90lui62tccbd4%40group.calendar.google./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./calendar/feeds/sonomaschools_25rjgf4pu3vsa5i7r7itnqkigs%40group.calendar.google./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./calendar/feeds/sonomaschools_18a25r5mrc084gn4ekegadpfm8%40group.calendar.google./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./calendar/feeds/sonomaschools_h450occacktra5errgbhsrv3k4%40group.calendar.google./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./calendar/feeds/sonomaschools_2i1596pg2fokba99kvatqn45bk%40group.calendar.google./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.
Share Improve this question edited Nov 17, 2014 at 17:26 ROMANIA_engineer 56.7k30 gold badges208 silver badges205 bronze badges asked Nov 17, 2014 at 17:25 mlk4343mlk4343 631 silver badge4 bronze badges 1- An issue has been submitted to the project here: code.google./p/fullcalendar/issues/… – Mike Thibault Commented Nov 17, 2014 at 20:32
5 Answers
Reset to default 5I 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./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./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.\/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' });
};
});
Here's the fix everyone:
https://github./jonnyhweiss/fullcalendar/mit/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!
I believe I have the solution.
After a little digging I found a this page, but written as is, the code failed to work correctly. BUT after a little modification, see below, I now have things in working order again.
To use the new piece of code one needs to change the source URL for ones calendar to the form:
https://www.googleapis./calendar/v3/calendars/CALENDAR-ID/events?key=API-KEY
Insert your own calendar id and public API key into the URL as indicated. Your API-KEY can be obtained by setting up a project inside your Google Developers Console and then creating a public access API browser key.
Here is the actual code one needs to use in place of ones 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.\/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's 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's not set it doesn't exist in the json and will error here
description: entry.description || '' // must allow default to blank, if it's 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;
}
});
}
});
To fix ment out the Google Holiday feed if you are using it. That fixed it for us. Evidently they are having feed issues. That is the only feed from Google I use, so other Google feeds may be impacted also.
Version 2 of the API was deprecated today.