"; } else { /* in Firefox/other */ elementToUpdate.textContent = elementUpdateTemplate.textContent + "\n"; } document.getElementById('jsSourceFinal').style.display = 'block'; } /** * Adds a leading zero to a single-digit number. Used for displaying dates. * * @param {int} num is the number to add a leading zero, if less than 10 */ function padNumber(num) { if (num <= 9) { return "0" + num; } return num; } /** * Determines the full calendarUrl based upon the calendarAddress * argument and calls loadCalendar with the calendarUrl value. * * @param {string} calendarAddress is the email-style address for the calendar */ function loadCalendarByAddress(calendarAddress) { var calendarUrl = 'http://www.google.com/calendar/feeds/' + calendarAddress + '/public/full'; loadCalendar(calendarUrl); } /** * Uses Google data JS client library to retrieve a calendar feed from the specified * URL. The feed is controlled by several query parameters and a callback * function is called to process the feed results. * * @param {string} calendarUrl is the URL for a public calendar feed */ function loadCalendar(calendarUrl) { var service = new google.gdata.calendar.CalendarService('gdata-js-client-samples-simple'); var query = new google.gdata.calendar.CalendarEventQuery(calendarUrl); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(10); service.getEventsFeed(query, listEvents, handleGDError); } /** * Callback function for the Google data JS client library to call when an error * occurs during the retrieval of the feed. Details available depend partly * on the web browser, but this shows a few basic examples. In the case of * a privileged environment using ClientLogin authentication, there may also * be an e.type attribute in some cases. * * @param {Error} e is an instance of an Error */ function handleGDError(e) { document.getElementById('jsSourceFinal').setAttribute('style', 'display:none'); if (e instanceof Error) { /* alert with the error line number, file and message */ alert('Error at line ' + e.lineNumber + ' in ' + e.fileName + '\n' + 'Message: ' + e.message); /* if available, output HTTP error code and status text */ if (e.cause) { var status = e.cause.status; var statusText = e.cause.statusText; alert('Root cause: HTTP error ' + status + ' with status text of: ' + statusText); } } else { alert(e.toString()); } } /** * Callback function for the Google data JS client library to call with a feed * of events retrieved. * * Creates an unordered list of events in a human-readable form. This list of * events is added into a div called 'events'. The title for the calendar is * placed in a div called 'calendarTitle' * * @param {json} feedRoot is the root of the feed, containing all entries */ function listEvents(feedRoot) { var entries = feedRoot.feed.getEntries(); var eventDiv = document.getElementById('events'); if (eventDiv.childNodes.length > 0) { eventDiv.removeChild(eventDiv.childNodes[0]); } /* create a new unordered list */ var ul = document.createElement('ul'); /* set the calendarTitle div with the name of the calendar */ document.getElementById('calendarTitle').innerHTML = "Calendar: " + feedRoot.feed.title.$t; /* loop through each event in the feed */ var len = entries.length; for (var i = 0; i < len; i++) { var entry = entries[i]; var title = entry.getTitle().getText(); var startDateTime = null; var startJSDate = null; var times = entry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); startJSDate = startDateTime.getDate(); } var entryLinkHref = null; if (entry.getHtmlLink() != null) { entryLinkHref = entry.getHtmlLink().getHref(); } var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate(); if (!startDateTime.isDateOnly()) { dateString += " " + startJSDate.getHours() + ":" + padNumber(startJSDate.getMinutes()); } var li = document.createElement('li'); /* if we have a link to the event, create an 'a' element */ if (entryLinkHref != null) { entryLink = document.createElement('a'); entryLink.setAttribute('href', entryLinkHref); entryLink.appendChild(document.createTextNode(title)); li.appendChild(entryLink); li.appendChild(document.createTextNode(' - ' + dateString)); } else { li.appendChild(document.createTextNode(title + ' - ' + dateString)); } /* append the list item onto the unordered list */ ul.appendChild(li); } eventDiv.appendChild(ul); } google.setOnLoadCallback(init); //-->
This sample demonstrates displaying a list of upcoming calendar events from a Google Calendar on a web page using the Google data JavaScript client library.
The list of events below is retrieved using the Google data JavaScript client library from the Google Developers Event Calendar.
You can change the feed address to retrieve the events from any public calendar. The feed address is either your e-mail address (for your primary calendar) or a special address for secondary calendars. This address can be found by following the instructions on the Calendar Help Center. Your calendar must be shared with the world.
An example calendar feed is:
http://www.google.com/calendar/feeds/<calendar address>/public/full
Preview Events:
Copy and Paste to your site:
You can copy and paste the following where you want the list of calendar events to
appear. Do not place it within the <head> ... </head>
section of your page unless you plan on relocating the <div id="calendarTitle">...</div> and <div id="events">...</div> element out of this chunk of code.