feat(allDayEvents): allow events to be displayed as all day on the da…

…y view

Closes #312

README.md

@@ -125,7 +125,8 @@ $scope.events = [
     resizable: true, //Allow an event to be resizable
     incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
     recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
-    cssClass: 'a-css-class-name' //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
+    cssClass: 'a-css-class-name', //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
+    allDay: false // set to true to display the event as an all day event on the day view
   }
 ];
 ```

docs/examples/all-day-events/javascript.js

@@ -0,0 +1,28 @@
+angular
+  .module('mwl.calendar.docs')
+  .controller('AllDayEventsCtrl', function(moment) {
+
+    var vm = this;
+
+    vm.events = [
+      {
+        title: 'An all day event',
+        type: 'warning',
+        startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
+        endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
+        allDay: true
+      }, {
+        title: 'A non all day egent',
+        type: 'important',
+        startsAt: moment().startOf('day').add(7, 'hours').toDate(),
+        endsAt: moment().startOf('day').add(19, 'hours').toDate(),
+        draggable: true,
+        resizable: true
+      }
+    ];
+
+    vm.calendarView = 'day';
+    vm.viewDate = moment().toDate();
+    vm.isCellOpen = true;
+
+  });

docs/examples/all-day-events/markup.html

@@ -0,0 +1,8 @@
+<div ng-controller="AllDayEventsCtrl as vm">
+  <mwl-calendar
+    events="vm.events"
+    view="vm.calendarView"
+    view-date="vm.viewDate"
+    cell-is-open="vm.isCellOpen">
+  </mwl-calendar>
+</div>

docs/examples/examples.json

@@ -64,4 +64,7 @@
 }, {
   "key": "grouping-events",
   "label": "Group month view events"
+}, {
+  "key": "all-day-events",
+  "label": "All day events"
 }]

src/directives/mwlCalendarDay.js

@@ -18,14 +18,22 @@ angular
         vm.dayViewSplit
       );
 
-      vm.view = calendarHelper.getDayView(
+      var events = calendarHelper.getDayView(
         vm.events,
         vm.viewDate,
         vm.dayViewStart,
         vm.dayViewEnd,
         vm.dayViewSplit
       );
 
+      vm.allDayEvents = events.filter(function(event) {
+        return event.allDay;
+      });
+
+      vm.nonAllDayEvents = events.filter(function(event) {
+        return !event.allDay;
+      });
+
     });
 
     vm.eventDragComplete = function(event, minuteChunksMoved) {

src/services/calendarHelper.js

@@ -285,7 +285,9 @@ angular
         buckets.forEach(function(bucket, bucketIndex) {
           var canFitInThisBucket = true;
 
-          bucket.forEach(function(bucketItem) {
+          bucket.filter(function(bucketItem) {
+            return !bucketItem.allDay;
+          }).forEach(function(bucketItem) {
             if (eventIsInPeriod(event, bucketItem.startsAt, bucketItem.endsAt || bucketItem.startsAt) ||
               eventIsInPeriod(bucketItem, event.startsAt, event.endsAt || event.startsAt)) {
               canFitInThisBucket = false;

src/templates/calendarDayView.html

@@ -1,3 +1,30 @@
+<div class="cal-week-box cal-all-day-events-box" ng-if="vm.allDayEvents.length > 0">
+  <div class="cal-day-panel clearfix">
+    <div class="row">
+      <div class="col-xs-12">
+        <div class="cal-row-fluid">
+          <div
+            class="cal-cell-6 day-highlight dh-event-{{ event.type }}"
+            data-event-class
+            ng-repeat="event in vm.allDayEvents track by event.$id">
+            <strong>
+              <span ng-bind="event.startsAt | calendarDate:'datetime':true"></span>
+              <span ng-if="event.endsAt">
+                - <span ng-bind="event.endsAt | calendarDate:'datetime':true"></span>
+              </span>
+            </strong>
+            <a
+              href="javascript:;"
+              class="event-item"
+              ng-bind-html="vm.$sce.trustAsHtml(event.title)">
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="cal-day-box">
   <div class="cal-day-panel clearfix" ng-style="{height: vm.dayViewHeight + 'px'}">
 
@@ -13,7 +40,7 @@
 
     <div
       class="pull-left day-event day-highlight"
-      ng-repeat="event in vm.view track by event.$id"
+      ng-repeat="event in vm.nonAllDayEvents track by event.$id"
       ng-class="'dh-event-' + event.type + ' ' + event.cssClass"
       ng-style="{top: event.top + 'px', left: event.left + 60 + 'px', height: event.height + 'px'}"
       mwl-draggable="event.draggable === true"

test/unit/directives/mwlCalendarDay.spec.js

@@ -82,12 +82,15 @@ describe('mwlCalendarDay directive', function() {
 
   it('should get the new day view when calendar refreshes', function() {
     sinon.stub(calendarHelper, 'getDayViewHeight').returns(1000);
-    sinon.stub(calendarHelper, 'getDayView').returns({event: 'event1'});
+    var event1 = {event: 'event1'};
+    var event2 = {event: 'event2', allDay: true};
+    sinon.stub(calendarHelper, 'getDayView').returns([event1, event2]);
     scope.$broadcast('calendar.refreshView');
     expect(calendarHelper.getDayViewHeight).to.have.been.calledWith('06:00', '22:00', 30);
     expect(MwlCalendarCtrl.dayViewHeight).to.equal(1000);
     expect(calendarHelper.getDayView).to.have.been.calledWith(scope.events, scope.viewDate, '06:00', '22:00', 30);
-    expect(MwlCalendarCtrl.view).to.eql({event: 'event1'});
+    expect(MwlCalendarCtrl.nonAllDayEvents).to.eql([event1]);
+    expect(MwlCalendarCtrl.allDayEvents).to.eql([event2]);
   });
 
   it('should call the callback function when you finish dragging and event', function() {