How to embed a Google Calendar?
Posted: Wed Feb 11, 2009 2:56 pm
How would I go about embedding Google Calendar into my CMS Made Simple site? It uses an iframe and when I try to enter the code Google generates for me, it doesn't work.
Actually, if were you I would ditch the iframe. It might not be working due to the doctype you are using since iframes are on their way out. Also, html objects are still not completely reliable since they are not cross-browser compatible and browsers are changing the way they handle embedded objects all the time.
Google supports a robust way of implementing their API into your site using javascript and AJAX. You can read all you want at http://code.google.com/apis/ajaxfeeds/documentation/.
To do this you'll need:
1. A Google API key (these are easy to get, http://code.google.com/apis/ajaxfeeds/signup.html)
2. A javascript source for parsing ISO-8601 dates.
3. And javascript to parse out your feed data from the calendar and inject it into your HTML.
The date parser I usually use is:
Code: Select all
Date.prototype.setISO8601 = function (string) {
var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
"(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
"(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
var d = string.match(new RegExp(regexp));
var offset = 0;
var date = new Date(d[1], 0, 1);
if (d[3]) { date.setMonth(d[3] - 1); }
if (d[5]) { date.setDate(d[5]); }
if (d[7]) { date.setHours(d[7]); }
if (d[8]) { date.setMinutes(d[8]); }
if (d[10]) { date.setSeconds(d[10]); }
if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
if (d[14]) {
offset = (Number(d[16]) * 60) + Number(d[17]);
offset *= ((d[15] == '-') ? 1 : -1);
}
offset -= date.getTimezoneOffset();
time = (Number(date) + (offset * 60 * 1000));
this.setTime(Number(time));
}Code: Select all
var date = new Date();
date.setISO8601("2005-03-26T19:51:34Z");Then, for your feed parsing and final html injection you can use this code modified to your needs:
Code: Select all
google.load("feeds", "1");
function initialize() {
// Change the following line to the correct Feed URL
var feed = new google.feeds.Feed("~~~URL HERE~~~");
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
// Default value displays only 4 feed entries; must set to be different
feed.setNumEntries(10);
feed.load(function(result) {
var container = document.getElementById("~~~HTML Container~~~");
if (!result.error) {
var whenstring = '';
var entries = google.feeds.getElementsByTagNameNS(result.xmlDocument, "http://www.w3.org/2005/Atom", "entry");
var ul = document.createElement("ul");
for (var i = 0; i < entries.length; i++) {
var titleElement = google.feeds.getElementsByTagNameNS(entries[i], "http://www.w3.org/2005/Atom", "title")[0];
var title = titleElement.firstChild.nodeValue;
var mylinkElement = google.feeds.getElementsByTagNameNS(entries[i], "http://www.w3.org/2005/Atom", "link")[0];
var mylink = mylinkElement.getAttribute('href');
// change the link for adding the calendar to make it so that it adds to the user's calendar
var newlink = mylink.replace("calendar/event", "calendar/hosted/~~~Google User Account~~~/event");
var whenElement = google.feeds.getElementsByTagNameNS(entries[i], "http://schemas.google.com/g/2005", "when")[0];
var starttime = whenElement.getAttribute('startTime');
var endtime = whenElement.getAttribute('endTime');
var startdate = new Date();
startdate.setISO8601(starttime);
var enddate = new Date();
enddate.setISO8601(endtime);
var startstring = (startdate.getMonth() + 1) + '/' + (startdate.getDate() + 1) + '/' + startdate.getFullYear();
var endstring = (enddate.getMonth() + 1) + '/' + (enddate.getDate() + 1) + '/' + enddate.getFullYear();
if (startstring == endstring) {
whenstring = ' (' + startstring + ')';
} else {
whenstring = ' (' + 'starting: ' + startstring + ' ' + 'ending: ' + endstring + ')';
}
// embed the event date in a span element with class="when"
var spanwhen = document.createElement("span");
spanwhen.setAttribute("class", "when");
spanwhen.appendChild(document.createTextNode(whenstring));
//each feed entry is embedded in an HTML li element
var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href", newlink);
a.setAttribute("target", "_blank");
a.appendChild(document.createTextNode(title));
li.appendChild(a);
li.appendChild(spanwhen);
ul.appendChild(li);
}
container.appendChild(ul);
}
});
}
google.setOnLoadCallback(initialize);In your head section you'll include Google's javacript file found at: http://www.google.com/jsapi?key={YOUR API KEY} ,
your parser code (above) and then your feed parsing and injection code (also above). You can do this by placing the tags in the metadata field of your page.
Also note that your calendar feed URL can take different params based on what you want to receive. (Such as ...?orderby=starttime&sortorder=ascending&futureevents=true&singleevents=true. All of these can be found at http://code.google.com/apis/calendar/docs/2.0/reference.html
I hope this helps! It's worked for me thus far.