ter Smitten's

For a long time I wanted Google Calendar to display the duration of events (in hours). Unfortunately this feature is not supported (as far as I know), not even by Labs. So I created a little piece of JavaScript which can be executed via a bookmark (at an event page with a start and end date).

Google Calendar - Event page

This is how the snippet look like:

// select elements by classname
var getElementsByClassName = function (classname, node) 
{
  if(!node) 
  {
    node = document.getElementsByTagName("body")[0];
  }
  var a = [];
  var re = new RegExp('\\b' + classname + '\\b');
  var els = node.getElementsByTagName("*");
  for(var i = 0, j = els.length; i < j; i++)
  {
    if(re.test(els&#91;i&#93;.className))
    {
      a.push(els&#91;i&#93;);
    }
  }
  return a;
};

// parse a date based on a dateDay field (e.g. 2011-09-03) and a dateTime field (e.g. 09:30)
var parseDate = function (dateDay, dateTime)
{
  var dateDay = dateDay.split('-');
  var dateTime = dateTime.split(':');
  var fullDate = dateDay.concat(dateTime).map( function( num ) { return parseInt( num, 10 ) } );
  
  return new Date(fullDate.shift(), fullDate.shift(), fullDate.shift(), fullDate.shift(), fullDate.shift());
};

// calculate the difference between two dates in hours
var dateDiff = function (startDate, endDate)
{
  var diff = endDate - startDate;
  return diff / ( 1000 * 60 * 60 );
};

var startDateDay = getElementsByClassName('dr-date')&#91;0&#93;.value;  // 2011-09-03
var startDateTime = getElementsByClassName('dr-time')&#91;0&#93;.value; // 09:30
var endDateDay = getElementsByClassName('dr-date')&#91;1&#93;.value;    // 2011-09-03
var endDateTime = getElementsByClassName('dr-time')&#91;1&#93;.value;   // 17:45

alert(dateDiff(parseDate(startDateDay, startDateTime), parseDate(endDateDay, endDateTime)));
&#91;/code&#93;

The compressed bookmark version looks like this:

&#91;/code&#93;&#91;code lang="javascript"&#93;
javascript:var%20getElementsByClassName=function(h,g){if(!g){g=document.getElementsByTagName("body")&#91;0&#93;}var%20b=&#91;&#93;;var%20f=new%20RegExp("\\b"+h+"\\b");var%20e=g.getElementsByTagName("*");for(var%20d=0,c=e.length;d<c ;d++){if(f.test(e&#91;d&#93;.className)){b.push(e&#91;d&#93;)}}return%20b};var%20parseDate=function(a,b){var%20a=a.split("-");var%20b=b.split(":");var%20c=a.concat(b).map(function(d){return%20parseInt(d,10)});return%20new%20Date(c.shift(),c.shift(),c.shift(),c.shift(),c.shift())};var%20dateDiff=function(a,c){var%20b=c-a;return%20b/(1000*60*60)};var%20startDateDay=getElementsByClassName("dr-date")&#91;0&#93;.value;var%20startDateTime=getElementsByClassName("dr-time")&#91;0&#93;.value;var%20endDateDay=getElementsByClassName("dr-date")&#91;1&#93;.value;var%20endDateTime=getElementsByClassName("dr-time")&#91;1&#93;.value;alert(dateDiff(parseDate(startDateDay,startDateTime),parseDate(endDateDay,endDateTime)));
&#91;/code&#93;
</c>

When clicking the bookmark you’ll see an alert box with the duration in hours:

Google Calendar - Event duration

In the future I will probably create something more fancy with the “Google Calendar APIs and Tools” but for now this is it. Have fun!