Google Calendar

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

Before you code...

You must first make your Google Calendar public:

  1. In the Google Calendar interface, locate the "My Calendar" box on the left.
  2. Click the arrow next to the calendar you need.
  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."

Then, you must obtain your calendar's XML feed URL:

  1. In the Google Calendar interface, locate the "My Calendar" box on the left
  2. Click the arrow next to the calendar you need.
  3. A menu will appear. Click "Calendar settings."
  4. In the "Calendar Address" section of the screen, click the XML badge.
  5. Your feed's URL will appear.

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 can simply put your feed's URL in the events option:

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: 'http://www.google.com/your_feed_url/'
    });
});

</script>

If you want to specify some Event Source options, you need to write things a little differently:

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: {
            url: 'http://www.google.com/your_feed_url/',
            className: 'gcal-event'
        }
    });
});

</script>

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'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        eventSources: [

            // source with no options
            "http://www.google.com/your_feed_url1/",

            // source with no options
            "http://www.google.com/your_feed_url2/",

            // source WITH options
            {
                url: "http://www.google.com/your_feed_url3/",
                className: 'nice-event'
            }
        ]
    });
});

</script>