feat(dayView): add dayViewSidePosition option

Closes #519

.gitignore

@@ -3,3 +3,4 @@ node_modules
 .idea
 build
 coverage
+*.log

docs/examples/examples.json

@@ -70,6 +70,9 @@
 }, {
   "key": "day-view-all-times",
   "label": "Show all times on day view"
+}, {
+  "key": "side-time-position",
+  "label": "Show time on the side of calendar"
 }, {
   "key": "disable-tooltips",
   "label": "Disable tooltips"

docs/examples/side-time-position/javascript.js

@@ -0,0 +1,30 @@
+angular
+  .module('mwl.calendar.docs')
+  .controller('SideTimePositionCtrl', function ($scope, moment, calendarConfig) {
+
+    var vm = this;
+
+    var actions = [{
+      label: '<i class=\'fa fa-pencil\'></i>'
+    }, {
+      label: '<i class=\'fa fa-times\'></i>'
+    }];
+
+    vm.events = [{
+      title: 'An event',
+      startsAt: moment().hours(3).minutes(0).toDate(),
+      endsAt: moment().hours(7).minutes(0).toDate(),
+      actions: actions,
+      color: calendarConfig.colorTypes.warning
+    }, {
+      title: 'Another event',
+      startsAt: moment().hours(5).minutes(0).toDate(),
+      endsAt: moment().hours(12).minutes(0).toDate(),
+      actions: actions,
+      color: calendarConfig.colorTypes.important
+    }];
+
+    vm.calendarView = 'day';
+    vm.viewDate = new Date();
+
+  });

docs/examples/side-time-position/markup.html

@@ -0,0 +1,32 @@
+<div ng-controller="SideTimePositionCtrl as vm">
+
+  <div class="col-md-4">
+    <h3>Side</h3>
+    <mwl-calendar
+      events="vm.events"
+      view="vm.calendarView"
+      view-date="vm.viewDate"
+      day-view-time-position="side">
+    </mwl-calendar>
+  </div>
+
+  <div class="col-md-4">
+    <h3>Default</h3>
+    <mwl-calendar
+      events="vm.events"
+      view="vm.calendarView"
+      view-date="vm.viewDate">
+    </mwl-calendar>
+  </div>
+
+  <div class="col-md-4">
+    <h3>Hidden</h3>
+    <mwl-calendar
+      events="vm.events"
+      view="vm.calendarView"
+      view-date="vm.viewDate"
+      day-view-time-position="hidden">
+    </mwl-calendar>
+  </div>
+
+</div>

src/directives/mwlCalendar.js

@@ -150,7 +150,8 @@ angular
         dayViewSplit: '@',
         dayViewEventChunkSize: '@',
         dayViewEventWidth: '@',
-        templateScope: '=?'
+        templateScope: '=?',
+        dayViewTimePosition: '@'
       },
       controller: 'MwlCalendarCtrl as vm',
       bindToController: true

src/directives/mwlCalendarDay.js

@@ -11,6 +11,10 @@ angular
     vm.calendarEventTitle = calendarEventTitle;
 
     function refreshView() {
+
+      vm.timeHidden = vm.dayViewTimePosition === 'hidden';
+      vm.dayViewTimePositionOffset = vm.dayViewTimePosition !== 'default' ? 0 : 60;
+
       vm.dayViewSplit = vm.dayViewSplit || 30;
       vm.dayViewHeight = calendarHelper.getDayViewHeight(
         vm.dayViewStart,
@@ -105,7 +109,8 @@ angular
         dayViewEventWidth: '=',
         customTemplateUrls: '=?',
         cellModifier: '=',
-        templateScope: '='
+        templateScope: '=',
+        dayViewTimePosition: '='
       },
       controller: 'MwlCalendarDayCtrl as vm',
       bindToController: true

src/less/day.less

@@ -30,14 +30,17 @@
     .day-highlight {
       height: 30px;
     }
+
+    background-color: @eventBorderColor;
+    &:nth-child(odd) {
+      background-color: @rowHover;
+    }
   }
   .cal-hours {
     font-weight: bold;
     font-size: 12px;
   }
-  .cal-day-hour:nth-child(odd) {
-    background-color: @rowHover;
-  }
+
   .cal-day-panel {
     position: relative;
     padding-left: 60px;
@@ -73,3 +76,22 @@
     text-overflow: ellipsis;
   }
 }
+
+mwl-calendar-day.time-hidden {
+  .cal-day-hour-part-time {
+    display: none;
+  }
+}
+
+mwl-calendar-day.time-on-side {
+  .cal-day-box {
+    overflow: visible !important;
+    margin-left: @sideMargin;
+  }
+  .cal-day-panel {
+    min-width: initial !important;
+  }
+  .cal-day-hour-part-time {
+    margin-left: -@sideMargin;
+  }
+}

src/less/variables.less

@@ -18,4 +18,5 @@
 @eventBorderColor: #ffffff;
 @eventBorderRadius:8px;
 @eventMargin: 2px;
-@eventSize: 12px;
+@eventSize: 12px;
+@sideMargin: 55px;

src/templates/calendar.html

@@ -70,6 +70,11 @@
     custom-template-urls="vm.customTemplateUrls"
     cell-modifier="vm.cellModifier"
     template-scope="vm.templateScope"
+    day-view-time-position="vm.dayViewTimePosition || 'default'"
+    ng-class="{
+      'time-on-side' : vm.dayViewTimePosition === 'side',
+      'time-hidden' : vm.dayViewTimePosition === 'hidden'
+    }"
     ng-switch-when="day">
   </mwl-calendar-day>
 </div>

src/templates/calendarDayView.html

@@ -48,7 +48,7 @@
       ng-class="dayEvent.event.cssClass"
       ng-style="{
         top: dayEvent.top - 1 + 'px',
-        left: dayEvent.left + 60 + 'px',
+        left: dayEvent.left +  vm.dayViewTimePositionOffset + 'px',
         height: dayEvent.height + 'px',
         width: dayEvent.width + 'px',
         backgroundColor: dayEvent.event.color.secondary,