fullcalendar/google_calendar.txt

Google Calendar
===============

FullCalendar can display events from a public [Google Calendar](http://calendar.google.com/).
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 (version 1.5 and above)
---------------------------------------

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](event_data/Event_Source_Object#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',           // an option!
				currentTimezone: 'America/Chicago' // an option!
			}
		});
	});
	
	</script>
	
Options
-------

<table>
<tr>
<th>
currentTimezone
</th>
<td markdown='1'>
a string like "America/Chicago".
Consult [http://php.net/manual/en/timezones.php](http://php.net/manual/en/timezones.php) for a full list.
</td>
</tr>
<tr>
<th>
editable
</th>
<td markdown='1'>
whether to allow dragging/resizing (default: `false`)
</td>
</tr>
<tr>
<th>
className
</th>
<td>
CSS class to attach to each event
</td>
</tr>
<tr>
<th>
&nbsp;
</th>
<td markdown='1'>
[Any of the other Event Source options...](event_data/Event_Source_Object#options)
</td>
</tr>
</table>

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

	$(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>

Writing the Code (prior to version 1.5)
---------------------------------------

Prior to version 1.5, Google Calendar feeds were defined differently.
This way will still continue to work until version 2.0, but it is deprecated:

	<script type='text/javascript'>

	$(document).ready(function() {
		$('#calendar').fullCalendar({
			events: $.fullCalendar.gcalFeed(
				"http://www.google.com/your_feed_url/"
			)
		});
	});
	
	</script>
	
Here is how you'd do the same thing, but with options:

	<script type='text/javascript'>

	$(document).ready(function() {
		$('#calendar').fullCalendar({
			events: $.fullCalendar.gcalFeed(
				"http://www.google.com/your_feed_url/",
				{
					className: 'gcal-event',           // an option!
					currentTimezone: 'America/Chicago' // an option!
				}
			)
		});
	
	});
	
	</script>
	
Prior to version 1.5, the only options that are available are `className`, `currentTimezone`, and `editable`.