2011
09.04
09.04
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).
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:
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!
Thank you! It’s a nice little snippet of code. I had to change the date split to “/” because of how my dates are formatted and I have to do something about the multiple day events because that’s not working (probably because of my date format), but it works great as-is other than that. Thanks for posting!
only works (at least for me) if start and end time are both in the same half-day (same date and both am or both pm). still pretty cool though and i can probably fix that. thanks for the post!
There is a Chrome extension that will show event durations on Google Calendar: https://chrome.google.com/webstore/detail/event-durations-for-googl/elfoibhncineionfonglaickdliaikmj