我正在使用 FullCalendar.js 显示来自多个来源的 Google 日历事件。直到今天它一直工作正常。由于某种原因，FullCalendar 开始弹出“获取事件时出错”错误消息，所有事件显然都消失了。这是一个 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 日历上显示正常。

最佳答案

我尝试了其他解决方案，这让我接近修复，但还没有完全修复。结果是获取整组日历事件，而不是特定日期范围内的一组数字。

我发现新 API 中的参数名称也发生了变化。

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

我的修复涉及将新的 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 发布的修复(谢谢你们!)

(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' });
};


});

关于javascript - FullCalendar.js - "there was an error while fetching events"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26978312/