Home » Tutorials » Howto integrate Google Calendar in your website using AJAX

Howto integrate Google Calendar in your website using AJAX

One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it's a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website. For example a community that use the service to manage their events, or to display your future trips in your blog ?

First of all I jumped the cross-domain AJAX story since I'm reading data from Google server, I simply written a small PHP script which will read the feeds and resend it again. Then I used my old AJAX RSS Reader, Google calendar don't deliver RSS but it's just XML, it's not a big deal there is just few changes on the code the make it working.

So to get started I created a shared calendar that I called "AJAX Events", I have added by the was conferences and seminars but it's all happen on may 2006 and I don't know how to make feeds return a longer period. Shared or not shared, since I'm using a PHP script to read from Google calendar you can even use the Private Address which will give you access to your events feeds directly from the reader. Then just copy the url to use it in the script below eventrss.php

   1. // Change this with your Google calendar feed
   2. $calendarURL = 'http://www.google.com/calendar/feeds/';
   3.
   4. // Nothing else to edit
   5. $feed = file_get_contents($calendarURL);
   6. header('Content-type: text/xml');
   7. echo $feed;

// Change this with your Google calendar feed $calendarURL = 'http://www.google.com/calendar/feeds/'; // Nothing else to edit $feed = file_get_contents($calendarURL); header('Content-type: text/xml'); echo $feed;

In the javascript side the only changes are in the feed parser and how to handle the elements returned in the XML document. I have added also some more changes like displaying a "no events" message when the calendar is empty.

   1. // Parsing Feeds
   2. var node = RSSRequestObject.responseXML.documentElement;
   3.
   4. // Get the calendar title
   5. var title = node.getElementsByTagName('title').item(0).firstChild.data;
   6.
   7. content = '<div class="channeltitle">'+title+'</div>';
   8.
   9. // Browse events
10. var items = node.getElementsByTagName('entry');
11. if (items.length == 0) {
12.     content += '<ul><li><div class=error>No events</div></li></ul>';
13. } else {
14.     content += '<ul>';
15.     for (var n=items.length-1; n >= 0; n--)
16.     {
17.         var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;
18.         var Summary = items[n].getElementsByTagName('summary').item(0).firstChild.data;
19.         var itemLink = items[n].getElementsByTagName('id').item(0).firstChild.data;
20.         try
21.         {
22.             var itemPubDate = '<font color=gray>['+items[n].getElementsByTagName('published').item(0).firstChild.data+'] ';
23.         }
24.         catch (e)
25.         {
26.             var itemPubDate = '';
27.         }
28.
29.
30.         content += '<li>'+itemPubDate+'</font><a href="'+itemLink+'">'+itemTitle+'</a></li>';
31.     }
32.
33.
34.     content += '</ul>';
35. }

// Parsing Feeds var node = RSSRequestObject.responseXML.documentElement; // Get the calendar title var title = node.getElementsByTagName('title').item(0).firstChild.data; content = '<div class="channeltitle">'+title+'</div>'; // Browse events var items = node.getElementsByTagName('entry'); if (items.length == 0) { content += '<ul><li><div class=error>No events</div></li></ul>'; } else { content += '<ul>'; for (var n=items.length-1; n >= 0; n--) { var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data; var Summary = items[n].getElementsByTagName('summary').item(0).firstChild.data; var itemLink = items[n].getElementsByTagName('id').item(0).firstChild.data; try { var itemPubDate = '<font color=gray>['+items[n].getElementsByTagName('published').item(0).firstChild.data+'] '; } catch (e) { var itemPubDate = ''; } content += '<li>'+itemPubDate+'</font><a href="'+itemLink+'">'+itemTitle+'</a></li>'; } content += '</ul>'; }

I have tested the script with Firefox 1.5.0.2 and IE7, it should work also without problems on other browsers. Well a small XML feature and you are open to the world, just use your imagination to personalize the css and find how you can use your calendar.

source: phpmagazine