Cómo integrar Google Calendar en tu sitio web utilizando AJAX

Una de las características que me parece interesante en el calendario de Google es la posibilidad de crear calendarios compartidos, pero también la disponibilidad de su calendario como XML o ICAL lo que es un privado o público. Tan pronto como hemos XML de nuestro calendario disponible me preguntaba ¿por qué no integrar Google Calendar en el sitio web directamente. Por ejemplo, una comunidad que utilice el servicio para la gestión de sus eventos, o para mostrar sus futuros viajes en su blog?

En primer lugar, me saltó la cruz-dominio AJAX historia desde que estoy leyendo los datos de servidor de Google, simplemente por escrito un pequeño script PHP que leer los feeds y vuelva de nuevo. Luego usé mi viejo AJAX RSS Reader, Google Calendar no entregara RSS, pero es sólo el XML, no es una gran cosa, sólo hay algunos cambios sobre el código de trabajo el que sea.

Así que para empezar he creado un calendario compartido que he llamado “AJAX Eventos”, he añadido por la era de conferencias y seminarios, pero todo esto es en mayo de 2006 y no sé cómo hacer que los canales de retorno un período más largo. Compartida o no compartida, ya que estoy usando un script PHP para leer el calendario de Google, se puede usar la dirección privada que le permitirá acceder a sus eventos se alimenta directamente desde el lector. A continuación, sólo copia la URL para utilizarla en el script de abajo eventrss.php

[cc lang="php"]
$calendarURL = ‘http://www.google.com/calendar/feeds/’;
// Nothing else to edit
$feed = file_get_contents($calendarURL);
header(‘Content-type: text/xml’);
echo $feed;
[/cc]

En el lado de javascript son los únicos cambios en la alimentación y el analizador de cómo manejar los elementos devueltos en el documento XML. He añadido también algunos cambios más, como una muestra de “no acontecimientos” mensaje cuando la agenda está vacía.

[cc lang="javascript"]
Parsing Feeds
var node = RSSRequestObject.responseXML.documentElement;
// Get the calendar title
var title = node.getElementsByTagName(‘title’).item(0).firstChild.data;
content = ‘

‘+title+’

‘;
// Browse events
var items = node.getElementsByTagName(‘entry’);
if (items.length == 0) {
content += ‘

• No events

‘;
} else {
content += ‘

‘;
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 = ‘['+items[n].getElementsByTagName(‘published’).item(0).firstChild.data+’] ‘;
}
catch (e)
{
var itemPubDate = ”;
}

content += ‘

• ‘+itemPubDate+’

‘+itemTitle+’‘;
}
content += ‘

‘;
}
[/cc]

He probado el script con IE7 y Firefox 1.5.0.2, también debería funcionar sin problemas en otros navegadores. Así una pequeña función en XML y que está abierta al mundo, sólo tiene que utilizar su imaginación para personalizar el css y encontrar la forma en que puede utilizar el calendario.