Fullcalendar - Google Calendar Events Not Displaying

0
votes

Reference: fullcalendar and gcal both v.3.9.0, jquery v.3.3.1, moment v. latest

I'm trying to get a test calendar running to display multiple Google Calendars, but so far no events are being displayed. I've followed the documentation on the fullcalendar.io website but have had no success so far. The following code renders the calendar but does not display the Google Calendar events:

$(document).ready(function() {

function CalendarSource(label, googleCalendarId, name) {
    this.label = label;
    this.googleCalendarId = googleCalendarId;
    this.name = name;
}

// Initialise the main calendar instance
$('#fullcalendar-instance').fullCalendar({
    googleCalendarApiKey: 'MyAPIkey',
    eventSources: [
        {
            googleCalendarId: 'gCalID-1',
            color: 'green',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-1'
        },
        {
            googleCalendarId: 'gCalID-2',
            color: 'blue',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-2'
        },
        {
            googleCalendarId: 'gCalID-3',
            color: 'orange',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-3'
        }
    ],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'prevYear,nextYear',
    },
    titleFormat: 'MMM YYYY',
    dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    bootstrapFontAwesome: {
        close: 'fa-times',
        prev: 'fa-angle-left',
        next: 'fa-angle-right',
        prevYear: 'fa-angle-double-left',
        nextYear: 'fa-angle-double-right'
    },
    timezone: 'Europe/London',
    defaultView: 'month',
    themeSystem: 'bootstrap4'
})

});

I would be grateful if someone could point out where I going wrong.

1
fullcalendar
I've also tried replacing the eventSources code with each of the following pieces of code also with any success: – ridgedale
eventSources: [ { url: "google.com/calendar/feeds/gCalID-1/public/basic", className: 'my-events-1', color: 'green' // an option! }, { url: "google.com/calendar/feeds/gCalID-2/public/basic", className: 'my-events-2', color: 'blue' }, { url: "google.com/calendar/feeds/gCalID-3/public/basic", className: 'my-events-3', color: 'orange' }, ], – ridgedale
eventSources: [ $.fullCalendar.gcalFeed('google.com/calendar/feeds/gCalID-1/public/basic'), $.fullCalendar.gcalFeed('google.com/calendar/feeds/gCalID-2/public/basic'), $.fullCalendar.gcalFeed('google.com/calendar/feeds/gCalID-3/public/basic') ], – ridgedale
have you included the required gcal.js file in your page? Have you checked your browser console for any errors? The version in your question (with just the calendar IDs) is the correct one btw, as per the documentation. The versions in the comments don't work AFAIK. Did you also make sure that the calendars are shared as public in your Google settings? – ADyson
Thank you again for your reply, ADyson. Yes, the gcal.min.js was added in, but it appears that fullcalendar.print.css is also required everything to work. I rechecked all the file locations and paths included and that has now resolved that issue. Basically what I did was I started from sratch using the fullcalendar.io/releases/fullcalendar/3.9.0/demos/gcal.html demo. – ridgedale

1 Answers