FullCalendar.js - «произошла ошибка при извлечении событий»

Question

Я использую 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 Calendar.

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.

Используйте формат URL APIv3 в вашем/PHP файл HTML:

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

Обновление вашего gcal.js на следующий код. Это основано на исправлениях вывешенных user4263042 и Стивен

(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

Чтобы исправить комментарий в канале Google Holiday, если вы его используете. Это нашло это для нас. Очевидно, у них проблемы с кормом. Это единственный канал от Google, который я использую, поэтому другие источники Google также могут пострадать.

Answer 3

Версия 2 API была deprecated сегодня.

Answer 4

Я считаю, что у меня есть решение.

После небольшого рытья я нашел this page, но написанный как есть, код не работал правильно. НО после небольшой модификации, см. Ниже, у меня теперь есть вещи в рабочем состоянии снова.

Чтобы использовать новый кусок кода нужно изменить URL источника для календарной формы:

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

Вставьте свой код календаря и открытый ключ API в URL, как указано. Ваш API-ключ можно получить, настроив проект внутри вашего Google Developers Console, а затем создав ключ браузера API общедоступного доступа.

Вот фактический код, который необходимо использовать вместо него в текущем 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 5

Вот исправить все:

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

Это требует редактирования gcal.js и gcal.html, чтобы получить работу в демо; с этих демонстраций вы, наверное, сможете исправить свои сломанные календари;)

Обратите внимание:

Требуется Full-календарь 2.2.0

Я быстро обнаружил, что это не будет работать на полный календарный 1.xx, или если он будет, я не закодировать достаточно здравого смысла, чтобы выясните это. Полный календарь 2.2.0 добавляет moment.js как зависимую JS-ссылку, которая не является частью Full Calendar 1.x.x, поэтому копирование и вставка того, что доступно по ссылке выше, в ваш файл Full Calendar 1.x.x не будет работать.

Счастливое кодирование и исправление ваших Календари Google!