events from Google Calendar

FullCalendar can display events from a public Google Calendar. Google Calendar can serve as a backend that manages and persistently stores event data (a feature that FullCalendar currently lacks).

Before you code…#

You must first have a Google Calendar API Key:

1. Go to the Google Developer Console and create a new project (it might take a second).
2. Once in the project, go to APIs & auth > APIs on the sidebar.
3. Find “Calendar API” in the list and turn it ON.
4. On the sidebar, click APIs & auth > Credentials.
5. In the “Public API access” section, click “Create new Key”.
6. Choose “Browser key”.
7. If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.
8. Your new API key will appear. It might take second or two before it starts working.

Make your Google Calendar public:

1. In the Google Calendar interface, locate the “My calendars” area on the left.
2. Hover over the calendar you need and click the downward arrow.
3. A menu will appear. Click “Share this Calendar”.
4. Check “Make this calendar public”.
5. Make sure “Share only my free/busy information” is unchecked.
6. Click “Save”.

Obtain your Google Calendar’s ID:

1. In the Google Calendar interface, locate the “My calendars” area on the left.
2. Hover over the calendar you need and click the downward arrow.
3. A menu will appear. Click “Calendar settings”.
4. In the “Calendar Address” section of the screen, you will see your Calendar ID. It will look something like ”abcd1234@group.calendar.google.com“.

Usage with NPM#

First, install the @fullcalendar/google-calendar package:

npm install --save @fullcalendar/google-calendar

Then, create a new calendar and pass in the plugins:

import { Calendar } from 'fullcalendar';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
...
const calendar = new Calendar(calendarEl, {
  plugins: [ googleCalendarPlugin ]
});

Usage with Script Tags#

The plugin is not part of FullCalendar’s all/global.js bundle. If you are using script tags, add the plugin’s own global.js after the bundle:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- STANDARD JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/all/global.js"></script>

    <!-- GOOGLE CALENDAR PLUGIN. must go AFTER the standard JS -->
+   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@7.1.1/global.js"></script>

    <!-- THEME JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/global.js"></script>

    <!-- STYLESHEETS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/skeleton.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/theme.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/palettes/purple.css' rel='stylesheet' />

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const calendarEl = document.getElementById("calendar");
        const calendar = new FullCalendar.Calendar(calendarEl, {
+         googleCalendarApiKey: "<YOUR API KEY>",
+         events: {
+           googleCalendarId: "abcd1234@group.calendar.google.com"
+         }
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

The plugin’s global.js registers itself, so there is no plugins array to write. It works the same way alongside the Web Component’s all/global.js.

Writing the code#

Now it’s time to initialize your calendar in JavaScript. This is the most minimal example:

const calendar = new Calendar(calendarEl, {
  plugins: [ googleCalendarPlugin ],
  googleCalendarApiKey: '<YOUR API KEY>',
  events: {
    googleCalendarId: 'abcd1234@group.calendar.google.com'
  }
});

If you want to specify some Event Source options, you can include them in the events object:

const calendar = new Calendar(calendarEl, {
  plugins: [ googleCalendarPlugin ],
  googleCalendarApiKey: '<YOUR API KEY>',
  events: {
    googleCalendarId: 'abcd1234@group.calendar.google.com',
    className: 'gcal-event' // an option!
  }
});

View a demo that displays US holidays from Google Calendar.

Multiple Google Calendars#

You can specify multiple Google Calendars by using the eventSources option:

<script type='text/javascript'>

  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
      googleCalendarApiKey: '<YOUR API KEY>',
      eventSources: [
        {
          googleCalendarId: 'abcd1234@group.calendar.google.com'
        },
        {
          googleCalendarId: 'efgh5678@group.calendar.google.com',
          className: 'nice-event'
        }
      ]
    });

    calendar.render();
  });

</script>

Extended Properties#

Google Calendar’s API allows you to specify Extended Properties for your events. The extended properties will be available in the extendedProps hash of each Event Object.

Advanced#

If you need different API keys per calendar, you can set a googleCalendarApiKey option on each individual Event Source when written in extended form.

For detecting errors, use the Event Source Object’s failure handler.