calendar.js

/* Loads the Google data JavaScript client library */
google.load("gdata", "1");

function summary(str, maxlen) {
  if (str.length > maxlen)
    return str.substring(0, maxlen-1) + "...";
  else
    return str
}

function init() {
  // init the Google data JS client library with an error handler
  google.gdata.client.init(handleGDError);
  // load the code.google.com developer calendar
  loadDeveloperCalendar();
}

/**
 * Loads the Google Developers Event Calendar
 */
function loadDeveloperCalendar() {
  loadCalendarByAddress('e56f43aa4mf13euil2lpq5odoo@group.calendar.google.com');
}

/**
 * Adds a leading zero to a single-digit number.  Used for displaying dates.
 */
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(3);

  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('dl');
  /* set the calendarTitle div with the name of the calendar, if such a div exists */
  var titleDiv = document.getElementById('calendarTitle')
  if (titleDiv != null)
      titleDiv.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 contents = summary(entry.getContent().getText(), 150);
    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() + "/" + startJSDate.getFullYear();
    if (!startDateTime.isDateOnly()) {
      dateString += " " + startJSDate.getHours() + ":" + 
          padNumber(startJSDate.getMinutes());
    }
    var li = document.createElement('dt');

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

    var dd = document.createElement('dd');
    dd.appendChild(document.createTextNode(contents));
    ul.appendChild(dd);
  }
  eventDiv.appendChild(ul);
}

google.setOnLoadCallback(init);

index.shtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>



	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="author" content="The Chicago GNU/Linux Users Group">
	<meta name="keywords" content="chicago linux, chicago lug, chicago glug">
	<meta name="description" content="The Chicago GNU/Linux Users Group">
	<title>Chicago Linux</title>
	<link rel="stylesheet" type="text/css" title="scuro" href="Chicago%20Linux_files/scuro.css">

        <!-- For Chiglug Google Calendar  -->
	<style type="text/css">
		.calendar {
			padding: 5px;
			background: #bebebe;
		}
		.contact {
			padding: 5px;
			background: #bebebe;
		}
      em {
         font-weight:bold;
      }
      .news {
         clear:both;
         padding-bottom: 10px;
         margin-bottom: 5px;
         border-bottom: solid 1px #aaa;
      }
         .news .author {
            font-size: 10px;
            color: #999;
         }
	</style>

        <!-- For Chiglug Google Calendar  -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript" src="calendar.js"></script>

</head><body>

<div id="wrapper">
<div id="wrapper2">

   <!-- //////////////////////////////////////////////////////////////////////

        HEADER

        -->

	<div id="header">
		<div class="left">
		<div class="right">
			<span class="flt2"><img alt="Chicago Skyline" src="Chicago%20Linux_files/skyline.png"></span>
			<span class="flt"><a href="http://www.chicagolug.org/"><img src="Chicago%20Linux_files/logo.png" alt="Chicago GLUG penguin" border="0"></a><br></span>
			<h1>Chicago GNU/Linux</h1>
			<div class="subt">A GNU/Linux Users Group based in downtown Chicago, IL.</div>
		</div>
		</div>
	</div> <!-- id="header" -->


   <!-- //////////////////////////////////////////////////////////////////////

        NAVIGATION

        -->

	<div id="nav">
		<ul>
			<li><a href="http://www.chicagolug.org/">Main Page</a></li>
			<li><a href="http://www.chicagolug.org/wiki/ChicagoLinux:About">About Us</a></li>
			<li><a href="http://www.chicagolug.org/wiki/Meetings">Meetings</a></li>
			<li><a href="http://www.chicagolug.org/wiki/Articles">Articles</a></li>
			<li><a href="http://www.chicagolug.org/lists/">Lists</a></li>
			<li><a href="http://www.chicagolug.org/planet/">Planet</a></li>
		</ul>
	</div>

	<div id="content">
		
	<table border="0" cellpadding="5" cellspacing="0">
	   <tbody>
	      <tr>
	         <td style="width: 50%; vertical-align: top; text-align: left;">

               <h2>Calendar</h2>
                
               <!-- if you want to show the title, uncomment the following: -->
               <!-- <div id="calendarTitle" style="background-color: #ccccff"></div>  -->

               <a href="http://www.google.com/calendar/embed?src=ZTU2ZjQzYWE0bWYxM2V1aWwybHBxNW9kb29AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ">
               <b>View Full Calendar</b></a>
               <div id="events" class="calendar"></div> <!-- Events get generated by javascript in this div -->
               <br>
               <!-- //////////////////////////////////////////////////////////////////////
         
                    NEWS
                    
                    when you remove things, please put them in the news
                    archives. http://www.chiglug.org/wiki/News

                    -->
               <h2>Group News</h2>
                  <div class="news">
                   <strong>Videos Hosted on Blip.tv</strong>
                   <br>
                   <span class="author">Posted: Tue Oct 28th 15:46:53 CDT 2008 by Kevin Harriss</span> 
                   <br>

                   We've moved our videos from being hosted on our server to being hosted by <a href="http://blip.tv/">Blip.tv</a>.  This allows many benefits for viewers such as Media-RSS feeds that can be added in your feed reader or <a href="http://www.getmiro.com/">Miro</a>.  Blip also allows us to upload the videos in Ogg format.  Our Blip.tv channel can be found <a href="http://chiglug.blip.tv/">here</a> and a feed to our channel is <a href="http://chiglug.blip.tv/rss">here</a>.
                  <div style="clear: both;"><!-- jump border down --></div>
                  </div>
                  
                  <div class="news">
                   <strong>Meeting Format Changed</strong>
                   <br>
                   <span class="author">Posted: Tue Oct 28th 15:46:53 CDT 2008 by Kevin Harriss</span> 
                   <br>

                   <!--<a href="/videos/"><img alt="videos screenshot" src="assets/images/videos.png" style="vertical-align: top; float: left; padding-right: 5px;" /></a>-->
The group has decided to change the format of our meetings a little
bit. We will still meet bi-monthly on the first and third Saturday of
the month. However, instead of both meetings being only presentations
we have decided that the first meeting of the month will be
presentations. The second meeting of the month will be a more hands-on
activity such as code reviews, bug/packaging jams, coding projects,
discussions or panel talks. <div style="clear: both;"><!-- jump border down --></div>
                  </div>
                  
	         </td>
   

            <!-- //////////////////////////////////////////////////////////////////////
         
                 MEETING DETAILS
         
                 -->

	         <td style="vertical-align: top; text-align: left;">
            
               
               <!-- Please use SSI to expire your info on the "day after".
                    Keep in mind mod_include doesn't support nested conditionals.
                    For reference, April 21, 2007 is specified as 20070421 -->
               
            	<h2>Meeting Details</h2>
            	The next meeting:
            	<br><br>
               
                  <!-- Always keep this option: -->
                  <em>TBD</em>
               
            
            	<br><br>
               Location:<br>
               
                  TBD
               

            	<br><br>
            	Activity:
               
                  <ul>
                     <li>TBD</li>
                  </ul>
               
                  <div style="text-align: right;"><a href="http://www.chicagolug.org/wiki/Meetings"><i>More Info</i></a></div>
                  <div style="text-align: right;"><a href="http://www.chicagolug.org/wiki/Meeting_Archives"><i>Meeting Archives...</i></a></div>


                  <!-- //////////////////////////////////////////////////////////////////////
         
                       ABOUT US
         
                     -->

            
               	<h2 style="padding-top: 0px;">About Us</h2>
We are a motley crew of computer enthusiasts, professionals, and
software hackers who share a passion for learning about and passing on
our knowledge of Linux and Open Source Software. Our doors are always
open to any and all who are curious and want to discover how to make
computing fun again. Membership is completely free and open to all. <br><br>

                  <!-- //////////////////////////////////////////////////////////////////////
         
                       CONTACT
         
                       -->
               
                  <div class="contact">
               
                  <b>If you need to contact us:</b>
               
                  <table border="0" cellpadding="3" cellspacing="0">
                     <tbody>
               
                        <tr>
                           <td>
                              Board
                           </td>
                           <td>
                              <a href="http://www.chicagolug.org/wiki/Board_of_Directors">Board</a> &lt;board # chicagolug.org&gt;
                           </td>
                        </tr>
                        <tr>
                           <td>
                              President
                           </td>
                           <td>
                              <a href="http://www.chicagolug.org/wiki/User:Kharriss">Kevin Harriss</a> &lt;kharriss # chicagolug.org&gt;
                           </td>
                        </tr>
                        <tr>
                           <td>
                              Webmaster
                           </td>
                           <td>
                              <a href="http://www.chicagolug.org/wiki/User:Kdreyer">Ken Dreyer</a> &lt;kdreyer # chicagolug.org&gt; <br>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              IRC Channel
                           </td>
                           <td>
                              <a href="irc://irc.oftc.net/#chiglug">#chiglug on oftc</a>
                           </td>
                        </tr>
               
                     </tbody>
                  </table>
               
                  </div>


               </td>
            </tr>
         </tbody>
   </table>
		
	</div> <!-- id="content"  -->

	<div id="footer">
		<div class="left">
		   <div class="right">
         <!-- PASS -->
		   </div>
		</div>
	</div>

</div> <!-- id="wrapper"  -->
</div> <!-- id="wrapper2" -->

<div class="poweredby">
	<!-- PASS -->
</div>

<!-- EOF -->

</body></html>