diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js
index 0a6936d7..2ba0350e 100644
--- a/src/directives/mwlCalendarHourList.js
+++ b/src/directives/mwlCalendarHourList.js
@@ -4,7 +4,7 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarHourListCtrl', function($scope, moment, calendarConfig, calendarHelper) {
+  .controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarConfig, calendarHelper) {
     var vm = this;
     var dayViewStart, dayViewEnd;
 
@@ -14,10 +14,17 @@ angular
       vm.dayViewSplit = parseInt(vm.dayViewSplit);
       vm.hours = [];
       var dayCounter = moment(vm.viewDate)
-        .clone()
+        .clone();
+
+      if ($attrs.dayWidth) {
+        dayCounter = dayCounter.startOf('week');
+      }
+
+      dayCounter
         .hours(dayViewStart.hours())
         .minutes(dayViewStart.minutes())
         .seconds(dayViewStart.seconds());
+
       for (var i = 0; i <= dayViewEnd.diff(dayViewStart, 'hours'); i++) {
         vm.hours.push({
           label: calendarHelper.formatDate(dayCounter, calendarConfig.dateFormats.hour),
@@ -63,6 +70,10 @@ angular
       });
     };
 
+    vm.getClickedDate = function(baseDate, minutes, days) {
+      return moment(baseDate).clone().add(minutes, 'minutes').add(days || 0, 'days').toDate();
+    };
+
   })
   .directive('mwlCalendarHourList', function(calendarConfig) {
 
@@ -75,6 +86,7 @@ angular
         dayViewStart: '=',
         dayViewEnd: '=',
         dayViewSplit: '=',
+        dayWidth: '=?',
         onTimespanClick: '=',
         onEventTimesChanged: '='
       },
diff --git a/src/less/day.less b/src/less/day.less
index 3b70a578..ce8445b6 100755
--- a/src/less/day.less
+++ b/src/less/day.less
@@ -9,6 +9,18 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     border-bottom: thin dashed @borderColor;
+
+    .cal-day-hour-part-time {
+      width: 60px;
+      text-align: center;
+      float: left;
+    }
+
+    .cal-day-hour-part-spacer {
+      height: 30px;
+      display: inline-block;
+    }
+
   }
   .cal-day-hour {
     .day-highlight {
diff --git a/src/templates/calendarHourList.html b/src/templates/calendarHourList.html
index 6a693553..13e5aad3 100644
--- a/src/templates/calendarHourList.html
+++ b/src/templates/calendarHourList.html
@@ -3,13 +3,32 @@
   <div class="cal-day-hour" ng-repeat="hour in vm.hours track by $index">
 
     <div
-      class="row-fluid cal-day-hour-part"
+      class="cal-day-hour-part"
       ng-repeat="chunk in vm.hourChunks track by chunk"
-      ng-click="vm.onTimespanClick({calendarDate: hour.date.clone().add(vm.dayViewSplit * $index, 'minutes').toDate()})"
+      ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(hour.date, vm.dayViewSplit * $index)})"
       mwl-droppable
-      on-drop="vm.eventDropped(dropData.event, hour.date.clone().add(vm.dayViewSplit * $index, 'minutes').toDate())">
-      <div class="span1 col-xs-1"><strong ng-bind="hour.label" ng-show="$first"></strong></div>
-      <div class="span11 col-xs-11"></div>
+      on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $index))"
+      ng-if="!vm.dayWidth">
+      <div class="cal-day-hour-part-time">
+        <strong ng-bind="hour.label" ng-show="$first"></strong>
+      </div>
+    </div>
+
+    <div
+      class="cal-day-hour-part"
+      ng-repeat="chunk in vm.hourChunks track by chunk"
+      ng-if="vm.dayWidth">
+      <div class="cal-day-hour-part-time">
+        <strong ng-bind="hour.label" ng-show="$first"></strong>
+      </div>
+      <div
+        class="cal-day-hour-part-spacer"
+        ng-repeat="dayIndex in [0, 1, 2, 3, 4, 5, 6]"
+        ng-style="{width: vm.dayWidth + 'px'}"
+        ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex)})"
+        mwl-droppable
+        on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex))">
+      </div>
     </div>
 
   </div>
diff --git a/src/templates/calendarWeekView.html b/src/templates/calendarWeekView.html
index 969f9af7..ba7e333b 100644
--- a/src/templates/calendarWeekView.html
+++ b/src/templates/calendarWeekView.html
@@ -34,6 +34,7 @@
       day-view-start="vm.dayViewStart"
       day-view-end="vm.dayViewEnd"
       day-view-split="vm.dayViewSplit"
+      day-width="vm.dayColumnDimensions.width"
       view-date="vm.viewDate"
       on-timespan-click="vm.onTimespanClick"
       ng-if="vm.showTimes">
@@ -42,7 +43,7 @@
     <div class="row">
       <div class="col-xs-12">
         <div
-          class="cal-row-fluid "
+          class="cal-row-fluid"
           ng-repeat="event in vm.view.events track by event.$id">
           <div
             ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + (vm.showTimes ? '' : ' cal-offset' + event.dayOffset) + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass"