Publishing System Settings Logout Login Register
Intergrating Google Calender into your own website, using AJAX
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Add to Favorites
Posted on March 11th, 2010

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 feed2. $calendarURL = '';3.4. // Nothing else to edit5. $feed = file_get_contents($calendarURL);6. header('Content-type: text/xml');7. 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.

// Parsing Feeds
var node = RSSRequestObject.responseXML.documentElement; 

// Get the calendar title
var title = node.getElementsByTagName('title').item(0);

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);
var Summary = items[n].getElementsByTagName('summary').item(0);
var itemLink = items[n].getElementsByTagName('id').item(0);
var itemPubDate = '<font color=gray>['+items[n].getElementsByTagName('published').item(0)'] ';
catch (e) 
var itemPubDate = '';

content += '<li>'+itemPubDate+'</font><a href="'+itemLink+'">'+itemTitle+'</a></li>';

	content += '</ul>';

And that should be working! Thanks for reading!

Dig this tutorial?
Thank the author by sending him a few P2L credits!


This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top