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[i].className))
{
a.push(els[i]);
}
}
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')[0].value; // 2011-09-03
var startDateTime = getElementsByClassName('dr-time')[0].value; // 09:30
var endDateDay = getElementsByClassName('dr-date')[1].value; // 2011-09-03
var endDateTime = getElementsByClassName('dr-time')[1].value; // 17:45
alert(dateDiff(parseDate(startDateDay, startDateTime), parseDate(endDateDay, endDateTime)));
[/code]
The compressed bookmark version looks like this:
[/code][code lang="javascript"]
javascript:var%20getElementsByClassName=function(h,g){if(!g){g=document.getElementsByTagName("body")[0]}var%20b=[];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[d].className)){b.push(e[d])}}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")[0].value;var%20startDateTime=getElementsByClassName("dr-time")[0].value;var%20endDateDay=getElementsByClassName("dr-date")[1].value;var%20endDateTime=getElementsByClassName("dr-time")[1].value;alert(dateDiff(parseDate(startDateDay,startDateTime),parseDate(endDateDay,endDateTime)));
[/code]
</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!
