本文介绍了FullCalendar.js - “提取事件时发生错误”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用FullCalendar.js来显示来自多个来源的Google日历活动。直到今天它一直工作正常。出于某种原因，FullCalendar开始弹出获取事件时发生错误错误消息，并且所有事件显然都消失了。这里是一个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）;
}）;
}，
even tMouseout：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（）{
警报（'提取事件时发生错误！'）;
}，
颜色：'yellow'，//非ajax选项
textColor：'black'//非ajax选项
}，
{
// Altimira
网址：'https://www.google.com/calendar/feeds/sonomaschools.org_e6j3ejc40g02v4sdo0n3cakgag%40group.calendar.google.com/public/基本'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
颜色：'red'，//非ajax选项
textColor：'white'//非ajax选项
}，
{
// Charter
网址：'https://www.google.com/calendar/feeds/sonomacharterschool.org_0p2f56g5tg8pgugi1okiih2fkg%40group.calendar.google.com/public/基本'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
颜色：'LightSalmon'，//非ajax选项
textColor：'black'//非ajax选项
}，
{//邓巴
网址：'https://www.google.com/calendar/feeds/sonomaschools.org_4tmsks5b9s70k6armb6jkvo9p0%40group.calendar.google.com/public/basic'，
类型：'POST'，
error：function（）{
alert（'提取事件时发生错误！'）;
}，
color：'green'，//非ajax选项
textColor：'white'//非ajax选项
}，
{// El Verano
网址：'https://www.google.com/calendar/feeds/pv2hfl7brn6dj8ia3mqksp9fl0%40group.calendar.google.com/public/basic'，
类型： 'POST'，
error：function（）{
alert（'提取事件时发生错误！'）;
}，
color：'LightBlue'，//非ajax选项
textColor：'black'//非ajax选项
}，
{// Flowery
url：'https://www.google.com/calendar/feeds/sonomaschools.org_v0a2nmtu4jrca90lui62tccbd4%40group.calendar.google.com/public/basic'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
颜色：'blue'，//非ajax选项
textColor：'white'//非ajax选项
}，
{// Prestwood
网址：'https：//www.google.com/calendar/feeds/sonomaschools.org_25rjgf4pu3vsa5i7r7itnqkigs%40group.calendar.google.com/public/basic'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
颜色：'purple'，//非ajax选项
textColor：'white'//非ajax选项
}，
{// Sassarini
网址：'https://www.google.com/calendar/feeds/sonomaschools.org_18a25r5mrc084gn4ekegadpfm8%40group.calendar.google.com/public/basic'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
颜色：'Aqua'，//非ajax选项
textColor：'black'//非ajax选项
}，
{// SVHS
网址：'https://www.google.com/calendar/feeds/sonomaschools.org_h450occacktra5errgbhsrv3k4%40group.calendar.google.com/public/basic'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
color：'Chartreuse'，//非ajax选项
textColor：'black'//非ajax选项
}，
{// SVUSD
网址：'https://www.google.com/calendar/feeds/sonomaschools.org_2i1596pg2fokba99kvatqn45bk%40group.calendar.google.com/public/basic'，
类型：'POST'，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
颜色：'MediumVioletRed'，//非ajax选项
textColor：'white'//非ajax选项
}，
]
}）;
}）;
这些事件在Google日历上显示为OK。
我尝试了其他解决方案，这让我接近解决方案，但并不完全。结果是获取整个日历事件集，而不是某个日期范围中的集合数。
我发现参数的名称在新API中也发生了变化。
请参阅：
我的修复包括将新的APIv3参数添加到 data 变量。另外， timeMin 和 timeMax 的日期格式是RFC3339 / ATOM，而不是ISO 8601（Moment.js输出的格式默认），所以我添加了一个格式字符串来生成RFC3339格式的日期。
在您的HTML / PHP文件中使用APIv3 URL格式：
https://www.googleapis.com/calendar/v3/calendars/CALENDAR-ID/events?key=API-KEY
将您的 gcal.js 更新为以下代码。这是基于user4263042和Stephen发布的修复程序（谢谢你们！）
pre $
（函数（工厂）{
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（s （sourceOptions，start，end，timezone）{
if（sourceOptions.dataType =='gcal'）{
return transformOptions（sourceOptions，start，end，timezone）;
}
}）;
函数transformOptions（sourceOptions，start，end，timezone）{
var success = sourceOptions.success;
var data = $ .extend（{}，sourceOptions.data || {}，{$ b $'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，
结束：entry.end.dateTime || entry.end.date，
url：entry.htmlLink，
位置：entry.location，
描述：条目.description ||''，
}）;
}）;
}
var args = [events] .concat（Array.prototype.slice.call （arguments，1））;
var res = app lyAll（成功，这个，args）;
if（$ .isArray（res））{
return res;
}
返回事件;
}
}）;
$ b $ legacy
fc.gcalFeed = function（url，sourceOptions）{
return $ .extend（{ ，sourceOptions，{url：url，dataType：'gcal'}）;
};
}）;
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.
解决方案
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' });
};
});
这篇关于FullCalendar.js - “提取事件时发生错误”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-19 23:10