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, click on Library in the APIs & Services sidebar and search for “Google Calendar API”. Click ENABLE.
3. Click on Credentials in the APIs & Services sidebar to open the credentials menu.
4. Under the Credentials tab, click on Create Credentials.
5. Select API key in the dropdown menu to generate an API key.
6. 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 3 dots menu button.
3. A pop-up menu will appear. Click Settings and sharing.
4. Check “Make available to public”.
5. Make sure “See all event details” is selected.

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 3 dots menu button.
3. A menu will appear. Click “Calendar settings”.
4. In the “Integrate calendar” section of the screen, you will see your Calendar ID. It will look something like “abcd1234@group.calendar.google.com”.

Dependencies

Next, you must have all the required js/css files. This includes the standard fullcalendar.js and fullcalendar.css, in addition to gcal.js:

<script type='text/javascript' src='fullcalendar/gcal.js'></script>

Writing the code

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

<script type='text/javascript'>

$(function() {
  $('#calendar').fullCalendar({
    googleCalendarApiKey: '<YOUR API KEY>',
    events: {
      googleCalendarId: 'abcd1234@group.calendar.google.com'
    }
  });
});

</script>

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

<script type='text/javascript'>

$(function() {
  $('#calendar').fullCalendar({
    googleCalendarApiKey: '<YOUR API KEY>',
    events: {
      googleCalendarId: 'abcd1234@group.calendar.google.com',
      className: 'gcal-event' // an option!
    }
  });
});

</script>

View a demo that displays US holidays from Google Calendar.

Timezones

The Google Calendar plugin respects the timezone parameter. If it is false (the default), the timezone setting of the Google Calendar will be used, as defined in Google’s UI. If it is specified, this will be ignored and the timezone will be forced.

Multiple Google Calendars

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

<script type='text/javascript'>

$(function() {
  $('#calendar').fullCalendar({
    googleCalendarApiKey: '<YOUR API KEY>',
    eventSources: [
      {
        googleCalendarId: 'abcd1234@group.calendar.google.com'
      },
      {
        googleCalendarId: 'efgh5678@group.calendar.google.com',
        className: 'nice-event'
      }
    ]
  });
});

</script>

Advanced: Extended Properties

Google Calendar’s API allows you to specify Extended Properties for your events. The extended properties will be available as the extendedProperties hash that is attached to each Event Object.

Advanced: API Keys

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

Advanced: Error Handling

If you need to detect errors with the Google API, there’s no way to get at this with jQuery’s AJAX error handler. You’ll need to use the FullCalendar’s googleCalendarError callback, which is available as a normal option, or a per-Event Source option.