From b29d59cb72a6365c67e3bc384a12f027e499c677 Mon Sep 17 00:00:00 2001
From: mapit_cpw <choongpakwai@mapit.com.my>
Date: Wed, 10 Apr 2019 11:12:52 +0800
Subject: [PATCH 1/2] added timeScale for scaling the table by factor of 2. eg.
 timeScale = 2 have range by 30min, timeScale = 4 have range by 15min

---
 app/scripts/plugin.js       | 74 ++++++++++++++++++++++---------------
 app/styles/plugin.sass      |  4 +-
 dist/scripts/timetable.js   |  2 +-
 dist/styles/timetablejs.css |  2 +-
 4 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/app/scripts/plugin.js b/app/scripts/plugin.js
index cf31a5c..7f9be80 100644
--- a/app/scripts/plugin.js
+++ b/app/scripts/plugin.js
@@ -8,6 +8,7 @@ var Timetable = function() {
 		hourEnd: 17
 	};
 	this.usingTwelveHour = false;
+	this.timeScale = 1;
 	this.locations = [];
 	this.events = [];
 };
@@ -107,21 +108,22 @@ Timetable.Renderer = function(tt) {
 		}
 	}
 
-	function prettyFormatHour(hour, usingTwelveHour) {
+	function prettyFormatHour(hour, minute, 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';
-			}
+		var prefixHr = hour < 10 ? '0' : '';
+		var prefixMn = minute < 10 ? '0' : '';
+		if(usingTwelveHour) {
+			var period = hour >= 12 ? 'PM' : 'AM';
+			prettyHour = ((hour + 11) % 12 + 1) + ':' + prefixMn + minute + period;
+		} else {
+			return prefixHr + hour + ':' + prefixMn + minute;
+		}
 		return prettyHour;
 	}
 
 	Timetable.Renderer.prototype = {
 		draw: function(selector) {
-      var timetable = this.timetable;
+			var timetable = this.timetable;
 
 			function checkContainerPrecondition(container) {
 				if (container === null) {
@@ -134,7 +136,7 @@ Timetable.Renderer = function(tt) {
 				appendRowHeaders(asideULNode);
 			}
 			function appendRowHeaders(ulNode) {
-				for (var k=0; k<timetable.locations.length; k++) {
+				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';
@@ -142,50 +144,62 @@ Timetable.Renderer = function(tt) {
 				}
 			}
 			function appendTimetableSection(container) {
-        var sectionNode = container.appendChild(document.createElement('section'));
+				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.scrollWidth + 'px';
+				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');
+				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 minute = 0,
+					mloop = 0;
+				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);
+					spanNode.textContent = prettyFormatHour(hour, minute, timetable.usingTwelveHour);
 
 					if (hour === timetable.scope.hourEnd && (timetable.scope.hourStart !== timetable.scope.hourEnd || looped)) {
 						completed = true;
 					}
-					if (++hour === 24) {
+
+					if (++mloop === timetable.timeScale) {
+						hour++;
+						mloop = minute = 0;
+					} else {
+						minute += (60 / timetable.timeScale);
+					}
+
+					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.style.width = width;
 				ulNode.className = 'room-timeline';
-				for (var k=0; k<timetable.locations.length; k++) {
+				for (var k = 0; k < timetable.locations.length; k++) {
 					var liNode = ulNode.appendChild(document.createElement('li'));
-					appendLocationEvents(timetable.locations[k], liNode);/**/
+					appendLocationEvents(timetable.locations[k], liNode);
 				}
 			}
+
 			function appendLocationEvents(location, node) {
-				for (var k=0; k<timetable.events.length; k++) {
+				for (var k = 0; k < timetable.events.length; k++) {
 					var event = timetable.events[k];
 					if (event.location === location) {
 						appendEvent(event, node);
@@ -212,17 +226,17 @@ Timetable.Renderer = function(tt) {
 					eventNode.href = event.options.url;
 				}
 
-				if (hasDataAttributes){
+				if (hasDataAttributes) {
 					for (var key in event.options.data) {
-						eventNode.setAttribute('data-'+key, event.options.data[key]);
+						eventNode.setAttribute('data-' + key, event.options.data[key]);
 					}
 				}
 
 				if (hasClickHandler) {
-				  eventNode.addEventListener('click', function(e) {
-				    event.options.onClick(event, timetable, e);
-          });
-        }
+					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);
@@ -241,7 +255,7 @@ Timetable.Renderer = function(tt) {
 			function computeEventBlockOffset(event) {
 				var scopeStartHours = timetable.scope.hourStart;
 				var eventStartHours = event.startDate.getHours() + (event.startDate.getMinutes() / 60);
-				var hoursBeforeEvent =  getDurationHours(scopeStartHours, eventStartHours);
+				var hoursBeforeEvent = getDurationHours(scopeStartHours, eventStartHours);
 				return hoursBeforeEvent / scopeDurationHours * 100 + '%';
 			}
 
@@ -255,4 +269,4 @@ Timetable.Renderer = function(tt) {
 		}
 	};
 
-})();
+})();
\ No newline at end of file
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/scripts/timetable.js b/dist/scripts/timetable.js
index 4e45c77..94bb9af 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",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],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),u=0;u<d.length;u++)l=d[u],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,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.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,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},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<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")),s=a.appendChild(document.createElement("span"));s.className="time-label",s.textContent=c(i,m.usingTwelveHour),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"));u(m.locations[o],r)}}function u(e,t){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===e&&d(o,t)}}function d(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"));if(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,m,t)}),c.className=o?"time-entry "+e.options["class"]:"time-entry",c.style.width=f(e),c.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),s(E),n(E),r(E),syncscroll.reset()}}}();
\ No newline at end of file
+"use strict";var Timetable=function(){this.scope={hourStart:9,hourEnd:17},this.usingTwelveHour=!1,this.timeScale=1,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.indexOf(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 c(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function s(t,e,n){var o,r=t<10?"0":"",i=e<10?"0":"";if(!n)return r+t+":"+i+e;var a=t>=12?"PM":"AM";return o=(t+11)%12+1+":"+i+e+a}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},useTwelveHour:function(){this.usingTwelveHour=!0},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},addEvent:function(t,e,n,o,a){if(!r(e,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:t,location:e,startDate:n,endDate:o,options:c?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]}}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=0,a=0,c=p.scope.hourStart;!o;){var l=n.appendChild(document.createElement("li")),u=l.appendChild(document.createElement("span"));u.className="time-label",u.textContent=s(c,i,p.usingTwelveHour),c!==p.scope.hourEnd||p.scope.hourStart===p.scope.hourEnd&&!r||(o=!0),++a===p.timeScale?(c++,a=i=0):i+=60/p.timeScale,24===c&&(c=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"));u(p.locations[o],r)}}function u(t,e){for(var n=0;n<p.events.length;n++){var o=p.events[n];o.location===t&&d(o,e)}}function d(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 c=n?"a":"span",s=e.appendChild(document.createElement(c)),l=s.appendChild(document.createElement("small"));if(s.title=t.name,n&&(s.href=t.options.url),r)for(var u in t.options.data)s.setAttribute("data-"+u,t.options.data[u]);a&&s.addEventListener("click",function(e){t.options.onClick(t,p,e)}),s.className=o?"time-entry "+t.options["class"]:"time-entry",s.style.width=h(t),s.style.left=f(t),l.textContent=t.name}function h(t){var e=t.startDate,n=t.endDate,o=m(e,n);return o/v*100+"%"}function m(t,e){return(e.getTime()-t.getTime())/1e3/60/60}function f(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),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 3ebb535efded133f7bb632120d30b3163a64ace7 Mon Sep 17 00:00:00 2001
From: mapit_cpw <choongpakwai@mapit.com.my>
Date: Wed, 10 Apr 2019 11:16:23 +0800
Subject: [PATCH 2/2] updated README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e437b5b..7af5eea 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ Make a timetable object, optionally set the scope in hours (the visible hours in
 var timetable = new Timetable();
 timetable.setScope(9, 17); // optional, only whole hours between 0 and 23
 timetable.useTwelveHour(); //optional, displays hours in 12 hour format (1:00PM)
+timetable.timeScale = 1; // optional, use factor of 2 (2 = 30min scale, 4 = 15min scale)
 ```
 Add some locations:
 ```javascript
@@ -47,7 +48,7 @@ var options = {
     id: 4,
     ticketType: 'VIP'
   },
-  onClick: function(event, timetable, clickEvent) {} // custom click handler, which is passed the event object and full timetable as context  
+  onClick: function(event, timetable, clickEvent) {} // custom click handler, which is passed the event object and full timetable as context
 };
 timetable.addEvent('Jam Session', 'Nile', new Date(2015,7,17,21,15), new Date(2015,7,17,23,30), options);
  ```
@@ -87,7 +88,7 @@ $timetable-entry-padding: 10px !default
 $timetable-background-color: white !default
 ```
 
-The option `$timetable-use-sticky-header` makes the time indicator stick to the top of the screen while scrolling down, which can be very pleasant with large timetables or on mobile devices. Note that this is not yet widely supported in browsers, although all modern (non-IE) browsers support it. Browsers that don't support it will fall back to a non-sticky header automatically. [More info here](https://caniuse.com/#feat=css-sticky). 
+The option `$timetable-use-sticky-header` makes the time indicator stick to the top of the screen while scrolling down, which can be very pleasant with large timetables or on mobile devices. Note that this is not yet widely supported in browsers, although all modern (non-IE) browsers support it. Browsers that don't support it will fall back to a non-sticky header automatically. [More info here](https://caniuse.com/#feat=css-sticky).
 
 Alternatively you could override the css styles manually.