Here’s a method for integrating google calendar into your web page without using google’s standard iframe embed. Instead, it uses javascript to turn the data feed into whatever html you want, like this:
This is entirely based on Kevin Deldycke’s post on July 12, 2012 with my own extensions.
First, you need access to a google calendar feed, such as this one:
https://www.google.com/calendar/feeds/ucsd.psyc.events@gmail.com/public/basic
We add some additional parameters to sort on date and filter to 3 future events:
Now we throw on a final parameter to get the data in json format, so our javascript can use it:
(The JSON will work fine as is, but if you’d like to tidy it up in order to inspect it, then copy and paste it into jsbeautifier.org. Don’t forget to flattr them for such a nifty tool. The clean version looks something like this: example-json-data.js)
Now we need a simple HTML template to start with: (example-1.html)
<body>
<ul id="gcal-events">
<li>No events listed</li>
</ul>
</body>
Once the HTML is loaded by the browser, the JavaScript is going to grab the google data and pop it into the list. So we’ll add jQuery support to our page and make sure we’ve got a working function placeholder: (example-2.html)
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript'>
function GCalEvents() {
alert("If you see this alert, JavaScript is working and ready for some calendar data.");
}
</script>
</head>
<body>
<ul id="gcal-events">
<li>No events listed</li>
</ul>
<script type="text/javascript" charset="utf-8">
$(document).ready(GCalEvents());
</script>
</body>
Now we’ll add the JSON call to the JavaScript function with the simplest content insertion possible: (example-3.html)
function GCalEvents() {
// url of json data
// here, instead of pointing to the google calendar link that you'll want to use,
// I'm pointing to a static file so that this example doesn't break in the future even
// if the calendar it was based upon changes.
// you'll want to use a link in the form of:
// http://www.google.com/calendar/feeds/your-calendar@gmail.com/public/full?orderby=starttime&sortorder=ascending&max-results=3&futureevents=true&alt=json
var calendar_json_url = "http://mikeclaffey.com/sandbox/gcal-embed/example-json-data.js"
// Get list of upcoming events formatted in JSON
jQuery.getJSON(calendar_json_url, function(data){
// Parse and render each event
jQuery.each(data.feed.entry, function(i, item){
// Render the event
jQuery("#gcal-events li").last().after( "<li>" + item.title.$t + "</li>" );
});
});
}
We’ll do the following to wrap up:
- Hide that “No events listed” item.
- Add in more fields and advanced formatting (see example-json-data.js for available fields)
- Reference Datejs so we can do some nice date formatting
- Pass the calendar address as a parameter to the function, so that the function is flexible enough for multiple calendars.
- Move the GCalEvents() function to a separate GCalEvents.js file
The final version is example-4.html
From here, you’ll want to point to your own calendar, add/modify fields and use some CSS to spruce up your formatting. Good luck!