Question

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

Answer 1

我尝试了其他解决方案，这让我接近修复但不完全在那里。结果是获取整个日历事件集，而不是特定日期范围内的集合数。

我发现在新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' });
};


});

Answer 2

我相信我有解决方案。

经过一番挖掘后，我找到了this page，但按原样编写，代码无法正常工作。但经过一些修改后，请看下面的内容，我现在又处理好了工作。

要使用新的代码，需要将某个日历的源URL更改为以下格式：

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

如图所示，将您自己的日历ID和公共API密钥插入到URL中。您可以通过在Google Developers Console中设置项目然后创建公共访问API浏览器密钥来获取API-KEY。

以下是当前gcal.js文件中需要使用的实际代码。

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

    }
});

Answer 3

在这里修复所有人：

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

需要编辑gcal.js和gcal.html才能让演示工作正常;从那些演示中，你应该能够修复自己破碎的日历，希望如此; ）

请注意：

需要Full-Calendar 2.2.0

我很快发现它无法在完整日历1.x.x上运行，或者如果可以的话，我的代码不够精确，无法弄明白。完整日历2.2.0将moment.js添加为依赖JS链接，这不是完整日历1.xx的一部分，因此将上面链接上可用的内容复制并粘贴到完整日历1.xx文件中将不起作用。

快乐编码并修复您的Google日历！

Answer 4

如果您正在使用Google假日供稿，请修复注释。这为我们解决了。显然他们有饲料问题。这是我使用Google的唯一Feed，因此其他Google Feed也可能会受到影响。

Answer 5

今天的API版本2为deprecated。

FullCalendar.js - “获取事件时出错”

5 个答案: