These docs are for an old release. Info on upgrading to version 2/3
edit doc

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).

On Nov 17th 2014, Google shut down V1 and V2 of their Calendar APIs, which FullCalendar relied upon. Please upgrade to the latest version of FullCalendar or at least replace gcal.js with this file (will work from FullCalendar v1.5.0 until the latest v1.x). Your own Google Calendar API key is now required. Also, the way you specify your event feed is different! Read below about googleCalendarApiKey and googleCalendarId.

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”.

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. You pass an object into the events parameter, with two required properties, googleCalendarApiKey and googleCalendarId:

<script type='text/javascript'>

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

</script>

You can also specify some Event Source options:

<script type='text/javascript'>

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

</script>

Options

currentTimezone a string like "America/Chicago". Consult http://php.net/manual/en/timezones.php for a full list.
editable whether to allow dragging/resizing (default: false)
className CSS class to attach to each event
  Any of the other Event Source options...

Timezones Gotchas

Sometimes it can be confusing as to why FullCalendar displays event times differently than the Google Calendar interface. There are the two factors involved in this:

  • the calendar’s timezone, accessed through “Calendar settings” after clicking the arrow next to the calendar’s name
  • your Google Account’s timezone, accessed through the “Settings” link at the top right of the Google Calendar screen (near the “Sign out” link)

When both timezones are the same, you should have no problems. When they are different, FullCalendar will display times in the calendar’s timezone. Thus, times will be different than what you see in the Google Calendar interface because they are being adjusted to the GMT of the calendar. The solution is to use the currentTimezone option. If this is set to the same timezone as your Google Account, all dates should appear consistent.

Multiple Google Calendars

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

<script type='text/javascript'>

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

</script>