diff --git a/app/demo.html b/app/demo.html
index 197ae0c..f72d27c 100644
--- a/app/demo.html
+++ b/app/demo.html
@@ -7,6 +7,7 @@
     <title>Timetable.js demo</title>
     <!-- build:css styles/timetablejs.css -->
     <link rel="stylesheet" href="styles/plugin.css">
+    <link rel="stylesheet" href="styles/plugin-date.css">
     <!-- endbuild -->
     <!-- build:css styles/demo.css -->
     <link rel="stylesheet" href="styles/demo.css">
@@ -21,8 +22,11 @@ <h1>Timetable.js demo</h1>
 
     <div class="timetable"></div>
 
+    <div class="datetable"></div>
+
     <!-- build:js scripts/timetable.js -->
     <script src="scripts/plugin.js"></script>
+    <script src="scripts/plugin-date.js"></script>
     <!-- endbuild -->
 
     <script>
@@ -46,14 +50,25 @@ <h1>Timetable.js demo</h1>
       renderer.draw('.timetable');
     </script>
 
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
     <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-37417680-5');ga('send','pageview');
+      var datetable = new Datetable();
+
+      datetable.setScope(new Date(2015,7,9), new Date(2015,8,3))
+
+      datetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
+
+      datetable.addEvent('Sightseeing', 'Rotterdam', new Date(2015,7,9), new Date(2015,7,11,12), { url: '#' });
+      datetable.addEvent('Zumba', 'Madrid', new Date(2015,7,12), new Date(2015,7,13), { url: '#' });
+      datetable.addEvent('Zumbu', 'Madrid', new Date(2015,7,16), new Date(2015,7,20), { url: '#' });
+      datetable.addEvent('Lasergaming', 'London', new Date(2015,7,17), new Date(2015,7,19), { class: 'vip-only', data: { maxPlayers: 14, gameType: 'Capture the flag' } });
+      datetable.addEvent('All-you-can-eat grill', 'New York', new Date(2015,7,21), new Date(2015,8,1), { url: '#' });
+      datetable.addEvent('Hackathon', 'Tokyo', new Date(2015,7,11), new Date(2015,7,20)); // options attribute is not used for this event
+      datetable.addEvent('Tokyo Hackathon Livestream', 'Los Angeles', new Date(2015,7,12), new Date(2015,7,16)); // options attribute is not used for this event
+      datetable.addEvent('Lunch', 'Jakarta', new Date(2015,7,9), new Date(2015,7,11), { url: '#' });
+      datetable.addEvent('Cocktails', 'Rotterdam', new Date(2015,8,1), new Date(2015,8,2), { class: 'vip-only' });
+
+      var renderer = new Datetable.Renderer(datetable);
+      renderer.draw('.datetable');
     </script>
 </body>
 </html>
diff --git a/app/scripts/plugin-date.js b/app/scripts/plugin-date.js
new file mode 100644
index 0000000..8359dfa
--- /dev/null
+++ b/app/scripts/plugin-date.js
@@ -0,0 +1,218 @@
+/*jshint -W079*/
+
+'use strict';
+
+var Datetable = function() {
+	this.scope = {
+		dateStart: new Date(2016, 9, 3),
+		dateEnd: new Date(2016, 9, 4)
+	};
+	this.locations = [];
+	this.events = [];
+};
+
+Datetable.Renderer = function(tt) {
+	if (!(tt instanceof Datetable)) {
+		throw new Error('Initialize renderer using a Datetable');
+	}
+	this.datetable = tt;
+};
+
+(function() {
+	function locationExistsIn(loc, locs) {
+		return locs.indexOf(loc) !== -1;
+	}
+	function isValidDateRange(start, end) {
+		var correctTypes = start instanceof Date && end instanceof Date;
+		var correctOrder = start < end;
+		return correctTypes && correctOrder;
+	}
+	function getDuration(startDate, endDate) {
+		return (new Date(endDate - startDate).getTime());
+	}
+
+	Datetable.prototype = {
+		setScope: function(start, end) {
+			if (isValidDateRange(start, end)) {
+				this.scope.dateStart = start;
+				this.scope.dateEnd = end;
+			} else {
+				throw new RangeError('Datetable scope should consist of (start, end) in Date format');
+			}
+
+			return this;
+		},
+		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;
+		},
+		addEvent: function(name, location, start, end, options) {
+			if (!locationExistsIn(location, this.locations)) {
+				throw new Error('Unknown location');
+			}
+			if (!isValidDateRange(start, end)) {
+				throw new Error('Invalid date 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 prettyFormatDate(date) {
+		var monthName = ['Jan', 'Feb', 'Mar', 'Apr',
+										 'May', 'Jun', 'Jul', 'Aug',
+										 'Sep', 'Oct', 'Nov', 'Dec'];
+		var output = monthName[date.getMonth()] + ' ' + date.getDate();
+		return output;
+	}
+
+	Datetable.Renderer.prototype = {
+		draw: function(selector) {
+			function checkContainerPrecondition(container) {
+				if (container === null) {
+					throw new Error('Datetable container not found');
+				}
+			}
+			function appendDatetableAside(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<datetable.locations.length; k++) {
+					var liNode = ulNode.appendChild(document.createElement('li'));
+					var spanNode = liNode.appendChild(document.createElement('span'));
+					spanNode.className = 'row-heading';
+					spanNode.textContent = datetable.locations[k];
+				}
+			}
+			function appendDatetableSection(container) {
+				var sectionNode = container.appendChild(document.createElement('section'));
+				var dateNode = sectionNode.appendChild(document.createElement('date'));
+				appendColumnHeaders(dateNode);
+				appendDateRows(dateNode);
+			}
+			function appendColumnHeaders(node) { //Wakwaw
+				var headerNode = node.appendChild(document.createElement('header'));
+				var headerULNode = headerNode.appendChild(document.createElement('ul'));
+
+				var completed = false;
+				// var looped = false;
+
+				for (var date=datetable.scope.dateStart; !completed;) {
+					var liNode = headerULNode.appendChild(document.createElement('li'));
+					var spanNode = liNode.appendChild(document.createElement('span'));
+					spanNode.className = 'date-label';
+					spanNode.textContent = prettyFormatDate(date);
+
+					date = new Date(date.getTime() + (24 * 60 * 60 * 1000));
+					if (date >= datetable.scope.dateEnd) {
+						liNode = headerULNode.appendChild(document.createElement('li'));
+						spanNode = liNode.appendChild(document.createElement('span'));
+						spanNode.textContent = '';
+						completed = true;
+					}
+				}
+			}
+			function appendDateRows(node) {
+				var ulNode = node.appendChild(document.createElement('ul'));
+				ulNode.className = 'room-timeline';
+				for (var k=0; k<datetable.locations.length; k++) {
+					var liNode = ulNode.appendChild(document.createElement('li'));
+					appendLocationEvents(datetable.locations[k], liNode);/**/
+				}
+			}
+			function appendLocationEvents(location, node) {
+				for (var k=0; k<datetable.events.length; k++) {
+					var event = datetable.events[k];
+					if (event.location === location) {
+						appendEvent(event, node);
+					}
+				}
+			}
+			function appendEvent(event, node) {
+				var hasOptions = event.options !== undefined;
+				var hasURL, hasAdditionalClass, hasDataAttributes = false;
+
+				if(hasOptions) {
+					hasURL = (event.options.url !== undefined) ? true : false;
+					hasAdditionalClass = (event.options.class !== undefined) ? true : false;
+					hasDataAttributes = (event.options.data !== undefined) ? true : false;
+				}
+
+				var elementType = hasURL ? 'a' : 'span';
+				var aNode = node.appendChild(document.createElement(elementType));
+				var smallNode = aNode.appendChild(document.createElement('small'));
+				aNode.title = event.name;
+
+				if (hasURL) {
+					aNode.href = event.options.url;
+				}
+				if(hasDataAttributes){
+					for (var key in event.options.data) {
+						aNode.setAttribute('data-'+key, event.options.data[key]);
+					}
+				}
+
+				aNode.className = hasAdditionalClass ? 'date-entry ' + event.options.class : 'date-entry';
+				aNode.style.width = computeEventBlockWidth(event);
+				aNode.style.left = computeEventBlockOffset(event);
+				smallNode.textContent = event.name;
+			}
+			function computeEventBlockWidth(event) {
+				var start = event.startDate;
+				var end = event.endDate;
+				var durationDates = getDuration(start, end);
+				return durationDates / scopeDurationDates * 100 + '%';
+			}
+			function computeEventBlockOffset(event) {
+				var scopeStartDates = datetable.scope.dateStart;
+				var eventStartDates = event.startDate;
+				var datesBeforeEvent =  getDuration(scopeStartDates, eventStartDates);
+				return datesBeforeEvent / scopeDurationDates * 100 + '%';
+			}
+
+			var datetable = this.datetable;
+			var scopeDurationDates = getDuration(datetable.scope.dateStart, datetable.scope.dateEnd);
+			var container = document.querySelector(selector);
+			checkContainerPrecondition(container);
+			emptyNode(container);
+			appendDatetableAside(container);
+			appendDatetableSection(container);
+		}
+	};
+
+})();
diff --git a/app/styles/demo.sass b/app/styles/demo.sass
index a56cfca..8645666 100644
--- a/app/styles/demo.sass
+++ b/app/styles/demo.sass
@@ -12,11 +12,13 @@ a
 	font-size: 0.7em
 	text-transform: uppercase
 
-.timetable .time-label
+.timetable .time-label,
+.datetable .date-label,
 	font-size: 0.8em
 	font-weight: 500
 
-.timetable .time-entry.vip-only
+.datetable .date-entry.vip-only,
+.datetable .date-entry.vip-only
 	background-color: #C490F5
 	border: 1px solid #6A16B8
 	&:hover
diff --git a/app/styles/plugin-date.sass b/app/styles/plugin-date.sass
new file mode 100644
index 0000000..2d595de
--- /dev/null
+++ b/app/styles/plugin-date.sass
@@ -0,0 +1,189 @@
+// bower:scss
+// endbower
+
+/* ==========================================================================
+ * Default settings
+ * ==========================================================================
+
+// dimensions
+$datetable-date-column-width: 96px !default
+$datetable-date-row-height: 46px !default
+$datetable-heading-height: 30px !default
+$datetable-breakpoint: "only screen and (max-width: 960px)" !default
+// colors & decoration
+$datetable-grid-color: #E5E5E5 !default
+$datetable-grid: 1px solid $datetable-grid-color !default
+$datetable-row-header-padding: 15px !default
+$datetable-row-header-color: #EFEFEF !default
+$datetable-legend-row-separator: 1px solid white !default
+$datetable-entry-row-separator: none !default
+$datetable-row-header-gap: 5px solid transparent !default
+$datetable-row-uneven-color: #FDFDFD !default
+$datetable-row-even-color: #F4F4F4 !default
+$datetable-entry-color: #EC6A5E !default
+$datetable-entry-color-hover: darken($datetable-entry-color, 10%) !default
+$datetable-entry-border: 1px solid darken($datetable-entry-color, 15%) !default
+$datetable-entry-padding: 10px !default
+$datetable-grid-column: 2
+
+/* ==========================================================================
+ * Mixins
+ * ==========================================================================
+
+=valign-middle
+	position: relative
+	top: 50%
+	transform: translateY(-50%)
+
+=valign-parent
+	transform-style: preserve-3d
+
+=clearfix
+	&::after
+		clear: both
+		content: ""
+		display: table
+
+=ellipsis($width: 100%)
+	display: inline-block
+	max-width: $width
+	overflow: hidden
+	text-overflow: ellipsis
+	white-space: nowrap
+	word-wrap: normal
+
+
+
+/* ==========================================================================
+ * Datetable
+ * ==========================================================================
+
+.datetable
+	box-sizing: border-box
+	+clearfix
+
+	*, *:before, *:after
+		box-sizing: inherit
+
+	ul, li
+		margin: 0
+		padding: 0
+		list-style-type: none
+
+	aside, section
+		float: left
+
+	aside
+		width: 25%
+		padding: 0 !important
+		margin-top: $datetable-date-row-height
+		border-right: $datetable-row-header-gap
+		li
+			padding: 0 $datetable-row-header-padding
+			background-color: $datetable-row-header-color
+			line-height: $datetable-date-row-height
+
+			&:not(:last-of-type)
+				border-bottom: $datetable-legend-row-separator
+
+		.row-heading
+			+ellipsis
+
+	ul
+		list-style-type: none
+		margin: 0
+
+	aside li, date li
+		height: $datetable-date-row-height
+
+	section
+		width: 75%
+		padding: 0 !important
+		overflow-x: scroll
+		-webkit-overflow-scrolling: touch
+
+		date
+			white-space: nowrap
+			display: inline-block
+
+		header
+			height: $datetable-date-row-height
+			transform-style: preserve-3d
+			+clearfix
+			font-size: 0
+			li
+				display: inline-block
+				font-size: 1rem
+				overflow: visible
+				width: 0
+				line-height: $datetable-date-row-height
+				display: inline-block
+				position: relative
+
+				&:not(:last-of-type)
+					width: $datetable-date-column-width
+				.date-label
+					display: block
+					position: absolute
+					left: $datetable-date-column-width/2
+					transform: translateX(-50%)
+
+	@media #{$datetable-breakpoint}
+		aside
+			width: 40%
+		section
+			width: 60%
+
+	ul.room-timeline
+		border-left: none
+		position: relative
+		overflow: hidden
+
+		li
+			position: relative
+			background-color: $datetable-row-even-color
+			&:nth-of-type(odd)
+				background-color: $datetable-row-uneven-color
+			&:first-of-type
+				border-top: $datetable-grid
+			&:last-of-type
+				border-bottom: $datetable-grid
+			&:not(:last-of-type)
+				border-bottom: $datetable-entry-row-separator
+			&:first-child .date-entry
+				height: $datetable-date-row-height - 2px
+
+			&:after, &:before
+				content: ""
+				position: absolute
+				z-index: 1
+				left: 0
+				top: 0
+				right: 0
+				bottom: 0
+			&:before
+				background-image: linear-gradient(to right, $datetable-grid-color 1px, transparent 1px)
+				background-size: $datetable-date-column-width / $datetable-grid-column auto
+			&:after
+				background-image: linear-gradient(to right, $datetable-grid-color, $datetable-grid-color 1px, $datetable-row-even-color 1px, $datetable-row-even-color 2px, $datetable-grid-color 2px, $datetable-grid-color 3px, transparent 3px, transparent)
+				background-size: $datetable-date-column-width auto
+				background-position: -2px 0
+	.date-entry
+		background-color: $datetable-entry-color
+		transition: 200ms background-color
+		height: $datetable-date-row-height - 1px
+		display: block
+		position: absolute
+		z-index: 2
+		padding: 0 $datetable-entry-padding
+		white-space: normal
+		overflow: hidden
+		color: white
+		border: $datetable-entry-border
+		+valign-parent
+		small
+			+valign-middle
+			display: block
+
+		&:hover
+			background-color: $datetable-entry-color-hover
diff --git a/dist/demo.html b/dist/demo.html
index 8e3f32e..b45d74f 100644
--- a/dist/demo.html
+++ b/dist/demo.html
@@ -17,6 +17,8 @@ <h1>Timetable.js demo</h1>
 
     <div class="timetable"></div>
 
+    <div class="datetable"></div>
+
     <script src="scripts/timetable.js"></script>
 
     <script>
@@ -40,14 +42,25 @@ <h1>Timetable.js demo</h1>
       renderer.draw('.timetable');
     </script>
 
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
     <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-37417680-5');ga('send','pageview');
+      var datetable = new Datetable();
+
+      datetable.setScope(new Date(2015,7,9), new Date(2015,8,3))
+
+      datetable.addLocations(['Rotterdam', 'Madrid', 'Los Angeles', 'London', 'New York', 'Jakarta', 'Tokyo']);
+
+      datetable.addEvent('Sightseeing', 'Rotterdam', new Date(2015,7,9), new Date(2015,7,11,12), { url: '#' });
+      datetable.addEvent('Zumba', 'Madrid', new Date(2015,7,12), new Date(2015,7,13), { url: '#' });
+      datetable.addEvent('Zumbu', 'Madrid', new Date(2015,7,16), new Date(2015,7,20), { url: '#' });
+      datetable.addEvent('Lasergaming', 'London', new Date(2015,7,17), new Date(2015,7,19), { class: 'vip-only', data: { maxPlayers: 14, gameType: 'Capture the flag' } });
+      datetable.addEvent('All-you-can-eat grill', 'New York', new Date(2015,7,21), new Date(2015,8,1), { url: '#' });
+      datetable.addEvent('Hackathon', 'Tokyo', new Date(2015,7,11), new Date(2015,7,20)); // options attribute is not used for this event
+      datetable.addEvent('Tokyo Hackathon Livestream', 'Los Angeles', new Date(2015,7,12), new Date(2015,7,16)); // options attribute is not used for this event
+      datetable.addEvent('Lunch', 'Jakarta', new Date(2015,7,9), new Date(2015,7,11), { url: '#' });
+      datetable.addEvent('Cocktails', 'Rotterdam', new Date(2015,8,1), new Date(2015,8,2), { class: 'vip-only' });
+
+      var renderer = new Datetable.Renderer(datetable);
+      renderer.draw('.datetable');
     </script>
 </body>
 </html>
diff --git a/dist/scripts/timetable.js b/dist/scripts/timetable.js
index c7ecb6a..04edcd9 100644
--- a/dist/scripts/timetable.js
+++ b/dist/scripts/timetable.js
@@ -228,3 +228,222 @@ Timetable.Renderer = function(tt) {
 	};
 
 })();
+
+/*jshint -W079*/
+
+'use strict';
+
+var Datetable = function() {
+	this.scope = {
+		dateStart: new Date(2016, 9, 3),
+		dateEnd: new Date(2016, 9, 4)
+	};
+	this.locations = [];
+	this.events = [];
+};
+
+Datetable.Renderer = function(tt) {
+	if (!(tt instanceof Datetable)) {
+		throw new Error('Initialize renderer using a Datetable');
+	}
+	this.datetable = tt;
+};
+
+(function() {
+	function locationExistsIn(loc, locs) {
+		return locs.indexOf(loc) !== -1;
+	}
+	function isValidDateRange(start, end) {
+		var correctTypes = start instanceof Date && end instanceof Date;
+		var correctOrder = start < end;
+		return correctTypes && correctOrder;
+	}
+	function getDuration(startDate, endDate) {
+		return (new Date(endDate - startDate).getTime());
+	}
+
+	Datetable.prototype = {
+		setScope: function(start, end) {
+			if (isValidDateRange(start, end)) {
+				this.scope.dateStart = start;
+				this.scope.dateEnd = end;
+			} else {
+				throw new RangeError('Datetable scope should consist of (start, end) in Date format');
+			}
+
+			return this;
+		},
+		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;
+		},
+		addEvent: function(name, location, start, end, options) {
+			if (!locationExistsIn(location, this.locations)) {
+				throw new Error('Unknown location');
+			}
+			if (!isValidDateRange(start, end)) {
+				throw new Error('Invalid date 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 prettyFormatDate(date) {
+		var monthName = ['Jan', 'Feb', 'Mar', 'Apr',
+										 'May', 'Jun', 'Jul', 'Aug',
+										 'Sep', 'Oct', 'Nov', 'Dec'];
+		var output = monthName[date.getMonth()] + ' ' + date.getDate();
+		return output;
+	}
+
+	Datetable.Renderer.prototype = {
+		draw: function(selector) {
+			function checkContainerPrecondition(container) {
+				if (container === null) {
+					throw new Error('Datetable container not found');
+				}
+			}
+			function appendDatetableAside(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<datetable.locations.length; k++) {
+					var liNode = ulNode.appendChild(document.createElement('li'));
+					var spanNode = liNode.appendChild(document.createElement('span'));
+					spanNode.className = 'row-heading';
+					spanNode.textContent = datetable.locations[k];
+				}
+			}
+			function appendDatetableSection(container) {
+				var sectionNode = container.appendChild(document.createElement('section'));
+				var dateNode = sectionNode.appendChild(document.createElement('date'));
+				appendColumnHeaders(dateNode);
+				appendDateRows(dateNode);
+			}
+			function appendColumnHeaders(node) { //Wakwaw
+				var headerNode = node.appendChild(document.createElement('header'));
+				var headerULNode = headerNode.appendChild(document.createElement('ul'));
+
+				var completed = false;
+				// var looped = false;
+
+				for (var date=datetable.scope.dateStart; !completed;) {
+					var liNode = headerULNode.appendChild(document.createElement('li'));
+					var spanNode = liNode.appendChild(document.createElement('span'));
+					spanNode.className = 'date-label';
+					spanNode.textContent = prettyFormatDate(date);
+
+					date = new Date(date.getTime() + (24 * 60 * 60 * 1000));
+					if (date >= datetable.scope.dateEnd) {
+						liNode = headerULNode.appendChild(document.createElement('li'));
+						spanNode = liNode.appendChild(document.createElement('span'));
+						spanNode.textContent = '';
+						completed = true;
+					}
+				}
+			}
+			function appendDateRows(node) {
+				var ulNode = node.appendChild(document.createElement('ul'));
+				ulNode.className = 'room-timeline';
+				for (var k=0; k<datetable.locations.length; k++) {
+					var liNode = ulNode.appendChild(document.createElement('li'));
+					appendLocationEvents(datetable.locations[k], liNode);/**/
+				}
+			}
+			function appendLocationEvents(location, node) {
+				for (var k=0; k<datetable.events.length; k++) {
+					var event = datetable.events[k];
+					if (event.location === location) {
+						appendEvent(event, node);
+					}
+				}
+			}
+			function appendEvent(event, node) {
+				var hasOptions = event.options !== undefined;
+				var hasURL, hasAdditionalClass, hasDataAttributes = false;
+
+				if(hasOptions) {
+					hasURL = (event.options.url !== undefined) ? true : false;
+					hasAdditionalClass = (event.options.class !== undefined) ? true : false;
+					hasDataAttributes = (event.options.data !== undefined) ? true : false;
+				}
+
+				var elementType = hasURL ? 'a' : 'span';
+				var aNode = node.appendChild(document.createElement(elementType));
+				var smallNode = aNode.appendChild(document.createElement('small'));
+				aNode.title = event.name;
+
+				if (hasURL) {
+					aNode.href = event.options.url;
+				}
+				if(hasDataAttributes){
+					for (var key in event.options.data) {
+						aNode.setAttribute('data-'+key, event.options.data[key]);
+					}
+				}
+
+				aNode.className = hasAdditionalClass ? 'date-entry ' + event.options.class : 'date-entry';
+				aNode.style.width = computeEventBlockWidth(event);
+				aNode.style.left = computeEventBlockOffset(event);
+				smallNode.textContent = event.name;
+			}
+			function computeEventBlockWidth(event) {
+				var start = event.startDate;
+				var end = event.endDate;
+				var durationDates = getDuration(start, end);
+				return durationDates / scopeDurationDates * 100 + '%';
+			}
+			function computeEventBlockOffset(event) {
+				var scopeStartDates = datetable.scope.dateStart;
+				var eventStartDates = event.startDate;
+				var datesBeforeEvent =  getDuration(scopeStartDates, eventStartDates);
+				return datesBeforeEvent / scopeDurationDates * 100 + '%';
+			}
+
+			var datetable = this.datetable;
+			var scopeDurationDates = getDuration(datetable.scope.dateStart, datetable.scope.dateEnd);
+			var container = document.querySelector(selector);
+			checkContainerPrecondition(container);
+			emptyNode(container);
+			appendDatetableAside(container);
+			appendDatetableSection(container);
+		}
+	};
+
+})();
diff --git a/dist/scripts/timetable.min.js b/dist/scripts/timetable.min.js
index 8ee4fab..7b58f41 100644
--- a/dist/scripts/timetable.min.js
+++ b/dist/scripts/timetable.min.js
@@ -1 +1 @@
-"use strict";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.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){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},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<f.locations.length;e++){var n=t.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=f.locations[e]}}function r(t){var e=t.appendChild(document.createElement("section")),n=e.appendChild(document.createElement("time"));i(n),l(n)}function i(t){for(var e=t.appendChild(document.createElement("header")),n=e.appendChild(document.createElement("ul")),o=!1,r=!1,i=f.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!==f.scope.hourEnd||f.scope.hourStart===f.scope.hourEnd&&!r||(o=!0),24===++i&&(i=0,r=!0)}}function l(t){var e=t.appendChild(document.createElement("ul"));e.className="room-timeline";for(var n=0;n<f.locations.length;n++){var o=e.appendChild(document.createElement("li"));u(f.locations[n],o)}}function u(t,e){for(var n=0;n<f.events.length;n++){var o=f.events[n];o.location===t&&d(o,e)}}function d(t,e){var n,o,r=void 0!==t.options,i=!1;r&&(n=void 0!==t.options.url,o=void 0!==t.options["class"],i=void 0!==t.options.data);var a=n?"a":"span",c=e.appendChild(document.createElement(a)),s=c.appendChild(document.createElement("small"));if(c.title=t.name,n&&(c.href=t.options.url),i)for(var l in t.options.data)c.setAttribute("data-"+l,t.options.data[l]);c.className=o?"time-entry "+t.options["class"]:"time-entry",c.style.width=h(t),c.style.left=m(t),s.textContent=t.name}function h(t){var e=t.startDate,n=t.endDate,o=p(e,n);return o/v*100+"%"}function p(t,e){return(e.getTime()-t.getTime())/1e3/60/60}function m(t){var e=f.scope.hourStart,n=t.startDate.getHours()+t.startDate.getMinutes()/60,o=a(e,n);return o/v*100+"%"}var f=this.timetable,v=a(f.scope.hourStart,f.scope.hourEnd),E=document.querySelector(t);e(E),c(E),n(E),r(E)}}}();
\ No newline at end of file
+"use strict";var Datetable=function(){this.scope={dateStart:new Date(2016,9,3),dateEnd:new Date(2016,9,4)},this.locations=[],this.events=[]};Datetable.Renderer=function(t){if(!(t instanceof Datetable))throw new Error("Initialize renderer using a Datetable");this.datetable=t},function(){function t(t,e){return e.indexOf(t)!==-1}function e(t,e){var n=t instanceof Date&&e instanceof Date,o=t<e;return n&&o}function n(t,e){return new Date(e-t).getTime()}function o(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function a(t){var e=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],n=e[t.getMonth()]+" "+t.getDate();return n}Datetable.prototype={setScope:function(t,n){if(!e(t,n))throw new RangeError("Datetable scope should consist of (start, end) in Date format");return this.scope.dateStart=t,this.scope.dateEnd=n,this},addLocations:function(e){function n(){return e instanceof Array}var o=this.locations;if(!n())throw new Error("Tried to add locations in wrong format");return e.forEach(function(e){if(t(e,o))throw new Error("Location already exists");o.push(e)}),this},addEvent:function(n,o,a,r,i){if(!t(o,this.locations))throw new Error("Unknown location");if(!e(a,r))throw new Error("Invalid date range: "+JSON.stringify([a,r]));var c="[object Object]"===Object.prototype.toString.call(i);return this.events.push({name:n,location:o,startDate:a,endDate:r,options:c?i:void 0}),this}},Datetable.Renderer.prototype={draw:function(t){function e(t){if(null===t)throw new Error("Datetable container not found")}function r(t){var e=t.appendChild(document.createElement("aside")),n=e.appendChild(document.createElement("ul"));i(n)}function i(t){for(var e=0;e<f.locations.length;e++){var n=t.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=f.locations[e]}}function c(t){var e=t.appendChild(document.createElement("section")),n=e.appendChild(document.createElement("date"));d(n),l(n)}function d(t){for(var e=t.appendChild(document.createElement("header")),n=e.appendChild(document.createElement("ul")),o=!1,r=f.scope.dateStart;!o;){var i=n.appendChild(document.createElement("li")),c=i.appendChild(document.createElement("span"));c.className="date-label",c.textContent=a(r),r=new Date(r.getTime()+864e5),r>=f.scope.dateEnd&&(i=n.appendChild(document.createElement("li")),c=i.appendChild(document.createElement("span")),c.textContent="",o=!0)}}function l(t){var e=t.appendChild(document.createElement("ul"));e.className="room-timeline";for(var n=0;n<f.locations.length;n++){var o=e.appendChild(document.createElement("li"));s(f.locations[n],o)}}function s(t,e){for(var n=0;n<f.events.length;n++){var o=f.events[n];o.location===t&&u(o,e)}}function u(t,e){var n,o,a=void 0!==t.options,r=!1;a&&(n=void 0!==t.options.url,o=void 0!==t.options["class"],r=void 0!==t.options.data);var i=n?"a":"span",c=e.appendChild(document.createElement(i)),d=c.appendChild(document.createElement("small"));if(c.title=t.name,n&&(c.href=t.options.url),r)for(var l in t.options.data)c.setAttribute("data-"+l,t.options.data[l]);c.className=o?"date-entry "+t.options["class"]:"date-entry",c.style.width=p(t),c.style.left=h(t),d.textContent=t.name}function p(t){var e=t.startDate,o=t.endDate,a=n(e,o);return a/m*100+"%"}function h(t){var e=f.scope.dateStart,o=t.startDate,a=n(e,o);return a/m*100+"%"}var f=this.datetable,m=n(f.scope.dateStart,f.scope.dateEnd),v=document.querySelector(t);e(v),o(v),r(v),c(v)}}}();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 a(t,e){return e.indexOf(t)!==-1}function r(t,e){var n=t instanceof Date&&e instanceof Date,o=t<e;return n&&o}function i(t,e){return e>=t?e-t:24+e-t}function c(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function d(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(a(t,n))throw new Error("Location already exists");n.push(t)}),this},addEvent:function(t,e,n,o,i){if(!a(e,this.locations))throw new Error("Unknown location");if(!r(n,o))throw new Error("Invalid time range: "+JSON.stringify([n,o]));var c="[object Object]"===Object.prototype.toString.call(i);return this.events.push({name:t,location:e,startDate:n,endDate:o,options:c?i: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<m.locations.length;e++){var n=t.appendChild(document.createElement("li")),o=n.appendChild(document.createElement("span"));o.className="row-heading",o.textContent=m.locations[e]}}function a(t){var e=t.appendChild(document.createElement("section")),n=e.appendChild(document.createElement("time"));r(n),l(n)}function r(t){for(var e=t.appendChild(document.createElement("header")),n=e.appendChild(document.createElement("ul")),o=!1,a=!1,r=m.scope.hourStart;!o;){var i=n.appendChild(document.createElement("li")),c=i.appendChild(document.createElement("span"));c.className="time-label",c.textContent=d(r),r!==m.scope.hourEnd||m.scope.hourStart===m.scope.hourEnd&&!a||(o=!0),24===++r&&(r=0,a=!0)}}function l(t){var e=t.appendChild(document.createElement("ul"));e.className="room-timeline";for(var n=0;n<m.locations.length;n++){var o=e.appendChild(document.createElement("li"));s(m.locations[n],o)}}function s(t,e){for(var n=0;n<m.events.length;n++){var o=m.events[n];o.location===t&&u(o,e)}}function u(t,e){var n,o,a=void 0!==t.options,r=!1;a&&(n=void 0!==t.options.url,o=void 0!==t.options["class"],r=void 0!==t.options.data);var i=n?"a":"span",c=e.appendChild(document.createElement(i)),d=c.appendChild(document.createElement("small"));if(c.title=t.name,n&&(c.href=t.options.url),r)for(var l in t.options.data)c.setAttribute("data-"+l,t.options.data[l]);c.className=o?"time-entry "+t.options["class"]:"time-entry",c.style.width=p(t),c.style.left=f(t),d.textContent=t.name}function p(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 f(t){var e=m.scope.hourStart,n=t.startDate.getHours()+t.startDate.getMinutes()/60,o=i(e,n);return o/v*100+"%"}var m=this.timetable,v=i(m.scope.hourStart,m.scope.hourEnd),E=document.querySelector(t);e(E),c(E),n(E),a(E)}}}();
\ No newline at end of file
diff --git a/dist/styles/demo.css b/dist/styles/demo.css
index f88b895..fd2c996 100644
--- a/dist/styles/demo.css
+++ b/dist/styles/demo.css
@@ -1 +1 @@
-body{background:#fcfcfc;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333;font-size:15px}a{text-decoration:none}.row-heading{font-weight:500;font-size:.7em;text-transform:uppercase}.timetable .time-label{font-size:.8em;font-weight:500}.timetable .time-entry.vip-only{background-color:#C490F5;border:1px solid #6A16B8}.timetable .time-entry.vip-only:hover{background-color:#AE67F0}
\ No newline at end of file
+body{background:#fcfcfc;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333;font-size:15px}a{text-decoration:none}.row-heading{font-weight:500;font-size:.7em;text-transform:uppercase}.timetable .time-label,.datetable .date-label{font-size:.8em;font-weight:500}.datetable .date-entry.vip-only{background-color:#C490F5;border:1px solid #6A16B8}.datetable .date-entry.vip-only:hover{background-color:#AE67F0}
\ No newline at end of file
diff --git a/dist/styles/timetablejs.css b/dist/styles/timetablejs.css
index 9cee29d..f4166f5 100644
--- a/dist/styles/timetablejs.css
+++ b/dist/styles/timetablejs.css
@@ -1 +1 @@
-.timetable{box-sizing:border-box}.timetable::after{clear:both;content:"";display:table}.timetable *,.timetable *:before,.timetable *:after{box-sizing:inherit}.timetable ul,.timetable li{margin:0;padding:0;list-style-type:none}.timetable aside,.timetable section{float:left}.timetable aside{width:25%;padding:0!important;margin-top:46px;border-right:5px solid transparent}.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 ul{list-style-type:none;margin:0}.timetable aside li,.timetable time li{height:46px}.timetable section{width:75%;padding:0!important;overflow-x:scroll;-webkit-overflow-scrolling:touch}.timetable section time{white-space:nowrap;display:inline-block}.timetable section header{height:46px;transform-style:preserve-3d;font-size:0}.timetable section header::after{clear:both;content:"";display:table}.timetable section header li{display:inline-block;font-size:1rem;overflow:visible;width:0;line-height:46px;display:inline-block;position:relative}.timetable section header li:not(:last-of-type){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 .time-label{transform:translateX(-100%)}@media only screen and (max-width:960px){.timetable aside{width:40%}.timetable section{width:60%}}.timetable ul.room-timeline{border-left:none;position:relative;overflow:hidden}.timetable ul.room-timeline li{position:relative;background-color:#F4F4F4}.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(to right,#E5E5E5 1px,transparent 1px);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(to right,#E5E5E5,#E5E5E5 1px,#F4F4F4 1px,#F4F4F4 2px,#E5E5E5 2px,#E5E5E5 3px,transparent 3px,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#EC6A5E;transition:200ms background-color;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{box-sizing:border-box}.timetable::after{clear:both;content:"";display:table}.timetable *,.timetable *:before,.timetable *:after{box-sizing:inherit}.timetable ul,.timetable li{margin:0;padding:0;list-style-type:none}.timetable aside,.timetable section{float:left}.timetable aside{width:25%;padding:0!important;margin-top:46px;border-right:5px solid transparent}.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 ul{list-style-type:none;margin:0}.timetable aside li,.timetable time li{height:46px}.timetable section{width:75%;padding:0!important;overflow-x:scroll;-webkit-overflow-scrolling:touch}.timetable section time{white-space:nowrap;display:inline-block}.timetable section header{height:46px;transform-style:preserve-3d;font-size:0}.timetable section header::after{clear:both;content:"";display:table}.timetable section header li{display:inline-block;font-size:1rem;overflow:visible;width:0;line-height:46px;display:inline-block;position:relative}.timetable section header li:not(:last-of-type){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 .time-label{transform:translateX(-100%)}@media only screen and (max-width:960px){.timetable aside{width:40%}.timetable section{width:60%}}.timetable ul.room-timeline{border-left:none;position:relative;overflow:hidden}.timetable ul.room-timeline li{position:relative;background-color:#F4F4F4}.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(to right,#E5E5E5 1px,transparent 1px);background-size:24px auto}.timetable ul.room-timeline li:after{background-image:linear-gradient(to right,#E5E5E5,#E5E5E5 1px,#F4F4F4 1px,#F4F4F4 2px,#E5E5E5 2px,#E5E5E5 3px,transparent 3px,transparent);background-size:96px auto;background-position:-2px 0}.timetable .time-entry{background-color:#EC6A5E;transition:200ms background-color;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}.datetable{box-sizing:border-box}.datetable::after{clear:both;content:"";display:table}.datetable *,.datetable *:before,.datetable *:after{box-sizing:inherit}.datetable ul,.datetable li{margin:0;padding:0;list-style-type:none}.datetable aside,.datetable section{float:left}.datetable aside{width:25%;padding:0!important;margin-top:46px;border-right:5px solid transparent}.datetable aside li{padding:0 15px;background-color:#EFEFEF;line-height:46px}.datetable aside li:not(:last-of-type){border-bottom:1px solid #fff}.datetable aside .row-heading{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.datetable ul{list-style-type:none;margin:0}.datetable aside li,.datetable date li{height:46px}.datetable section{width:75%;padding:0!important;overflow-x:scroll;-webkit-overflow-scrolling:touch}.datetable section date{white-space:nowrap;display:inline-block}.datetable section header{height:46px;transform-style:preserve-3d;font-size:0}.datetable section header::after{clear:both;content:"";display:table}.datetable section header li{display:inline-block;font-size:1rem;overflow:visible;width:0;line-height:46px;display:inline-block;position:relative}.datetable section header li:not(:last-of-type){width:96px}.datetable section header li .date-label{display:block;position:absolute;left:48px;transform:translateX(-50%)}@media only screen and (max-width:960px){.datetable aside{width:40%}.datetable section{width:60%}}.datetable ul.room-timeline{border-left:none;position:relative;overflow:hidden}.datetable ul.room-timeline li{position:relative;background-color:#F4F4F4}.datetable ul.room-timeline li:nth-of-type(odd){background-color:#FDFDFD}.datetable ul.room-timeline li:first-of-type{border-top:1px solid #E5E5E5}.datetable ul.room-timeline li:last-of-type{border-bottom:1px solid #E5E5E5}.datetable ul.room-timeline li:not(:last-of-type){border-bottom:none}.datetable ul.room-timeline li:first-child .date-entry{height:44px}.datetable ul.room-timeline li:after,.datetable ul.room-timeline li:before{content:"";position:absolute;z-index:1;left:0;top:0;right:0;bottom:0}.datetable ul.room-timeline li:before{background-image:linear-gradient(to right,#E5E5E5 1px,transparent 1px);background-size:48px auto}.datetable ul.room-timeline li:after{background-image:linear-gradient(to right,#E5E5E5,#E5E5E5 1px,#F4F4F4 1px,#F4F4F4 2px,#E5E5E5 2px,#E5E5E5 3px,transparent 3px,transparent);background-size:96px auto;background-position:-2px 0}.datetable .date-entry{background-color:#EC6A5E;transition:200ms background-color;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}.datetable .date-entry small{position:relative;top:50%;transform:translateY(-50%);display:block}.datetable .date-entry:hover{background-color:#e74030}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index d6c37a8..0389258 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,6 +2,7 @@
 'use strict';
 // generated on 2015-06-09 using generator-gulp-webapp 0.3.0
 var gulp = require('gulp');
+var gulp_concat = require('gulp-concat');
 var $ = require('gulp-load-plugins')();
 var browserSync = require('browser-sync');
 var reload = browserSync.reload;
@@ -25,7 +26,7 @@ gulp.task('styles', function () {
 });
 
 gulp.task('jshint', function () {
-  return gulp.src('app/scripts/**/*.js')
+  return gulp.src('app/scripts/*.js')
     .pipe(reload({stream: true, once: true}))
     .pipe($.jshint())
     .pipe($.jshint.reporter('jshint-stylish'))
@@ -44,7 +45,9 @@ gulp.task('html', ['styles'], function () {
 });
 
 gulp.task('scripts', function(){
-  return gulp.src('app/scripts/plugin.js')
+  return gulp.src('app/scripts/*.js')
+    .pipe(gulp_concat('timetable.js'))
+    .pipe(gulp.dest('dist/scripts'))
     .pipe($.uglify())
     .pipe($.rename('timetable.min.js'))
     .pipe(gulp.dest('dist/scripts'));
@@ -62,13 +65,13 @@ gulp.task('images', function () {
     .pipe(gulp.dest('dist/images'));
 });
 
-gulp.task('fonts', function () {
-  return gulp.src(require('main-bower-files')({
-    filter: '**/*.{eot,svg,ttf,woff,woff2}'
-  }).concat('app/fonts/**/*'))
-    .pipe(gulp.dest('.tmp/fonts'))
-    .pipe(gulp.dest('dist/fonts'));
-});
+// gulp.task('fonts', function () {
+//   return gulp.src(require('main-bower-files')({
+//     filter: '**/*.{eot,svg,ttf,woff,woff2}'
+//   }).concat('app/fonts/**/*'))
+//     .pipe(gulp.dest('.tmp/fonts'))
+//     .pipe(gulp.dest('dist/fonts'));
+// });
 
 gulp.task('extras', function () {
   return gulp.src([
@@ -81,7 +84,8 @@ gulp.task('extras', function () {
 
 gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));
 
-gulp.task('serve', ['styles', 'fonts'], function () {
+// gulp.task('serve', ['styles', 'fonts'], function () {
+gulp.task('serve', ['styles'], function () {
   browserSync({
     notify: false,
     port: 9000,
@@ -97,13 +101,14 @@ gulp.task('serve', ['styles', 'fonts'], function () {
   gulp.watch([
     'app/*.html',
     'app/scripts/**/*.js',
-    'app/images/**/*',
-    '.tmp/fonts/**/*'
+    'app/images/**/*'
+    // '.tmp/fonts/**/*'
   ]).on('change', reload);
 
   gulp.watch('app/styles/**/*.sass', ['styles']);
-  gulp.watch('app/fonts/**/*', ['fonts']);
-  gulp.watch('bower.json', ['wiredep', 'fonts']);
+  // gulp.watch('app/fonts/**/*', ['fonts']);
+  // gulp.watch('bower.json', ['wiredep', 'fonts']);
+  gulp.watch('bower.json', ['wiredep']);
 });
 
 // inject bower components
@@ -123,7 +128,8 @@ gulp.task('wiredep', function () {
     .pipe(gulp.dest('app'));
 });
 
-gulp.task('build', ['jshint', 'html', 'scripts', 'images', 'fonts', 'extras'], function () {
+// gulp.task('build', ['jshint', 'html', 'scripts', 'images', 'fonts', 'extras'], function () {
+gulp.task('build', ['jshint', 'html', 'scripts', 'images', 'extras'], function () {
   return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
 });
 
diff --git a/package.json b/package.json
index 09d27c9..fab3a8e 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "gulp-load-plugins": "^0.8.0",
     "gulp-minify-html": "^0.1.6",
     "gulp-postcss": "^3.0.0",
-    "gulp-sass": "^1.3.3",
+    "gulp-sass": "^2.0.4",
     "gulp-size": "^1.1.0",
     "gulp-sourcemaps": "^1.3.0",
     "gulp-uglify": "^1.0.1",