fix(dayView): allow day view start and end to use minutes rather than…

… just hours Closes #340
mattlewis92 · May 30, 2016 · c98152c · c98152c
1 parent 8ef6f96
commit c98152c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 20 deletions.
diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js
@@ -13,27 +13,34 @@ angular
       dayViewEnd = moment(vm.dayViewEnd || '23:00', 'HH:mm');
       vm.dayViewSplit = parseInt(vm.dayViewSplit);
       vm.hours = [];
-      var dayCounter = moment(vm.viewDate)
-        .clone();
+      var dayCounter = moment(vm.viewDate).clone();
 
       if ($attrs.dayWidth) {
         dayCounter = dayCounter.startOf('week');
       }
 
-      dayCounter
-        .hours(dayViewStart.hours())
-        .minutes(dayViewStart.minutes())
-        .seconds(dayViewStart.seconds());
+      dayCounter = dayCounter.startOf('day').hours(dayViewStart.hours());
 
-      for (var i = 0; i <= dayViewEnd.diff(dayViewStart, 'hours'); i++) {
-        vm.hours.push({
+      var hourLength = dayViewEnd.clone().startOf('hour').diff(dayViewStart.clone().startOf('hour'), 'hours');
+      var hourChunkLength = (60 / vm.dayViewSplit);
+
+      for (var i = 0; i <= hourLength; i++) {
+        var hour = {
           label: calendarHelper.formatDate(dayCounter, calendarConfig.dateFormats.hour),
-          date: dayCounter.clone()
-        });
+          date: dayCounter.clone(),
+          chunkIndexStart: 0,
+          chunkIndexEnd: hourChunkLength - 1
+        };
+        if (i === 0) {
+          hour.chunkIndexStart += dayViewStart.diff(dayCounter, 'minutes') / vm.dayViewSplit;
+        } else if (i === hourLength) {
+          hour.chunkIndexEnd -= dayViewEnd.diff(dayCounter, 'minutes') / vm.dayViewSplit;
+        }
+        vm.hours.push(hour);
         dayCounter.add(1, 'hour');
       }
       vm.hourChunks = [];
-      for (var j = 0; j < (60 / vm.dayViewSplit); j++) {
+      for (var j = 0; j < hourChunkLength; j++) {
         vm.hourChunks.push(j);
       }
     }

diff --git a/src/services/calendarHelper.js b/src/services/calendarHelper.js
@@ -336,8 +336,8 @@ angular
     function getDayViewHeight(dayViewStart, dayViewEnd, dayViewSplit) {
       var dayViewStartM = moment(dayViewStart || '00:00', 'HH:mm');
       var dayViewEndM = moment(dayViewEnd || '23:00', 'HH:mm');
-      var hourHeight = (60 / dayViewSplit) * 30;
-      return ((dayViewEndM.diff(dayViewStartM, 'hours') + 1) * hourHeight) + 2;
+      var multiplier = 60 / dayViewSplit / 2;
+      return dayViewEndM.diff(dayViewStartM, 'minutes') * multiplier;
     }
 
     function loadTemplates() {

diff --git a/src/templates/calendarHourList.html b/src/templates/calendarHourList.html
@@ -15,7 +15,7 @@
       on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(hour.date, vm.dayViewSplit * $index))"
       on-drag-select-move="vm.onDragSelectMove(vm.getClickedDate(hour.date, vm.dayViewSplit * ($index + 1)))"
       on-drag-select-end="vm.onDragSelectEnd(vm.getClickedDate(hour.date, vm.dayViewSplit * ($index + 1)))"
-      ng-if="!vm.dayWidth">
+      ng-if="!vm.dayWidth && $index >= hour.chunkIndexStart && $index <= hour.chunkIndexEnd">
       <div class="cal-day-hour-part-time">
         <strong ng-bind="hour.label" ng-show="$first"></strong>
       </div>
@@ -24,7 +24,7 @@
     <div
       class="cal-day-hour-part"
       ng-repeat="chunk in vm.hourChunks track by chunk"
-      ng-if="vm.dayWidth">
+      ng-if="vm.dayWidth && $index >= hour.chunkIndexStart && $index <= hour.chunkIndexEnd">
       <div class="cal-day-hour-part-time">
         <strong ng-bind="hour.label" ng-show="$first"></strong>
       </div>

diff --git a/test/unit/directives/mwlCalendarHourList.spec.js b/test/unit/directives/mwlCalendarHourList.spec.js
@@ -143,4 +143,18 @@ describe('mwlCalendarHourList directive', function() {
     expect(MwlCalendarCtrl.dateRangeSelect).to.be.undefined;
   });
 
+  it('should hide any chunks that occur before day view start', function() {
+    expect(MwlCalendarCtrl.hours[0].chunkIndexStart).to.equal(0);
+    scope.dayViewStart = '06:30';
+    scope.$apply();
+    expect(MwlCalendarCtrl.hours[0].chunkIndexStart).to.equal(1);
+  });
+
+  it('should hide any chunks that occur after day view start', function() {
+    expect(MwlCalendarCtrl.hours[MwlCalendarCtrl.hours.length - 1].chunkIndexEnd).to.equal(1);
+    scope.dayViewEnd = '09:30';
+    scope.$apply();
+    expect(MwlCalendarCtrl.hours[MwlCalendarCtrl.hours.length - 1].chunkIndexEnd).to.equal(0);
+  });
+
 });
diff --git a/test/unit/services/calendarHelper.spec.js b/test/unit/services/calendarHelper.spec.js
@@ -582,15 +582,15 @@ describe('calendarHelper', function() {
   });
 
   describe('getDayViewHeight', function() {
-    var dayViewHeight;
 
-    beforeEach(function() {
-      dayViewHeight = calendarHelper.getDayViewHeight('01:00', '22:00', 10);
+    it('should calculate the height of the day view with a 10 minute hour chunk', function() {
+      expect(calendarHelper.getDayViewHeight('01:00', '22:00', 10)).to.equal(3780);
     });
 
-    it('should calculate the height of the day view', function() {
-      expect(dayViewHeight).to.equal(3962);
+    it('should calculate the height of the day view with a 30 minute hour chunk', function() {
+      expect(calendarHelper.getDayViewHeight('01:00', '22:00', 30)).to.equal(1260);
     });
+
   });
 
   describe('getWeekViewWithTimes', function() {