From a408d657fbb8d23de15b3b131597dc673e2efabf Mon Sep 17 00:00:00 2001
From: Florian Riou <riouf.info@gmail.com>
Date: Sat, 1 Sep 2018 10:38:50 +0200
Subject: [PATCH 1/5] Small scope issue fix #44

Fix header's/time's content width and scrollbar
---
 app/demo.html               | 2 +-
 app/scripts/plugin.js       | 2 +-
 app/styles/plugin.sass      | 4 ++--
 dist/demo.html              | 2 +-
 dist/scripts/timetable.js   | 2 +-
 dist/styles/timetablejs.css | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/demo.html b/app/demo.html
index 5f68f81..a0b5328 100644
--- a/app/demo.html
+++ b/app/demo.html
@@ -29,7 +29,7 @@ <h1>Timetable.js demo</h1>
     <script>
       var timetable = new Timetable();
 
-      timetable.setScope(9,3)
+      timetable.setScope(9,3);
 
       timetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
 
diff --git a/app/scripts/plugin.js b/app/scripts/plugin.js
index d784dc4..c289e46 100644
--- a/app/scripts/plugin.js
+++ b/app/scripts/plugin.js
@@ -136,7 +136,7 @@ Timetable.Renderer = function(tt) {
 				var timeNode = sectionNode.appendChild(document.createElement('time'));
         timeNode.className = 'syncscroll';
         timeNode.setAttribute('name', 'scrollheader');
-        var width = headerNode.scrollWidth + 'px';
+        var width = headerNode.firstChild.offsetWidth + 'px';
 				appendTimeRows(timeNode, width);
 			}
 			function appendColumnHeaders(node) {
diff --git a/app/styles/plugin.sass b/app/styles/plugin.sass
index 780b83c..71c3b26 100644
--- a/app/styles/plugin.sass
+++ b/app/styles/plugin.sass
@@ -118,7 +118,7 @@ $timetable-background-color: white !default
 		time
 			display: block
 			width: 100%
-			overflow-x: scroll
+			overflow-x: auto
 			-webkit-overflow-scrolling: touch
 
 		> header
@@ -131,7 +131,7 @@ $timetable-background-color: white !default
 			transform-style: preserve-3d
 
 			ul
-				display: flex
+				display: inline-flex
 				height: $timetable-hour-row-height
 				align-items: center
 
diff --git a/dist/demo.html b/dist/demo.html
index ecea63f..519f241 100644
--- a/dist/demo.html
+++ b/dist/demo.html
@@ -22,7 +22,7 @@ <h1>Timetable.js demo</h1>
     <script>
       var timetable = new Timetable();
 
-      timetable.setScope(9,3)
+      timetable.setScope(9,3);
 
       timetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
 
diff --git a/dist/scripts/timetable.js b/dist/scripts/timetable.js
index f74c431..91e772e 100644
--- a/dist/scripts/timetable.js
+++ b/dist/scripts/timetable.js
@@ -1 +1 @@
-!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.scrollWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
+!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
diff --git a/dist/styles/timetablejs.css b/dist/styles/timetablejs.css
index 537460f..9853640 100644
--- a/dist/styles/timetablejs.css
+++ b/dist/styles/timetablejs.css
@@ -1 +1 @@
-.timetable{display:flex;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}.timetable *{box-sizing:inherit}.timetable li,.timetable ul{list-style-type:none;margin:0}.timetable li,.timetable ul{padding:0}.timetable>aside{flex:none;max-width:30%;padding:0!important;margin-top:46px;border-right:5px solid transparent;position:relative}.timetable>aside li{padding:0 15px;background-color:#efefef;line-height:46px}.timetable>aside li:not(:last-of-type){border-bottom:1px solid #fff}.timetable>aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.timetable>aside:before{content:"";display:block;background-color:#fff;height:46px;position:relative;margin-top:-46px;top:0}.timetable aside li,.timetable time li{height:46px}.timetable>section{flex:3 0 auto;width:0;padding:0!important}.timetable>section time{display:block;width:100%;overflow-x:scroll;-webkit-overflow-scrolling:touch}.timetable>section>header{position:relative;top:0;z-index:3;width:100%;overflow:hidden;background-color:#fff;transform-style:preserve-3d}.timetable>section>header ul{display:flex;height:46px;align-items:center}.timetable>section>header li{flex:none;display:block;position:relative;width:96px}.timetable>section>header li .time-label{display:block;position:absolute;left:0}.timetable>section>header li:not(:first-of-type) .time-label{transform:translateX(-50%)}.timetable>section>header li:last-of-type{width:0}.timetable>section>header li:last-of-type .time-label{transform:translateX(-100%)}.timetable ul.room-timeline{border-left:none;display:flex;flex-direction:column;align-items:stretch}.timetable ul.room-timeline li{position:relative;background-color:#f4f4f4;height:46px}.timetable ul.room-timeline li:nth-of-type(odd){background-color:#fdfdfd}.timetable ul.room-timeline li:first-of-type{border-top:1px solid #e5e5e5}.timetable ul.room-timeline li:last-of-type{border-bottom:1px solid #e5e5e5}.timetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.timetable ul.room-timeline li:first-child .time-entry{height:44px}.timetable ul.room-timeline li:after,.timetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.timetable ul.room-timeline li:before{background-image:linear-gradient(90deg,#e5e5e5 1px,transparent 0);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(90deg,#e5e5e5,#e5e5e5 1px,#f4f4f4 0,#f4f4f4 2px,#e5e5e5 0,#e5e5e5 3px,transparent 0,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#ec6a5e;transition:background-color .2s;height:45px;display:block;position:absolute;z-index:2;padding:0 10px;white-space:normal;overflow:hidden;color:#fff;border:1px solid #e32c1b;transform-style:preserve-3d}.timetable .time-entry small{position:relative;top:50%;transform:translateY(-50%);display:block}.timetable .time-entry:hover{background-color:#e74030}
\ No newline at end of file
+.timetable{display:flex;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}.timetable *{box-sizing:inherit}.timetable li,.timetable ul{list-style-type:none;margin:0}.timetable li,.timetable ul{padding:0}.timetable>aside{flex:none;max-width:30%;padding:0!important;margin-top:46px;border-right:5px solid transparent;position:relative}.timetable>aside li{padding:0 15px;background-color:#efefef;line-height:46px}.timetable>aside li:not(:last-of-type){border-bottom:1px solid #fff}.timetable>aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.timetable>aside:before{content:"";display:block;background-color:#fff;height:46px;position:relative;margin-top:-46px;top:0}.timetable aside li,.timetable time li{height:46px}.timetable>section{flex:3 0 auto;width:0;padding:0!important}.timetable>section time{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.timetable>section>header{position:relative;top:0;z-index:3;width:100%;overflow:hidden;background-color:#fff;transform-style:preserve-3d}.timetable>section>header ul{display:inline-flex;height:46px;align-items:center}.timetable>section>header li{flex:none;display:block;position:relative;width:96px}.timetable>section>header li .time-label{display:block;position:absolute;left:0}.timetable>section>header li:not(:first-of-type) .time-label{transform:translateX(-50%)}.timetable>section>header li:last-of-type{width:0}.timetable>section>header li:last-of-type .time-label{transform:translateX(-100%)}.timetable ul.room-timeline{border-left:none;display:flex;flex-direction:column;align-items:stretch}.timetable ul.room-timeline li{position:relative;background-color:#f4f4f4;height:46px}.timetable ul.room-timeline li:nth-of-type(odd){background-color:#fdfdfd}.timetable ul.room-timeline li:first-of-type{border-top:1px solid #e5e5e5}.timetable ul.room-timeline li:last-of-type{border-bottom:1px solid #e5e5e5}.timetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.timetable ul.room-timeline li:first-child .time-entry{height:44px}.timetable ul.room-timeline li:after,.timetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.timetable ul.room-timeline li:before{background-image:linear-gradient(90deg,#e5e5e5 1px,transparent 0);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(90deg,#e5e5e5,#e5e5e5 1px,#f4f4f4 0,#f4f4f4 2px,#e5e5e5 0,#e5e5e5 3px,transparent 0,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#ec6a5e;transition:background-color .2s;height:45px;display:block;position:absolute;z-index:2;padding:0 10px;white-space:normal;overflow:hidden;color:#fff;border:1px solid #e32c1b;transform-style:preserve-3d}.timetable .time-entry small{position:relative;top:50%;transform:translateY(-50%);display:block}.timetable .time-entry:hover{background-color:#e74030}
\ No newline at end of file

From 6be701ff0c3cb322d2fba1419f26a6781941d0a7 Mon Sep 17 00:00:00 2001
From: Florian Riou <riouf.info@gmail.com>
Date: Mon, 3 Sep 2018 12:48:32 +0200
Subject: [PATCH 2/5] Hours (start, end) precisely displayed on mouse hover

---
 app/scripts/plugin.js       |  8 ++++++--
 app/styles/plugin.sass      | 11 ++++++++++-
 dist/scripts/timetable.js   |  2 +-
 dist/styles/timetablejs.css |  2 +-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/scripts/plugin.js b/app/scripts/plugin.js
index c289e46..fc69022 100644
--- a/app/scripts/plugin.js
+++ b/app/scripts/plugin.js
@@ -194,7 +194,10 @@ Timetable.Renderer = function(tt) {
 
 				var elementType = hasURL ? 'a' : 'span';
 				var eventNode = node.appendChild(document.createElement(elementType));
-				var smallNode = eventNode.appendChild(document.createElement('small'));
+				var nameNode = eventNode.appendChild(document.createElement('small'));
+				nameNode.classList.add('name');
+                var hourNode = eventNode.appendChild(document.createElement('small'));
+                hourNode.classList.add('hours');
 				eventNode.title = event.name;
 
 				if (hasURL) {
@@ -216,7 +219,8 @@ Timetable.Renderer = function(tt) {
 				eventNode.className = hasAdditionalClass ? 'time-entry ' + event.options.class : 'time-entry';
 				eventNode.style.width = computeEventBlockWidth(event);
 				eventNode.style.left = computeEventBlockOffset(event);
-				smallNode.textContent = event.name;
+                nameNode.textContent = event.name;
+                hourNode.textContent = ('0' + event.startDate.getHours()).substr(-2) + ':' + ('0' + event.startDate.getMinutes()).substr(-2) + ' - ' + ('0' + event.endDate.getHours()).substr(-2) + ':' + ('0' + event.endDate.getMinutes()).substr(-2);
 			}
 			function computeEventBlockWidth(event) {
 				var start = event.startDate;
diff --git a/app/styles/plugin.sass b/app/styles/plugin.sass
index 71c3b26..526756d 100644
--- a/app/styles/plugin.sass
+++ b/app/styles/plugin.sass
@@ -201,10 +201,19 @@ $timetable-background-color: white !default
 		color: white
 		border: $timetable-entry-border
 		+valign-parent
-		small
+		small.name
 			+valign-middle
 			display: block
+		small.hours
+			+valign-middle
+			display: none
 
 		&:hover
 			background-color: $timetable-entry-color-hover
+			small.name
+				+valign-middle
+				display: none
+			small.hours
+				+valign-middle
+				display: block
 
diff --git a/dist/scripts/timetable.js b/dist/scripts/timetable.js
index 91e772e..e270f7b 100644
--- a/dist/scripts/timetable.js
+++ b/dist/scripts/timetable.js
@@ -1 +1 @@
-!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
+!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",s=[],c=function(){var e,c,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in s)if(s.hasOwnProperty(u))for(e=0;e<s[u].length;e++)s[u][e].removeEventListener("scroll",s[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,s[u]||(s[u]=[]),c=0;c<s[u].length;c++)s[u][c]==l&&(d=1);d||s[u].push(l),l.eX=l.eY=0,function(e,c){e.addEventListener("scroll",e.syn=function(){var l,d,u=s[c],f=e[i+r],h=e[i+o],m=f/(e[i+t]-e[a+t]),p=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(m*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(p*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?c():window.addEventListener("load",c,0),e.reset=c});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function s(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function c(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var s="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:s?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<p.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=p.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=p.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),s=a.appendChild(document.createElement("span"));s.className="time-label",s.textContent=c(i),i!==p.scope.hourEnd||p.scope.hourStart===p.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<p.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(p.locations[o],r)}}function d(e,t){for(var n=0;n<p.events.length;n++){var o=p.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var s=n?"a":"span",c=t.appendChild(document.createElement(s)),l=c.appendChild(document.createElement("small"));l.classList.add("name");var d=c.appendChild(document.createElement("small"));if(d.classList.add("hours"),c.title=e.name,n&&(c.href=e.options.url),r)for(var u in e.options.data)c.setAttribute("data-"+u,e.options.data[u]);a&&c.addEventListener("click",function(t){e.options.onClick(e,p,t)}),c.className=o?"time-entry "+e.options["class"]:"time-entry",c.style.width=f(e),c.style.left=m(e),l.textContent=e.name,d.textContent=("0"+e.startDate.getHours()).substr(-2)+":"+("0"+e.startDate.getMinutes()).substr(-2)+" - "+("0"+e.endDate.getHours()).substr(-2)+":"+("0"+e.endDate.getMinutes()).substr(-2)}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function m(e){var t=p.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var p=this.timetable,v=a(p.scope.hourStart,p.scope.hourEnd),E=document.querySelector(e);t(E),s(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
diff --git a/dist/styles/timetablejs.css b/dist/styles/timetablejs.css
index 9853640..f1c94cf 100644
--- a/dist/styles/timetablejs.css
+++ b/dist/styles/timetablejs.css
@@ -1 +1 @@
-.timetable{display:flex;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}.timetable *{box-sizing:inherit}.timetable li,.timetable ul{list-style-type:none;margin:0}.timetable li,.timetable ul{padding:0}.timetable>aside{flex:none;max-width:30%;padding:0!important;margin-top:46px;border-right:5px solid transparent;position:relative}.timetable>aside li{padding:0 15px;background-color:#efefef;line-height:46px}.timetable>aside li:not(:last-of-type){border-bottom:1px solid #fff}.timetable>aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.timetable>aside:before{content:"";display:block;background-color:#fff;height:46px;position:relative;margin-top:-46px;top:0}.timetable aside li,.timetable time li{height:46px}.timetable>section{flex:3 0 auto;width:0;padding:0!important}.timetable>section time{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.timetable>section>header{position:relative;top:0;z-index:3;width:100%;overflow:hidden;background-color:#fff;transform-style:preserve-3d}.timetable>section>header ul{display:inline-flex;height:46px;align-items:center}.timetable>section>header li{flex:none;display:block;position:relative;width:96px}.timetable>section>header li .time-label{display:block;position:absolute;left:0}.timetable>section>header li:not(:first-of-type) .time-label{transform:translateX(-50%)}.timetable>section>header li:last-of-type{width:0}.timetable>section>header li:last-of-type .time-label{transform:translateX(-100%)}.timetable ul.room-timeline{border-left:none;display:flex;flex-direction:column;align-items:stretch}.timetable ul.room-timeline li{position:relative;background-color:#f4f4f4;height:46px}.timetable ul.room-timeline li:nth-of-type(odd){background-color:#fdfdfd}.timetable ul.room-timeline li:first-of-type{border-top:1px solid #e5e5e5}.timetable ul.room-timeline li:last-of-type{border-bottom:1px solid #e5e5e5}.timetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.timetable ul.room-timeline li:first-child .time-entry{height:44px}.timetable ul.room-timeline li:after,.timetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.timetable ul.room-timeline li:before{background-image:linear-gradient(90deg,#e5e5e5 1px,transparent 0);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(90deg,#e5e5e5,#e5e5e5 1px,#f4f4f4 0,#f4f4f4 2px,#e5e5e5 0,#e5e5e5 3px,transparent 0,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#ec6a5e;transition:background-color .2s;height:45px;display:block;position:absolute;z-index:2;padding:0 10px;white-space:normal;overflow:hidden;color:#fff;border:1px solid #e32c1b;transform-style:preserve-3d}.timetable .time-entry small{position:relative;top:50%;transform:translateY(-50%);display:block}.timetable .time-entry:hover{background-color:#e74030}
\ No newline at end of file
+.timetable{display:flex;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}.timetable *{box-sizing:inherit}.timetable li,.timetable ul{list-style-type:none;margin:0}.timetable li,.timetable ul{padding:0}.timetable>aside{flex:none;max-width:30%;padding:0!important;margin-top:46px;border-right:5px solid transparent;position:relative}.timetable>aside li{padding:0 15px;background-color:#efefef;line-height:46px}.timetable>aside li:not(:last-of-type){border-bottom:1px solid #fff}.timetable>aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.timetable>aside:before{content:"";display:block;background-color:#fff;height:46px;position:relative;margin-top:-46px;top:0}.timetable aside li,.timetable time li{height:46px}.timetable>section{flex:3 0 auto;width:0;padding:0!important}.timetable>section time{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.timetable>section>header{position:relative;top:0;z-index:3;width:100%;overflow:hidden;background-color:#fff;transform-style:preserve-3d}.timetable>section>header ul{display:inline-flex;height:46px;align-items:center}.timetable>section>header li{flex:none;display:block;position:relative;width:96px}.timetable>section>header li .time-label{display:block;position:absolute;left:0}.timetable>section>header li:not(:first-of-type) .time-label{transform:translateX(-50%)}.timetable>section>header li:last-of-type{width:0}.timetable>section>header li:last-of-type .time-label{transform:translateX(-100%)}.timetable ul.room-timeline{border-left:none;display:flex;flex-direction:column;align-items:stretch}.timetable ul.room-timeline li{position:relative;background-color:#f4f4f4;height:46px}.timetable ul.room-timeline li:nth-of-type(odd){background-color:#fdfdfd}.timetable ul.room-timeline li:first-of-type{border-top:1px solid #e5e5e5}.timetable ul.room-timeline li:last-of-type{border-bottom:1px solid #e5e5e5}.timetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.timetable ul.room-timeline li:first-child .time-entry{height:44px}.timetable ul.room-timeline li:after,.timetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.timetable ul.room-timeline li:before{background-image:linear-gradient(90deg,#e5e5e5 1px,transparent 0);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(90deg,#e5e5e5,#e5e5e5 1px,#f4f4f4 0,#f4f4f4 2px,#e5e5e5 0,#e5e5e5 3px,transparent 0,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#ec6a5e;transition:background-color .2s;height:45px;display:block;position:absolute;z-index:2;padding:0 10px;white-space:normal;overflow:hidden;color:#fff;border:1px solid #e32c1b;transform-style:preserve-3d}.timetable .time-entry small.name{position:relative;top:50%;transform:translateY(-50%);display:block}.timetable .time-entry small.hours{position:relative;top:50%;transform:translateY(-50%);display:none}.timetable .time-entry:hover{background-color:#e74030}.timetable .time-entry:hover small.name{position:relative;top:50%;transform:translateY(-50%);display:none}.timetable .time-entry:hover small.hours{position:relative;top:50%;transform:translateY(-50%);display:block}
\ No newline at end of file

From 7fb0239f77ff5d54396c890db004f54e5169dbb4 Mon Sep 17 00:00:00 2001
From: Florian Riou <riouf.info@gmail.com>
Date: Sat, 1 Sep 2018 10:38:50 +0200
Subject: [PATCH 3/5] Small scope issue fix #44

Fix header's/time's content width and scrollbar

This reverts commit 6be701ff0c3cb322d2fba1419f26a6781941d0a7.
---
 app/demo.html               | 2 +-
 app/scripts/plugin.js       | 2 +-
 app/styles/plugin.sass      | 4 ++--
 dist/demo.html              | 2 +-
 dist/scripts/timetable.js   | 2 +-
 dist/styles/timetablejs.css | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/demo.html b/app/demo.html
index 5f68f81..a0b5328 100644
--- a/app/demo.html
+++ b/app/demo.html
@@ -29,7 +29,7 @@ <h1>Timetable.js demo</h1>
     <script>
       var timetable = new Timetable();
 
-      timetable.setScope(9,3)
+      timetable.setScope(9,3);
 
       timetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
 
diff --git a/app/scripts/plugin.js b/app/scripts/plugin.js
index d784dc4..c289e46 100644
--- a/app/scripts/plugin.js
+++ b/app/scripts/plugin.js
@@ -136,7 +136,7 @@ Timetable.Renderer = function(tt) {
 				var timeNode = sectionNode.appendChild(document.createElement('time'));
         timeNode.className = 'syncscroll';
         timeNode.setAttribute('name', 'scrollheader');
-        var width = headerNode.scrollWidth + 'px';
+        var width = headerNode.firstChild.offsetWidth + 'px';
 				appendTimeRows(timeNode, width);
 			}
 			function appendColumnHeaders(node) {
diff --git a/app/styles/plugin.sass b/app/styles/plugin.sass
index 780b83c..71c3b26 100644
--- a/app/styles/plugin.sass
+++ b/app/styles/plugin.sass
@@ -118,7 +118,7 @@ $timetable-background-color: white !default
 		time
 			display: block
 			width: 100%
-			overflow-x: scroll
+			overflow-x: auto
 			-webkit-overflow-scrolling: touch
 
 		> header
@@ -131,7 +131,7 @@ $timetable-background-color: white !default
 			transform-style: preserve-3d
 
 			ul
-				display: flex
+				display: inline-flex
 				height: $timetable-hour-row-height
 				align-items: center
 
diff --git a/dist/demo.html b/dist/demo.html
index ecea63f..519f241 100644
--- a/dist/demo.html
+++ b/dist/demo.html
@@ -22,7 +22,7 @@ <h1>Timetable.js demo</h1>
     <script>
       var timetable = new Timetable();
 
-      timetable.setScope(9,3)
+      timetable.setScope(9,3);
 
       timetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
 
diff --git a/dist/scripts/timetable.js b/dist/scripts/timetable.js
index f74c431..91e772e 100644
--- a/dist/scripts/timetable.js
+++ b/dist/scripts/timetable.js
@@ -1 +1 @@
-!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.scrollWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
+!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
diff --git a/dist/styles/timetablejs.css b/dist/styles/timetablejs.css
index 537460f..9853640 100644
--- a/dist/styles/timetablejs.css
+++ b/dist/styles/timetablejs.css
@@ -1 +1 @@
-.timetable{display:flex;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}.timetable *{box-sizing:inherit}.timetable li,.timetable ul{list-style-type:none;margin:0}.timetable li,.timetable ul{padding:0}.timetable>aside{flex:none;max-width:30%;padding:0!important;margin-top:46px;border-right:5px solid transparent;position:relative}.timetable>aside li{padding:0 15px;background-color:#efefef;line-height:46px}.timetable>aside li:not(:last-of-type){border-bottom:1px solid #fff}.timetable>aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.timetable>aside:before{content:"";display:block;background-color:#fff;height:46px;position:relative;margin-top:-46px;top:0}.timetable aside li,.timetable time li{height:46px}.timetable>section{flex:3 0 auto;width:0;padding:0!important}.timetable>section time{display:block;width:100%;overflow-x:scroll;-webkit-overflow-scrolling:touch}.timetable>section>header{position:relative;top:0;z-index:3;width:100%;overflow:hidden;background-color:#fff;transform-style:preserve-3d}.timetable>section>header ul{display:flex;height:46px;align-items:center}.timetable>section>header li{flex:none;display:block;position:relative;width:96px}.timetable>section>header li .time-label{display:block;position:absolute;left:0}.timetable>section>header li:not(:first-of-type) .time-label{transform:translateX(-50%)}.timetable>section>header li:last-of-type{width:0}.timetable>section>header li:last-of-type .time-label{transform:translateX(-100%)}.timetable ul.room-timeline{border-left:none;display:flex;flex-direction:column;align-items:stretch}.timetable ul.room-timeline li{position:relative;background-color:#f4f4f4;height:46px}.timetable ul.room-timeline li:nth-of-type(odd){background-color:#fdfdfd}.timetable ul.room-timeline li:first-of-type{border-top:1px solid #e5e5e5}.timetable ul.room-timeline li:last-of-type{border-bottom:1px solid #e5e5e5}.timetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.timetable ul.room-timeline li:first-child .time-entry{height:44px}.timetable ul.room-timeline li:after,.timetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.timetable ul.room-timeline li:before{background-image:linear-gradient(90deg,#e5e5e5 1px,transparent 0);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(90deg,#e5e5e5,#e5e5e5 1px,#f4f4f4 0,#f4f4f4 2px,#e5e5e5 0,#e5e5e5 3px,transparent 0,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#ec6a5e;transition:background-color .2s;height:45px;display:block;position:absolute;z-index:2;padding:0 10px;white-space:normal;overflow:hidden;color:#fff;border:1px solid #e32c1b;transform-style:preserve-3d}.timetable .time-entry small{position:relative;top:50%;transform:translateY(-50%);display:block}.timetable .time-entry:hover{background-color:#e74030}
\ No newline at end of file
+.timetable{display:flex;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}.timetable *{box-sizing:inherit}.timetable li,.timetable ul{list-style-type:none;margin:0}.timetable li,.timetable ul{padding:0}.timetable>aside{flex:none;max-width:30%;padding:0!important;margin-top:46px;border-right:5px solid transparent;position:relative}.timetable>aside li{padding:0 15px;background-color:#efefef;line-height:46px}.timetable>aside li:not(:last-of-type){border-bottom:1px solid #fff}.timetable>aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.timetable>aside:before{content:"";display:block;background-color:#fff;height:46px;position:relative;margin-top:-46px;top:0}.timetable aside li,.timetable time li{height:46px}.timetable>section{flex:3 0 auto;width:0;padding:0!important}.timetable>section time{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.timetable>section>header{position:relative;top:0;z-index:3;width:100%;overflow:hidden;background-color:#fff;transform-style:preserve-3d}.timetable>section>header ul{display:inline-flex;height:46px;align-items:center}.timetable>section>header li{flex:none;display:block;position:relative;width:96px}.timetable>section>header li .time-label{display:block;position:absolute;left:0}.timetable>section>header li:not(:first-of-type) .time-label{transform:translateX(-50%)}.timetable>section>header li:last-of-type{width:0}.timetable>section>header li:last-of-type .time-label{transform:translateX(-100%)}.timetable ul.room-timeline{border-left:none;display:flex;flex-direction:column;align-items:stretch}.timetable ul.room-timeline li{position:relative;background-color:#f4f4f4;height:46px}.timetable ul.room-timeline li:nth-of-type(odd){background-color:#fdfdfd}.timetable ul.room-timeline li:first-of-type{border-top:1px solid #e5e5e5}.timetable ul.room-timeline li:last-of-type{border-bottom:1px solid #e5e5e5}.timetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.timetable ul.room-timeline li:first-child .time-entry{height:44px}.timetable ul.room-timeline li:after,.timetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.timetable ul.room-timeline li:before{background-image:linear-gradient(90deg,#e5e5e5 1px,transparent 0);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(90deg,#e5e5e5,#e5e5e5 1px,#f4f4f4 0,#f4f4f4 2px,#e5e5e5 0,#e5e5e5 3px,transparent 0,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#ec6a5e;transition:background-color .2s;height:45px;display:block;position:absolute;z-index:2;padding:0 10px;white-space:normal;overflow:hidden;color:#fff;border:1px solid #e32c1b;transform-style:preserve-3d}.timetable .time-entry small{position:relative;top:50%;transform:translateY(-50%);display:block}.timetable .time-entry:hover{background-color:#e74030}
\ No newline at end of file

From 33396c6566b1fbe542ab2bcba84c6b4d63874f9b Mon Sep 17 00:00:00 2001
From: Florian Riou <riouf.info@gmail.com>
Date: Mon, 3 Sep 2018 18:55:21 +0200
Subject: [PATCH 4/5] Locations usabled as objects instead of strings

---
 app/demo.html             | 30 ++++++++++++++++++++----------
 app/scripts/plugin.js     | 28 +++++++++++++++++++++++++---
 dist/demo.html            | 30 ++++++++++++++++++++----------
 dist/scripts/timetable.js |  2 +-
 4 files changed, 66 insertions(+), 24 deletions(-)

diff --git a/app/demo.html b/app/demo.html
index a0b5328..010ff69 100644
--- a/app/demo.html
+++ b/app/demo.html
@@ -30,20 +30,30 @@ <h1>Timetable.js demo</h1>
       var timetable = new Timetable();
 
       timetable.setScope(9,3);
+      timetable.addLocations([
+          {'id': '1', 'name': 'Rotterdam'},
+          {'id': '2', 'name': 'Madrid'},
+          {'id': '3', 'name': 'Los Angeles'},
+          {'id': '4', 'name': 'London'},
+          {'id': '5', 'name': 'New York'},
+          {'id': '6', 'name': 'Jakarta'}
+      ]);
 
-      timetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
+      timetable.addLocation(
+          {'id': '7', 'name': 'Tokyo'}
+      );
 
-      timetable.addEvent('Sightseeing', 'Rotterdam', new Date(2015,7,17,9,00), new Date(2015,7,17,11,30), { url: '#' });
-      timetable.addEvent('Zumba', 'Madrid', new Date(2015,7,17,12), new Date(2015,7,17,13), { url: '#' });
-      timetable.addEvent('Zumbu', 'Madrid', new Date(2015,7,17,13,30), new Date(2015,7,17,15), { url: '#' });
-      timetable.addEvent('Lasergaming', 'London', new Date(2015,7,17,17,45), new Date(2015,7,17,19,30), { class: 'vip-only', data: { maxPlayers: 14, gameType: 'Capture the flag' } });
-      timetable.addEvent('All-you-can-eat grill', 'New York', new Date(2015,7,17,21), new Date(2015,7,18,1,30), { url: '#' });
-      timetable.addEvent('Hackathon', 'Tokyo', new Date(2015,7,17,11,30), new Date(2015,7,17,20)); // options attribute is not used for this event
-      timetable.addEvent('Tokyo Hackathon Livestream', 'Los Angeles', new Date(2015,7,17,12,30), new Date(2015,7,17,16,15)); // options attribute is not used for this event
-      timetable.addEvent('Lunch', 'Jakarta', new Date(2015,7,17,9,30), new Date(2015,7,17,11,45), { onClick: function(event) {
+      timetable.addEvent('Sightseeing', '1', new Date(2015,7,17,9,00), new Date(2015,7,17,11,30), { url: '#' });
+      timetable.addEvent('Zumba', '2', new Date(2015,7,17,12), new Date(2015,7,17,13), { url: '#' });
+      timetable.addEvent('Zumbu', '2', new Date(2015,7,17,13,30), new Date(2015,7,17,15), { url: '#' });
+      timetable.addEvent('Lasergaming', '4', new Date(2015,7,17,17,45), new Date(2015,7,17,19,30), { class: 'vip-only', data: { maxPlayers: 14, gameType: 'Capture the flag' } });
+      timetable.addEvent('All-you-can-eat grill', '5', new Date(2015,7,17,21), new Date(2015,7,18,1,30), { url: '#' });
+      timetable.addEvent('Hackathon', '7', new Date(2015,7,17,11,30), new Date(2015,7,17,20)); // options attribute is not used for this event
+      timetable.addEvent('Tokyo Hackathon Livestream', '3', new Date(2015,7,17,12,30), new Date(2015,7,17,16,15)); // options attribute is not used for this event
+      timetable.addEvent('Lunch', '6', new Date(2015,7,17,9,30), new Date(2015,7,17,11,45), { onClick: function(event) {
         window.alert('You clicked on the ' + event.name + ' event in ' + event.location + '. This is an example of a click handler');
       }});
-      timetable.addEvent('Cocktails', 'Rotterdam', new Date(2015,7,18,00,00), new Date(2015,7,18,02,00), { class: 'vip-only' });
+      timetable.addEvent('Cocktails', '1', new Date(2015,7,18,00,00), new Date(2015,7,18,02,00), { class: 'vip-only' });
 
       var renderer = new Timetable.Renderer(timetable);
       renderer.draw('.timetable');
diff --git a/app/scripts/plugin.js b/app/scripts/plugin.js
index c289e46..2ad4d44 100644
--- a/app/scripts/plugin.js
+++ b/app/scripts/plugin.js
@@ -32,7 +32,9 @@ Timetable.Renderer = function(tt) {
 		return number >= 0 && number < 24;
 	}
 	function locationExistsIn(loc, locs) {
-		return locs.indexOf(loc) !== -1;
+		return locs.findIndex(function(l){
+           return l.id === loc;
+		}) !== -1;
 	}
 	function isValidTimeRange(start, end) {
 		var correctTypes = start instanceof Date && end instanceof Date;
@@ -75,8 +77,28 @@ Timetable.Renderer = function(tt) {
 
 			return this;
 		},
+        addLocation: function(newLocation) {
+            function hasProperFormat() {
+                return newLocation instanceof Object;
+            }
+
+            var existingLocations = this.locations;
+
+            if (hasProperFormat()) {
+            	if (!locationExistsIn(newLocation, existingLocations)) {
+            		existingLocations.push(newLocation);
+            	} else {
+            		throw new Error('Location already exists');
+            	}
+            } else {
+                throw new Error('Tried to add locations in wrong format');
+            }
+
+            return this;
+        },
 		addEvent: function(name, location, start, end, options) {
 			if (!locationExistsIn(location, this.locations)) {
+				console.log(location);
 				throw new Error('Unknown location');
 			}
 			if (!isValidTimeRange(start, end)) {
@@ -127,7 +149,7 @@ Timetable.Renderer = function(tt) {
 					var liNode = ulNode.appendChild(document.createElement('li'));
 					var spanNode = liNode.appendChild(document.createElement('span'));
 					spanNode.className = 'row-heading';
-					spanNode.textContent = timetable.locations[k];
+					spanNode.textContent = timetable.locations[k].name;
 				}
 			}
 			function appendTimetableSection(container) {
@@ -176,7 +198,7 @@ Timetable.Renderer = function(tt) {
 			function appendLocationEvents(location, node) {
 				for (var k=0; k<timetable.events.length; k++) {
 					var event = timetable.events[k];
-					if (event.location === location) {
+					if (event.location === location.id) {
 						appendEvent(event, node);
 					}
 				}
diff --git a/dist/demo.html b/dist/demo.html
index 519f241..744ea76 100644
--- a/dist/demo.html
+++ b/dist/demo.html
@@ -23,20 +23,30 @@ <h1>Timetable.js demo</h1>
       var timetable = new Timetable();
 
       timetable.setScope(9,3);
+      timetable.addLocations([
+          {'id': '1', 'name': 'Rotterdam'},
+          {'id': '2', 'name': 'Madrid'},
+          {'id': '3', 'name': 'Los Angeles'},
+          {'id': '4', 'name': 'London'},
+          {'id': '5', 'name': 'New York'},
+          {'id': '6', 'name': 'Jakarta'}
+      ]);
 
-      timetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
+      timetable.addLocation(
+          {'id': '7', 'name': 'Tokyo'}
+      );
 
-      timetable.addEvent('Sightseeing', 'Rotterdam', new Date(2015,7,17,9,00), new Date(2015,7,17,11,30), { url: '#' });
-      timetable.addEvent('Zumba', 'Madrid', new Date(2015,7,17,12), new Date(2015,7,17,13), { url: '#' });
-      timetable.addEvent('Zumbu', 'Madrid', new Date(2015,7,17,13,30), new Date(2015,7,17,15), { url: '#' });
-      timetable.addEvent('Lasergaming', 'London', new Date(2015,7,17,17,45), new Date(2015,7,17,19,30), { class: 'vip-only', data: { maxPlayers: 14, gameType: 'Capture the flag' } });
-      timetable.addEvent('All-you-can-eat grill', 'New York', new Date(2015,7,17,21), new Date(2015,7,18,1,30), { url: '#' });
-      timetable.addEvent('Hackathon', 'Tokyo', new Date(2015,7,17,11,30), new Date(2015,7,17,20)); // options attribute is not used for this event
-      timetable.addEvent('Tokyo Hackathon Livestream', 'Los Angeles', new Date(2015,7,17,12,30), new Date(2015,7,17,16,15)); // options attribute is not used for this event
-      timetable.addEvent('Lunch', 'Jakarta', new Date(2015,7,17,9,30), new Date(2015,7,17,11,45), { onClick: function(event) {
+      timetable.addEvent('Sightseeing', '1', new Date(2015,7,17,9,00), new Date(2015,7,17,11,30), { url: '#' });
+      timetable.addEvent('Zumba', '2', new Date(2015,7,17,12), new Date(2015,7,17,13), { url: '#' });
+      timetable.addEvent('Zumbu', '2', new Date(2015,7,17,13,30), new Date(2015,7,17,15), { url: '#' });
+      timetable.addEvent('Lasergaming', '4', new Date(2015,7,17,17,45), new Date(2015,7,17,19,30), { class: 'vip-only', data: { maxPlayers: 14, gameType: 'Capture the flag' } });
+      timetable.addEvent('All-you-can-eat grill', '5', new Date(2015,7,17,21), new Date(2015,7,18,1,30), { url: '#' });
+      timetable.addEvent('Hackathon', '7', new Date(2015,7,17,11,30), new Date(2015,7,17,20)); // options attribute is not used for this event
+      timetable.addEvent('Tokyo Hackathon Livestream', '3', new Date(2015,7,17,12,30), new Date(2015,7,17,16,15)); // options attribute is not used for this event
+      timetable.addEvent('Lunch', '6', new Date(2015,7,17,9,30), new Date(2015,7,17,11,45), { onClick: function(event) {
         window.alert('You clicked on the ' + event.name + ' event in ' + event.location + '. This is an example of a click handler');
       }});
-      timetable.addEvent('Cocktails', 'Rotterdam', new Date(2015,7,18,00,00), new Date(2015,7,18,02,00), { class: 'vip-only' });
+      timetable.addEvent('Cocktails', '1', new Date(2015,7,18,00,00), new Date(2015,7,18,02,00), { class: 'vip-only' });
 
       var renderer = new Timetable.Renderer(timetable);
       renderer.draw('.timetable');
diff --git a/dist/scripts/timetable.js b/dist/scripts/timetable.js
index 91e772e..ecf8739 100644
--- a/dist/scripts/timetable.js
+++ b/dist/scripts/timetable.js
@@ -1 +1 @@
-!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.indexOf(e)!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t]}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
+!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",c=[],s=function(){var e,s,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in c)if(c.hasOwnProperty(u))for(e=0;e<c[u].length;e++)c[u][e].removeEventListener("scroll",c[u][e].syn,0);for(e=0;e<f.length;e++)if(d=0,l=f[e],u=l.getAttribute("name")){for(l=l.scroller||l,c[u]||(c[u]=[]),s=0;s<c[u].length;s++)c[u][s]==l&&(d=1);d||c[u].push(l),l.eX=l.eY=0,function(e,s){e.addEventListener("scroll",e.syn=function(){var l,d,u=c[s],f=e[i+r],h=e[i+o],p=f/(e[i+t]-e[a+t]),m=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),d=0;d<u.length;d++)l=u[d],l!=e&&(v&&(f=Math.round(p*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(m*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?s():window.addEventListener("load",s,0),e.reset=s});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.findIndex(function(t){return t.id===e})!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function s(e){var t=e<10?"0":"";return t+e+":00"}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addLocation:function(e){function t(){return e instanceof Object}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");if(r(e,n))throw new Error("Location already exists");return n.push(e),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw console.log(t),new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:c?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<m.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[t].name}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=m.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),c=a.appendChild(document.createElement("span"));c.className="time-label",c.textContent=s(i),i!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function l(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<m.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(m.locations[o],r)}}function d(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e.id&&u(o,t)}}function u(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var c=n?"a":"span",s=t.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=e.name,n&&(s.href=e.options.url),r)for(var d in e.options.data)s.setAttribute("data-"+d,e.options.data[d]);a&&s.addEventListener("click",function(t){e.options.onClick(e,m,t)}),s.className=o?"time-entry "+e.options["class"]:"time-entry",s.style.width=f(e),s.style.left=p(e),l.textContent=e.name}function f(e){var t=e.startDate,n=e.endDate,o=h(t,n);return o/v*100+"%"}function h(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=m.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/v*100+"%"}var m=this.timetable,v=a(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(e);t(E),c(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file

From 8893334fc0006d56c54049766993c5d425c55372 Mon Sep 17 00:00:00 2001
From: friou <riouf.info@gmail.com>
Date: Fri, 5 Jul 2019 11:58:55 +0200
Subject: [PATCH 5/5] Timetable working on 24 hours scope (example: 0 to 0)

---
 app/scripts/plugin.js     | 540 ++++++++++++++++++++------------------
 dist/scripts/timetable.js |   3 +-
 2 files changed, 285 insertions(+), 258 deletions(-)

diff --git a/app/scripts/plugin.js b/app/scripts/plugin.js
index 18510aa..a2dc332 100644
--- a/app/scripts/plugin.js
+++ b/app/scripts/plugin.js
@@ -2,86 +2,104 @@
 
 'use strict';
 
-var Timetable = function() {
-	this.scope = {
-		hourStart: 9,
-		hourEnd: 17
-	};
-	this.usingTwelveHour = false;
-	this.locations = [];
-	this.events = [];
+var Timetable = function () {
+    this.scope = {
+        hourStart: 9,
+        hourEnd: 17
+    };
+    this.usingTwelveHour = false;
+    this.locations = [];
+    this.events = [];
 };
 
-Timetable.Renderer = function(tt) {
-	if (!(tt instanceof Timetable)) {
-		throw new Error('Initialize renderer using a Timetable');
-	}
-	this.timetable = tt;
+Timetable.Renderer = function (tt) {
+    if (!(tt instanceof Timetable)) {
+        throw new Error('Initialize renderer using a Timetable');
+    }
+    this.timetable = tt;
 };
 
-(function() {
-	function isValidHourRange(start, end) {
-		return isValidHour(start) && isValidHour(end);
-	}
-	function isValidHour(number) {
-		return isInt(number) && isInHourRange(number);
-	}
-	function isInt(number) {
-		return number === parseInt(number, 10);
-	}
-	function isInHourRange(number) {
-		return number >= 0 && number < 24;
-	}
-	function locationExistsIn(loc, locs) {
-		return locs.findIndex(function(l){
-           return l.id === loc;
-		}) !== -1;
-	}
-	function isValidTimeRange(start, end) {
-		var correctTypes = start instanceof Date && end instanceof Date;
-		var correctOrder = start < end;
-		return correctTypes && correctOrder;
-	}
-	function getDurationHours(startHour, endHour) {
-		return endHour >= startHour ? endHour - startHour : 24 + endHour - startHour;
-	}
-
-	Timetable.prototype = {
-		setScope: function(start, end) {
-			if (isValidHourRange(start, end)) {
-				this.scope.hourStart = start;
-				this.scope.hourEnd = end;
-			} else {
-				throw new RangeError('Timetable scope should consist of (start, end) in whole hours from 0 to 23');
-			}
-
-			return this;
-		},
-		useTwelveHour: function(){
-			this.usingTwelveHour = true;
-		},
-		addLocations: function(newLocations) {
-			function hasProperFormat() {
-				return newLocations instanceof Array;
-			}
-
-			var existingLocations = this.locations;
-
-			if (hasProperFormat()) {
-				newLocations.forEach(function(loc) {
-					if (!locationExistsIn(loc, existingLocations)) {
-						existingLocations.push(loc);
-					} else {
-						throw new Error('Location already exists');
-					}
-				});
-			} else {
-				throw new Error('Tried to add locations in wrong format');
-			}
-
-			return this;
-		},
-        addLocation: function(newLocation) {
+(function () {
+    function isValidHourRange(start, end) {
+        return isValidHour(start) && isValidHour(end);
+    }
+
+    function isValidHour(number) {
+        return isInt(number) && isInHourRange(number);
+    }
+
+    function isInt(number) {
+        return number === parseInt(number, 10);
+    }
+
+    function isInHourRange(number) {
+        return number >= 0 && number < 24;
+    }
+
+    function locationExistsIn(loc, locs) {
+        return locs.findIndex(function (l) {
+            return l.id === loc;
+        }) !== -1;
+    }
+
+    function isValidTimeRange(start, end) {
+        var correctTypes = start instanceof Date && end instanceof Date;
+        var correctOrder = start < end;
+        return correctTypes && correctOrder;
+    }
+
+    function getEventDurationHours(startHour, endHour) {
+        return endHour >= startHour ? endHour - startHour : 24 + endHour - startHour;
+    }
+
+    function getDurationHours(startHour, endHour) {
+        var duration = 0;
+        if (endHour > startHour) {
+            duration = endHour - startHour;
+        } else if (startHour === endHour) {
+            duration = 24;
+        } else {
+            duration = 24 + endHour - startHour;
+        }
+        return duration;
+    }
+
+    Timetable.prototype = {
+        setScope: function (start, end) {
+            if (isValidHourRange(start, end)) {
+                this.scope.hourStart = start;
+                this.scope.hourEnd = end;
+            } else {
+                throw new RangeError('Timetable scope should consist of (start, end) in whole hours from 0 to 23');
+            }
+
+            return this;
+        },
+        useTwelveHour: function () {
+            this.usingTwelveHour = true;
+        },
+        addLocations: function (newLocations) {
+            function hasProperFormat() {
+                return newLocations instanceof Array;
+            }
+
+            var existingLocations = this.locations;
+
+            if (hasProperFormat()) {
+                newLocations.forEach(function (loc) {
+                    if (!locationExistsIn(loc, existingLocations)) {
+                        existingLocations.push(loc);
+                    } else {
+                        throw new Error('Location already exists');
+                    }
+                });
+            } else {
+                throw new Error('Tried to add locations in wrong format');
+            }
+
+            return this;
+        },
+        addLocation: function (newLocation) {
             function hasProperFormat() {
                 return newLocation instanceof Object;
             }
@@ -89,196 +107,206 @@ Timetable.Renderer = function(tt) {
             var existingLocations = this.locations;
 
             if (hasProperFormat()) {
-            	if (!locationExistsIn(newLocation, existingLocations)) {
-            		existingLocations.push(newLocation);
-            	} else {
-            		throw new Error('Location already exists');
-            	}
+                if (!locationExistsIn(newLocation, existingLocations)) {
+                    existingLocations.push(newLocation);
+                } else {
+                    throw new Error('Location already exists');
+                }
             } else {
                 throw new Error('Tried to add locations in wrong format');
             }
 
             return this;
         },
-		addEvent: function(name, location, start, end, options) {
-			if (!locationExistsIn(location, this.locations)) {
-				console.log(location);
-				throw new Error('Unknown location');
-			}
-			if (!isValidTimeRange(start, end)) {
-				throw new Error('Invalid time range: ' + JSON.stringify([start, end]));
-			}
-
-			var optionsHasValidType = Object.prototype.toString.call(options) === '[object Object]';
-
-			this.events.push({
-				name: name,
-				location: location,
-				startDate: start,
-				endDate: end,
-				options: optionsHasValidType ? options : undefined
-			});
-
-			return this;
-		}
-	};
-
-	function emptyNode(node) {
-		while (node.firstChild) {
-			node.removeChild(node.firstChild);
-		}
-	}
-
-	function prettyFormatHour(hour, usingTwelveHour) {
-		var prettyHour;
-			if(usingTwelveHour) {
-					var period = hour >= 12 ? 'PM':'AM';
-					prettyHour = ((hour + 11) % 12 + 1) + ':00' + period;
-			} else {
-					var prefix = hour < 10 ? '0' : '';
-					prettyHour = prefix + hour + ':00';
-			}
-		return prettyHour;
-	}
-
-	Timetable.Renderer.prototype = {
-		draw: function(selector) {
-      var timetable = this.timetable;
-
-			function checkContainerPrecondition(container) {
-				if (container === null) {
-					throw new Error('Timetable container not found');
-				}
-			}
-			function appendTimetableAside(container) {
-				var asideNode = container.appendChild(document.createElement('aside'));
-				var asideULNode = asideNode.appendChild(document.createElement('ul'));
-				appendRowHeaders(asideULNode);
-			}
-			function appendRowHeaders(ulNode) {
-				for (var k=0; k<timetable.locations.length; k++) {
-					var liNode = ulNode.appendChild(document.createElement('li'));
-					var spanNode = liNode.appendChild(document.createElement('span'));
-					spanNode.className = 'row-heading';
-					spanNode.textContent = timetable.locations[k].name;
-				}
-			}
-			function appendTimetableSection(container) {
-        var sectionNode = container.appendChild(document.createElement('section'));
-				var headerNode = appendColumnHeaders(sectionNode);
-				var timeNode = sectionNode.appendChild(document.createElement('time'));
-        timeNode.className = 'syncscroll';
-        timeNode.setAttribute('name', 'scrollheader');
-        var width = headerNode.firstChild.offsetWidth + 'px';
-				appendTimeRows(timeNode, width);
-			}
-			function appendColumnHeaders(node) {
-				var headerNode = node.appendChild(document.createElement('header'));
-				headerNode.className = 'syncscroll';
-        headerNode.setAttribute('name', 'scrollheader');
-				var headerULNode = headerNode.appendChild(document.createElement('ul'));
-
-				var completed = false;
-				var looped = false;
-
-				for (var hour=timetable.scope.hourStart; !completed;) {
-					var liNode = headerULNode.appendChild(document.createElement('li'));
-					var spanNode = liNode.appendChild(document.createElement('span'));
-					spanNode.className = 'time-label';
-					spanNode.textContent = prettyFormatHour(hour, timetable.usingTwelveHour);
-
-					if (hour === timetable.scope.hourEnd && (timetable.scope.hourStart !== timetable.scope.hourEnd || looped)) {
-						completed = true;
-					}
-					if (++hour === 24) {
-						hour = 0;
-						looped = true;
-					}
-				}
-				return headerNode;
-			}
-			function appendTimeRows(node, width) {
-				var ulNode = node.appendChild(document.createElement('ul'));
-        ulNode.style.width = width;
-				ulNode.className = 'room-timeline';
-				for (var k=0; k<timetable.locations.length; k++) {
-					var liNode = ulNode.appendChild(document.createElement('li'));
-					appendLocationEvents(timetable.locations[k], liNode);/**/
-				}
-			}
-			function appendLocationEvents(location, node) {
-				for (var k=0; k<timetable.events.length; k++) {
-					var event = timetable.events[k];
-					if (event.location === location.id) {
-						appendEvent(event, node);
-					}
-				}
-			}
-			function appendEvent(event, node) {
-				var hasOptions = event.options !== undefined;
-				var hasURL, hasAdditionalClass, hasDataAttributes, hasClickHandler = false;
-
-				if (hasOptions) {
-					hasURL = event.options.url !== undefined;
-					hasAdditionalClass = event.options.class !== undefined;
-					hasDataAttributes = event.options.data !== undefined;
-					hasClickHandler = event.options.onClick !== undefined;
-				}
-
-				var elementType = hasURL ? 'a' : 'span';
-				var eventNode = node.appendChild(document.createElement(elementType));
-				var nameNode = eventNode.appendChild(document.createElement('small'));
-				nameNode.classList.add('name');
+        addEvent: function (name, location, start, end, options) {
+            if (!locationExistsIn(location, this.locations)) {
+                console.log(location);
+                throw new Error('Unknown location');
+            }
+            if (!isValidTimeRange(start, end)) {
+                throw new Error('Invalid time range: ' + JSON.stringify([start, end]));
+            }
+
+            var optionsHasValidType = Object.prototype.toString.call(options) === '[object Object]';
+
+            this.events.push({
+                name: name,
+                location: location,
+                startDate: start,
+                endDate: end,
+                options: optionsHasValidType ? options : undefined
+            });
+
+            return this;
+        }
+    };
+
+    function emptyNode(node) {
+        while (node.firstChild) {
+            node.removeChild(node.firstChild);
+        }
+    }
+
+    function prettyFormatHour(hour, usingTwelveHour) {
+        var prettyHour;
+        if (usingTwelveHour) {
+            var period = hour >= 12 ? 'PM' : 'AM';
+            prettyHour = ((hour + 11) % 12 + 1) + ':00' + period;
+        } else {
+            var prefix = hour < 10 ? '0' : '';
+            prettyHour = prefix + hour + ':00';
+        }
+        return prettyHour;
+    }
+
+    Timetable.Renderer.prototype = {
+        draw: function (selector) {
+            var timetable = this.timetable;
+
+            function checkContainerPrecondition(container) {
+                if (container === null) {
+                    throw new Error('Timetable container not found');
+                }
+            }
+
+            function appendTimetableAside(container) {
+                var asideNode = container.appendChild(document.createElement('aside'));
+                var asideULNode = asideNode.appendChild(document.createElement('ul'));
+                appendRowHeaders(asideULNode);
+            }
+
+            function appendRowHeaders(ulNode) {
+                for (var k = 0; k < timetable.locations.length; k++) {
+                    var liNode = ulNode.appendChild(document.createElement('li'));
+                    var spanNode = liNode.appendChild(document.createElement('span'));
+                    spanNode.className = 'row-heading';
+                    spanNode.textContent = timetable.locations[k].name;
+                }
+            }
+
+            function appendTimetableSection(container) {
+                var sectionNode = container.appendChild(document.createElement('section'));
+                var headerNode = appendColumnHeaders(sectionNode);
+                var timeNode = sectionNode.appendChild(document.createElement('time'));
+                timeNode.className = 'syncscroll';
+                timeNode.setAttribute('name', 'scrollheader');
+                var width = headerNode.firstChild.offsetWidth + 'px';
+                appendTimeRows(timeNode, width);
+            }
+
+            function appendColumnHeaders(node) {
+                var headerNode = node.appendChild(document.createElement('header'));
+                headerNode.className = 'syncscroll';
+                headerNode.setAttribute('name', 'scrollheader');
+                var headerULNode = headerNode.appendChild(document.createElement('ul'));
+
+                var completed = false;
+                var looped = false;
+
+                for (var hour = timetable.scope.hourStart; !completed;) {
+                    var liNode = headerULNode.appendChild(document.createElement('li'));
+                    var spanNode = liNode.appendChild(document.createElement('span'));
+                    spanNode.className = 'time-label';
+                    spanNode.textContent = prettyFormatHour(hour, timetable.usingTwelveHour);
+
+                    if (hour === timetable.scope.hourEnd && (timetable.scope.hourStart !== timetable.scope.hourEnd || looped)) {
+                        completed = true;
+                    }
+                    if (++hour === 24) {
+                        hour = 0;
+                        looped = true;
+                    }
+                }
+                return headerNode;
+            }
+
+            function appendTimeRows(node, width) {
+                var ulNode = node.appendChild(document.createElement('ul'));
+                ulNode.style.width = width;
+                ulNode.className = 'room-timeline';
+                for (var k = 0; k < timetable.locations.length; k++) {
+                    var liNode = ulNode.appendChild(document.createElement('li'));
+                    appendLocationEvents(timetable.locations[k], liNode);/**/
+                }
+            }
+
+            function appendLocationEvents(location, node) {
+                for (var k = 0; k < timetable.events.length; k++) {
+                    var event = timetable.events[k];
+                    if (event.location === location.id) {
+                        appendEvent(event, node);
+                    }
+                }
+            }
+
+            function appendEvent(event, node) {
+                var hasOptions = event.options !== undefined;
+                var hasURL, hasAdditionalClass, hasDataAttributes, hasClickHandler = false;
+
+                if (hasOptions) {
+                    hasURL = event.options.url !== undefined;
+                    hasAdditionalClass = event.options.class !== undefined;
+                    hasDataAttributes = event.options.data !== undefined;
+                    hasClickHandler = event.options.onClick !== undefined;
+                }
+
+                var elementType = hasURL ? 'a' : 'span';
+                var eventNode = node.appendChild(document.createElement(elementType));
+                var nameNode = eventNode.appendChild(document.createElement('small'));
+                nameNode.classList.add('name');
                 var hourNode = eventNode.appendChild(document.createElement('small'));
                 hourNode.classList.add('hours');
-				eventNode.title = event.name;
-
-				if (hasURL) {
-					eventNode.href = event.options.url;
-				}
-
-				if (hasDataAttributes){
-					for (var key in event.options.data) {
-						eventNode.setAttribute('data-'+key, event.options.data[key]);
-					}
-				}
-
-				if (hasClickHandler) {
-				  eventNode.addEventListener('click', function(e) {
-				    event.options.onClick(event, timetable, e);
-          });
-        }
+                eventNode.title = event.name;
+
+                if (hasURL) {
+                    eventNode.href = event.options.url;
+                }
+
+                if (hasDataAttributes) {
+                    for (var key in event.options.data) {
+                        eventNode.setAttribute('data-' + key, event.options.data[key]);
+                    }
+                }
+
+                if (hasClickHandler) {
+                    eventNode.addEventListener('click', function (e) {
+                        event.options.onClick(event, timetable, e);
+                    });
+                }
 
-				eventNode.className = hasAdditionalClass ? 'time-entry ' + event.options.class : 'time-entry';
-				eventNode.style.width = computeEventBlockWidth(event);
-				eventNode.style.left = computeEventBlockOffset(event);
+                eventNode.className = hasAdditionalClass ? 'time-entry ' + event.options.class : 'time-entry';
+                eventNode.style.width = computeEventBlockWidth(event);
+                eventNode.style.left = computeEventBlockOffset(event);
                 nameNode.textContent = event.name;
                 hourNode.textContent = ('0' + event.startDate.getHours()).substr(-2) + ':' + ('0' + event.startDate.getMinutes()).substr(-2) + ' - ' + ('0' + event.endDate.getHours()).substr(-2) + ':' + ('0' + event.endDate.getMinutes()).substr(-2);
-			}
-			function computeEventBlockWidth(event) {
-				var start = event.startDate;
-				var end = event.endDate;
-				var durationHours = computeDurationInHours(start, end);
-				return durationHours / scopeDurationHours * 100 + '%';
-			}
-			function computeDurationInHours(start, end) {
-				return (end.getTime() - start.getTime()) / 1000 / 60 / 60;
-			}
-			function computeEventBlockOffset(event) {
-				var scopeStartHours = timetable.scope.hourStart;
-				var eventStartHours = event.startDate.getHours() + (event.startDate.getMinutes() / 60);
-				var hoursBeforeEvent =  getDurationHours(scopeStartHours, eventStartHours);
-				return hoursBeforeEvent / scopeDurationHours * 100 + '%';
-			}
-
-			var scopeDurationHours = getDurationHours(timetable.scope.hourStart, timetable.scope.hourEnd);
-			var container = document.querySelector(selector);
-			checkContainerPrecondition(container);
-			emptyNode(container);
-			appendTimetableAside(container);
-			appendTimetableSection(container);
-			syncscroll.reset();
-		}
-	};
+            }
+
+            function computeEventBlockWidth(event) {
+                var start = event.startDate;
+                var end = event.endDate;
+                var durationHours = computeDurationInHours(start, end);
+                return durationHours / scopeDurationHours * 100 + '%';
+            }
+
+            function computeDurationInHours(start, end) {
+                return (end.getTime() - start.getTime()) / 1000 / 60 / 60;
+            }
+
+            function computeEventBlockOffset(event) {
+                var scopeStartHours = timetable.scope.hourStart;
+                var eventStartHours = event.startDate.getHours() + (event.startDate.getMinutes() / 60);
+                var hoursBeforeEvent = getEventDurationHours(scopeStartHours, eventStartHours);
+                return hoursBeforeEvent / scopeDurationHours * 100 + '%';
+            }
+
+            var scopeDurationHours = getDurationHours(timetable.scope.hourStart, timetable.scope.hourEnd);
+            var container = document.querySelector(selector);
+            checkContainerPrecondition(container);
+            emptyNode(container);
+            appendTimetableAside(container);
+            appendTimetableSection(container);
+            syncscroll.reset();
+        }
+    };
 
 })();
diff --git a/dist/scripts/timetable.js b/dist/scripts/timetable.js
index b2cd458..e0d8afe 100644
--- a/dist/scripts/timetable.js
+++ b/dist/scripts/timetable.js
@@ -1,2 +1 @@
-!function(t,e){"function"==typeof define&&define.amd?define(["exports"],e):e("undefined"!=typeof exports?exports:t.syncscroll={})}(this,function(t){var e="Width",n="Height",o="Top",r="Left",i="scroll",a="client",s=[],c=function(){var t,c,l,d,u,f=document.getElementsByClassName("syncscroll");for(u in s)if(s.hasOwnProperty(u))for(t=0;t<s[u].length;t++)s[u][t].removeEventListener("scroll",s[u][t].syn,0);for(t=0;t<f.length;t++)if(d=0,l=f[t],u=l.getAttribute("name")){for(l=l.scroller||l,s[u]||(s[u]=[]),c=0;c<s[u].length;c++)s[u][c]==l&&(d=1);d||s[u].push(l),l.eX=l.eY=0,function(t,c){t.addEventListener("scroll",t.syn=function(){var l,d,u=s[c],f=t[i+r],h=t[i+o],m=f/(t[i+e]-t[a+e]),p=h/(t[i+n]-t[a+n]),v=0,E=0;for(f!=t.eX&&(v=1,t.eX=f),h!=t.eY&&(E=1,t.eY=h),d=0;d<u.length;d++)l=u[d],l!=t&&(v&&(f=Math.round(m*(l[i+e]-l[a+e])),l.eX=l[i+r]=f),E&&(h=Math.round(p*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,u)}};"complete"==document.readyState?c():window.addEventListener("load",c,0),t.reset=c});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.locations=[],this.events=[]};Timetable.Renderer=function(t){if(!(t instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=t},function(){function t(t,n){return e(t)&&e(n)}function e(t){return n(t)&&o(t)}function n(t){return t===parseInt(t,10)}function o(t){return t>=0&&t<24}function r(t,e){return e.findIndex(function(e){return e.id===t})!==-1}function i(t,e){var n=t instanceof Date&&e instanceof Date,o=t<e;return n&&o}function a(t,e){return e>=t?e-t:24+e-t}function s(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function c(t){var e=t<10?"0":"";return e+t+":00"}Timetable.prototype={setScope:function(e,n){if(!t(e,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=e,this.scope.hourEnd=n,this},addLocations:function(t){function e(){return t instanceof Array}var n=this.locations;if(!e())throw new Error("Tried to add locations in wrong format");return t.forEach(function(t){if(r(t,n))throw new Error("Location already exists");n.push(t)}),this},addLocation:function(t){function e(){return t instanceof Object}var n=this.locations;if(!e())throw new Error("Tried to add locations in wrong format");if(r(t,n))throw new Error("Location already exists");return n.push(t),this},addEvent:function(t,e,n,o,a){if(!r(e,this.locations))throw console.log(e),new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var s="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:t,location:e,startDate:n,endDate:o,options:s?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(t){function e(t){if(null===t)throw new Error("Timetable container not found")}function n(t){var e=t.appendChild(document.createElement("aside")),n=e.appendChild(document.createElement("ul"));o(n)}function o(t){for(var e=0;e<p.locations.length;e++){var n=t.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=p.locations[e].name}}function r(t){var e=t.appendChild(document.createElement("section")),n=i(e),o=e.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";l(o,r)}function i(t){var e=t.appendChild(document.createElement("header"));e.className="syncscroll",e.setAttribute("name","scrollheader");for(var n=e.appendChild(document.createElement("ul")),o=!1,r=!1,i=p.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),s=a.appendChild(document.createElement("span"));s.className="time-label",s.textContent=c(i),i!==p.scope.hourEnd||p.scope.hourStart===p.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return e}function l(t,e){var n=t.appendChild(document.createElement("ul"));n.style.width=e,n.className="room-timeline";for(var o=0;o<p.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(p.locations[o],r)}}function d(t,e){for(var n=0;n<p.events.length;n++){var o=p.events[n];o.location===t.id&&u(o,e)}}function u(t,e){var n,o,r,i=void 0!==t.options,a=!1;i&&(n=void 0!==t.options.url,o=void 0!==t.options["class"],r=void 0!==t.options.data,a=void 0!==t.options.onClick);var s=n?"a":"span",c=e.appendChild(document.createElement(s)),l=c.appendChild(document.createElement("small"));l.classList.add("name");var d=c.appendChild(document.createElement("small"));if(d.classList.add("hours"),c.title=t.name,n&&(c.href=t.options.url),r)for(var u in t.options.data)c.setAttribute("data-"+u,t.options.data[u]);a&&c.addEventListener("click",function(e){t.options.onClick(t,p,e)}),c.className=o?"time-entry "+t.options["class"]:"time-entry",c.style.width=f(t),c.style.left=m(t),l.textContent=t.name,d.textContent=("0"+t.startDate.getHours()).substr(-2)+":"+("0"+t.startDate.getMinutes()).substr(-2)+" - "+("0"+t.endDate.getHours()).substr(-2)+":"+("0"+t.endDate.getMinutes()).substr(-2)}function f(t){var e=t.startDate,n=t.endDate,o=h(e,n);return o/v*100+"%"}function h(t,e){return(e.getTime()-t.getTime())/1e3/60/60}function m(t){var e=p.scope.hourStart,n=t.startDate.getHours()+t.startDate.getMinutes()/60,o=a(e,n);return o/v*100+"%"}var p=this.timetable,v=a(p.scope.hourStart,p.scope.hourEnd),E=document.querySelector(t);e(E),s(E),n(E),r(E),syncscroll.reset()}}}();
-
+!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.syncscroll={})}(this,function(e){var t="Width",n="Height",o="Top",r="Left",i="scroll",a="client",s=[],c=function(){var e,c,l,u,d,f=document.getElementsByClassName("syncscroll");for(d in s)if(s.hasOwnProperty(d))for(e=0;e<s[d].length;e++)s[d][e].removeEventListener("scroll",s[d][e].syn,0);for(e=0;e<f.length;e++)if(u=0,l=f[e],d=l.getAttribute("name")){for(l=l.scroller||l,s[d]||(s[d]=[]),c=0;c<s[d].length;c++)s[d][c]==l&&(u=1);u||s[d].push(l),l.eX=l.eY=0,function(e,c){e.addEventListener("scroll",e.syn=function(){var l,u,d=s[c],f=e[i+r],h=e[i+o],m=f/(e[i+t]-e[a+t]),p=h/(e[i+n]-e[a+n]),v=0,E=0;for(f!=e.eX&&(v=1,e.eX=f),h!=e.eY&&(E=1,e.eY=h),u=0;u<d.length;u++)l=d[u],l!=e&&(v&&(f=Math.round(m*(l[i+t]-l[a+t])),l.eX=l[i+r]=f),E&&(h=Math.round(p*(l[i+n]-l[a+n])),l.eY=l[i+o]=h))},0)}(l,d)}};"complete"==document.readyState?c():window.addEventListener("load",c,0),e.reset=c});var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.usingTwelveHour=!1,this.locations=[],this.events=[]};Timetable.Renderer=function(e){if(!(e instanceof Timetable))throw new Error("Initialize renderer using a Timetable");this.timetable=e},function(){function e(e,n){return t(e)&&t(n)}function t(e){return n(e)&&o(e)}function n(e){return e===parseInt(e,10)}function o(e){return e>=0&&e<24}function r(e,t){return t.findIndex(function(t){return t.id===e})!==-1}function i(e,t){var n=e instanceof Date&&t instanceof Date,o=e<t;return n&&o}function a(e,t){return t>=e?t-e:24+t-e}function s(e,t){var n=0;return n=t>e?t-e:e===t?24:24+t-e}function c(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function l(e,t){var n;if(t){var o=e>=12?"PM":"AM";n=(e+11)%12+1+":00"+o}else{var r=e<10?"0":"";n=r+e+":00"}return n}Timetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Timetable scope should consist of (start, end) in whole hours from 0 to 23");return this.scope.hourStart=t,this.scope.hourEnd=n,this},useTwelveHour:function(){this.usingTwelveHour=!0},addLocations:function(e){function t(){return e instanceof Array}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(r(e,n))throw new Error("Location already exists");n.push(e)}),this},addLocation:function(e){function t(){return e instanceof Object}var n=this.locations;if(!t())throw new Error("Tried to add locations in wrong format");if(r(e,n))throw new Error("Location already exists");return n.push(e),this},addEvent:function(e,t,n,o,a){if(!r(t,this.locations))throw console.log(t),new Error("Unknown location");if(!i(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var s="[object Object]"===Object.prototype.toString.call(a);return this.events.push({name:e,location:t,startDate:n,endDate:o,options:s?a:void 0}),this}},Timetable.Renderer.prototype={draw:function(e){function t(e){if(null===e)throw new Error("Timetable container not found")}function n(e){var t=e.appendChild(document.createElement("aside")),n=t.appendChild(document.createElement("ul"));o(n)}function o(e){for(var t=0;t<v.locations.length;t++){var n=e.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=v.locations[t].name}}function r(e){var t=e.appendChild(document.createElement("section")),n=i(t),o=t.appendChild(document.createElement("time"));o.className="syncscroll",o.setAttribute("name","scrollheader");var r=n.firstChild.offsetWidth+"px";u(o,r)}function i(e){var t=e.appendChild(document.createElement("header"));t.className="syncscroll",t.setAttribute("name","scrollheader");for(var n=t.appendChild(document.createElement("ul")),o=!1,r=!1,i=v.scope.hourStart;!o;){var a=n.appendChild(document.createElement("li")),s=a.appendChild(document.createElement("span"));s.className="time-label",s.textContent=l(i,v.usingTwelveHour),i!==v.scope.hourEnd||v.scope.hourStart===v.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}return t}function u(e,t){var n=e.appendChild(document.createElement("ul"));n.style.width=t,n.className="room-timeline";for(var o=0;o<v.locations.length;o++){var r=n.appendChild(document.createElement("li"));d(v.locations[o],r)}}function d(e,t){for(var n=0;n<v.events.length;n++){var o=v.events[n];o.location===e.id&&f(o,t)}}function f(e,t){var n,o,r,i=void 0!==e.options,a=!1;i&&(n=void 0!==e.options.url,o=void 0!==e.options["class"],r=void 0!==e.options.data,a=void 0!==e.options.onClick);var s=n?"a":"span",c=t.appendChild(document.createElement(s)),l=c.appendChild(document.createElement("small"));l.classList.add("name");var u=c.appendChild(document.createElement("small"));if(u.classList.add("hours"),c.title=e.name,n&&(c.href=e.options.url),r)for(var d in e.options.data)c.setAttribute("data-"+d,e.options.data[d]);a&&c.addEventListener("click",function(t){e.options.onClick(e,v,t)}),c.className=o?"time-entry "+e.options["class"]:"time-entry",c.style.width=h(e),c.style.left=p(e),l.textContent=e.name,u.textContent=("0"+e.startDate.getHours()).substr(-2)+":"+("0"+e.startDate.getMinutes()).substr(-2)+" - "+("0"+e.endDate.getHours()).substr(-2)+":"+("0"+e.endDate.getMinutes()).substr(-2)}function h(e){var t=e.startDate,n=e.endDate,o=m(t,n);return o/E*100+"%"}function m(e,t){return(t.getTime()-e.getTime())/1e3/60/60}function p(e){var t=v.scope.hourStart,n=e.startDate.getHours()+e.startDate.getMinutes()/60,o=a(t,n);return o/E*100+"%"}var v=this.timetable,E=s(v.scope.hourStart,v.scope.hourEnd),w=document.querySelector(e);t(w),c(w),n(w),r(w),syncscroll.reset()}}}();
\ No newline at end of file