How to embed a Google Calendar?

[tmar89]

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.

[180michael]

Hi tmar,

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));
  }

To use this just add a new Date object and then invoke the parsing method like so:

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);

Again, this is just a good starting point to get you to where you need. You can then use CSS to style the output.

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.

[spcherub]

Can you View Source on the resulting page and see if the iframe code is intact (as you put it into the page)? Have you tried the iframe code in a static page to see if it works there?

(Also I've often put the custom html (iframe) into a GCB and used that in the page instead - you can try that)

S

[JeremyBASS]

hello,

did you wrap it in {literal}  some code here would help us help you...

here is a test on I did
http://www.corbensproducts.com/info/calendar.html

and all I put in...

{literal}
{/literal}

[Darwin Web Design]

Also unclick the 'Turn wyswig editor on/off' box at the bottom of the editor (so wysiwig is OFF) before pasting your google iframe code, and this will work!