FullCalendar.js-“获取事件时出错". [英] FullCalendar.js - "there was an error while fetching events"
问题描述
我正在使用FullCalendar.js来显示来自多个来源的Google日历事件.直到今天，它一直工作正常.由于某种原因，FullCalendar开始弹出获取事件时发生错误"错误消息，所有事件显然都消失了.这是一个jsfiddle.
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
},
]
});
});
事件在Google日历上显示为确定".
The events show OK on Google Calendar.
推荐答案
我尝试了其他解决方案，这使我接近一个修复程序，但还不止于此.结果是获取整个日历事件集，而不是在特定日期范围内的集数.
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.
我发现，新API中的参数名称也已更改.
What I discovered was that the names of the Parameters have also changed in the new API.
请参阅: https://developers.google.com/google-apps/calendar/v3/reference/events/list
我的修复程序涉及将新的APIv3参数添加到data变量.另外，timeMin和timeMax的日期格式是RFC3339/ATOM，而不是ISO 8601(默认情况下Moment.js输出的是ISO 8601)，因此我添加了格式字符串以产生RFC3339格式的日期.
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.
在HTML/PHP文件中使用APIv3 URL格式:
Use the APIv3 URL format in your HTML/PHP file:
https://www.googleapis.com/calendar/v3/calendars/CALENDAR-ID/events?key=API-KEY
将您的gcal.js更新为以下代码.这是基于user4263042和Stephen(谢谢的！)发布的修复程序.
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' });
};
});
这篇关于FullCalendar.js-“获取事件时出错".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
