FullCalendar.js - "podczas pobierania zdarzeń wystąpił błąd"

Question

Używam FullCalendar.js do wyświetlania zdarzeń Kalendarza Google z wielu źródeł. Do dzisiaj działa dobrze. Z jakiegoś powodu FullCalendar zaczął pojawiać się komunikat o błędzie "nie było błędu podczas pobierania zdarzeń", a wszystkie zdarzenia oczywiście zniknęły. Oto 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 
    }, 


    ] 
}); 
}); 

Zdarzenia pokazać OK w Kalendarzu Google.

Answer 1

Próbowałem innych rozwiązań, które doprowadziły mnie do poprawki, ale nie do końca. Wyniki pobierały cały zestaw zdarzeń kalendarzowych, a nie ustawioną liczbę w określonym zakresie dat.

Odkryłem, że nazwy parametrów również uległy zmianie w nowym interfejsie API.

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

Mój dylemat polega na dodaniu nowych parametrów APIv3 do zmiennej data. Również format daty dla timeMin i timeMax to RFC3339/ATOM, a nie ISO 8601 (domyślnie Moment.js jest wyprowadzany), dlatego dodałem ciąg formatu, aby utworzyć daty w formacie RFC3339.

Użyj formatu URL APIv3 w pliku HTML/PHP:

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

zaktualizować swój gcal.js do następującego kodu. Jest to oparte na poprawek publikowanych przez user4263042 i 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

Aby poprawić komentarz do kanału Google Holiday, jeśli go używasz. To naprawiło to dla nas. Najwyraźniej mają problemy z karmieniem. Jest to jedyny kanał od Google, którego używam, więc inne pliki danych Google mogą również zostać naruszone.

Answer 3

Wersja 2 interfejsu API to dziś deprecated.

Answer 4

Wierzę, że mam rozwiązanie.

Po niewielkim wykopaniu znalazłem kod this page, ale napisany jak jest, kod nie działał poprawnie. ALE po drobnych modyfikacjach, patrz poniżej, mam teraz znowu wszystko w porządku.

Aby korzystać z nowego fragmentu kodu jeden musi zmienić adres źródłowy dla tych kalendarza do postaci:

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

Włóż swój własny identyfikator kalendarza i klucz publiczny API do adresu URL, jak wskazano. Twój klucz API można uzyskać, ustawiając projekt w swoim urządzeniu Google Developers Console, a następnie tworząc klucz przeglądarki interfejsu API dostępu publicznego.

Oto rzeczywisty kod, którego należy użyć zamiast tych w bieżącym pliku 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

Oto każdy dylemat:

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

Wymaga edycja gcal.js i gcal.html aby uzyskać działające demo za; z tych demonstracji powinieneś być w stanie naprawić własne zepsute kalendarze, miejmy nadzieję;)

Uwaga:

wymaga pełnej kalendarzowych 2.2.0

I szybko odkrył, że nie będą pracować na pełny kalendarz 1.xx, lub jeśli to będzie, nie jestem wystarczająco bystry, aby kodować rozwiązać. Full Calendar 2.2.0 dodaje plik moment.js jako zależny link JS, który nie jest częścią Pełnego kalendarza 1.x.x, więc kopiowanie i wklejanie tego, co jest dostępne na powyższym linku, do plików w pełnym kalendarzu 1.x.x nie będzie działać.

Szczęśliwe kodowanie i poprawianie kalendarzy Google!