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

Question

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.

Answer 1

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


});

Answer 2

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.com/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.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

Here's the fix everyone:

https://github.com/jonnyhweiss/fullcalendar/commit/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.xx, 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.xx, so copy and pasting what is available on the link above into your Full Calendar 1.xx files will not work.

Happy coding and fixing your Google Calendars!

Answer 4

To fix comment 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.

Answer 5

API的第2版今天已弃用 。