From 80bdc39b119814e306fc197558b7b80ab25d2a89 Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Mon, 25 Jul 2016 18:11:30 +0100 Subject: [PATCH] fix(dayView): have day view start and end respect minutes BREAKING CHANGE: The `day-view-start` and `day-view-end` now respect the minutes values. This means the `day-view-start` value must now be the end of the hour instead of the beginning of the next hour Before: ``` day-view-end="22:00" ``` After: ``` day-view-end="22:59" ``` Closes #344 --- README.md | 30 ++--- docs/examples/day-view-start-end/markup.html | 2 +- docs/examples/kitchen-sink/markup.html | 2 +- src/directives/mwlCalendarDay.js | 11 +- src/directives/mwlCalendarHourList.js | 44 +++---- src/services/calendarHelper.js | 111 ++++++------------ src/templates/calendarDayView.html | 34 +++--- src/templates/calendarHourList.html | 38 +++--- src/templates/calendarWeekView.html | 2 +- test/unit/directives/mwlCalendar.spec.js | 2 +- test/unit/directives/mwlCalendarDay.spec.js | 12 +- .../directives/mwlCalendarHourList.spec.js | 6 +- test/unit/directives/mwlCalendarMonth.spec.js | 2 +- test/unit/directives/mwlCalendarWeek.spec.js | 6 +- test/unit/directives/mwlCalendarYear.spec.js | 2 +- test/unit/services/calendarHelper.spec.js | 54 ++++----- 16 files changed, 153 insertions(+), 205 deletions(-) diff --git a/README.md b/README.md index 00223439..b63411e8 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ https://mattlewis92.github.io/angular-bootstrap-calendar/ This plugin is an AngularJS port of the original jQuery bootstrap calendar that can be found here: http://bootstrap-calendar.azurewebsites.net/ -The layout and functionality is intended to be exactly the same, but without the overhead of including jQuery just for a calendar. +The layout and functionality is intended to be exactly the same, but without the overhead of including jQuery just for a calendar. All credits for the UI/UX and the less files of the calendar go to the original author. @@ -141,7 +141,7 @@ $scope.events = [ This variable will be assigned to the calendar title. If you want to change the formatting you can use the `calendarConfig` or just override the appropriate method in the `calendarTitle` factory. -### on-event-click +### on-event-click This expression is called when an event is clicked on the calendar. `calendarEvent` can be used in the expression and contains the calendar event that was clicked on. @@ -149,19 +149,19 @@ This expression is called when an event is clicked on the calendar. `calendarEve This expression is called when an event is dragged and dropped or resized into a different date / time on the calendar. The available values that are passed to the expression are: `calendarEvent`, `calendarNewEventStart`, `calendarNewEventEnd` and `calendarDraggedFromDate` (month view only). The directive won't change the event object and leaves that up to you to implement. Please note drag and drop is only available by including the [interact.js](http://interactjs.io/) library. -### edit-event-html +### edit-event-html If provided this piece of html will be displayed next to an event on the year and month view and will fire the function passed to edit-event-click. -### delete-event-html +### delete-event-html If provided this piece of html will be displayed next to an event on the year and month view and will fire the function passed to delete-event-click. -### on-edit-event-click +### on-edit-event-click This expression is called when an event edit link is clicked on the calendar. `calendarEvent` can be used in the expression and contains the calendar event that was clicked on. -### on-delete-event-click +### on-delete-event-click This expression is called when an event delete link is clicked on the calendar. `calendarEvent` can be used in the expression and contains the calendar event that was clicked on. @@ -183,7 +183,7 @@ An interpolated string in the form of hh:mm to start the day view at, e.g. setti ### day-view-end -An interpolated string in the form of hh:mm to end the day view at, e.g. setting it to 22:00 will end the day view at 10pm. Any minutes must be divisible by the `day-view-split` value. +An interpolated string in the form of hh:mm to end the day view at, e.g. setting it to 22:59 will end the day view at 11pm. ### day-view-split @@ -195,7 +195,7 @@ The number of pixels to "snap" event drag and resizes to. Default: 30 ### on-view-change-click -An optional expression that is evaluated when the view is changed by clicking on a date. Return false from the expression function to disable the view change. `calendarDate` can be used in the expression and contains the date that was selected. `calendarNextView` is the view that the calendar will be changed to. +An optional expression that is evaluated when the view is changed by clicking on a date. Return false from the expression function to disable the view change. `calendarDate` can be used in the expression and contains the date that was selected. `calendarNextView` is the view that the calendar will be changed to. ### cell-modifier @@ -247,7 +247,7 @@ angular.module('myModule') ## Custom directive templates -All calendar template urls can be changed using the `calendarConfig` as illustrated above. +All calendar template urls can be changed using the `calendarConfig` as illustrated above. Please note that even patch releases may change templates which could break your app, so if using a custom template it is recommended that you pin the version of this module and review all changes when updating the version. @@ -288,13 +288,13 @@ You can either use angular's date filter or moment.js to format dates. The defau ```javascript angular.module('myModule') .config(function(calendarConfig) { - + calendarConfig.dateFormatter = 'moment'; // use moment to format dates - + }); -``` +``` -Then you just need to include the appropriate locale files for your app. +Then you just need to include the appropriate locale files for your app. If you want to dynamically change the locale for angular and not include all of the available angular locale files [try this library](https://github.com/lgalfaso/angular-dynamic-locale). @@ -318,10 +318,10 @@ For a full list of all available formats and their defaults see [calendarConfig. * Install local dev dependencies: `npm install` while current directory is this repo ### Development server -Run `npm start` to start a development server on port 8000 with auto reload + run tests. +Run `npm start` to start a development server on port 8000 with auto reload + run tests. ### Testing -Run `npm test` to run tests once or `npm run test:watch` to continually run tests (this is automatic when you run `npm start`). +Run `npm test` to run tests once or `npm run test:watch` to continually run tests (this is automatic when you run `npm start`). ### Build Run `npm run build` to build the project files in the dist folder diff --git a/docs/examples/day-view-start-end/markup.html b/docs/examples/day-view-start-end/markup.html index 9d36a17f..742f1215 100644 --- a/docs/examples/day-view-start-end/markup.html +++ b/docs/examples/day-view-start-end/markup.html @@ -5,6 +5,6 @@ view="vm.calendarView" view-date="vm.viewDate" day-view-start="09:00" - day-view-end="17:00"> + day-view-end="17:59"> diff --git a/docs/examples/kitchen-sink/markup.html b/docs/examples/kitchen-sink/markup.html index 2280d660..e0817557 100644 --- a/docs/examples/kitchen-sink/markup.html +++ b/docs/examples/kitchen-sink/markup.html @@ -58,7 +58,7 @@

{{ vm.calendarTitle }}

on-delete-event-click="vm.eventDeleted(calendarEvent)" cell-is-open="vm.isCellOpen" day-view-start="06:00" - day-view-end="22:00" + day-view-end="22:59" day-view-split="30" cell-modifier="vm.modifyCell(calendarCell)"> diff --git a/src/directives/mwlCalendarDay.js b/src/directives/mwlCalendarDay.js index 857e911f..f229faca 100644 --- a/src/directives/mwlCalendarDay.js +++ b/src/directives/mwlCalendarDay.js @@ -18,7 +18,7 @@ angular vm.dayViewSplit ); - var events = calendarHelper.getDayView( + var view = calendarHelper.getDayView( vm.events, vm.viewDate, vm.dayViewStart, @@ -26,13 +26,8 @@ angular vm.dayViewSplit ); - vm.allDayEvents = events.filter(function(event) { - return event.allDay; - }); - - vm.nonAllDayEvents = events.filter(function(event) { - return !event.allDay; - }); + vm.allDayEvents = view.allDayEvents; + vm.nonAllDayEvents = view.events; } diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js index 8d2d8dd4..92395bdd 100644 --- a/src/directives/mwlCalendarHourList.js +++ b/src/directives/mwlCalendarHourList.js @@ -1,41 +1,31 @@ 'use strict'; var angular = require('angular'); +var calendarUtils = require('calendar-utils'); angular .module('mwl.calendar') - .controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarConfig, calendarHelper) { + .controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarHelper) { var vm = this; - var dayViewStart, dayViewEnd; function updateDays() { - dayViewStart = moment(vm.dayViewStart || '00:00', 'HH:mm'); - dayViewEnd = moment(vm.dayViewEnd || '23:00', 'HH:mm'); - vm.dayViewSplit = parseInt(vm.dayViewSplit); - vm.hours = []; - var dayCounter = moment(vm.viewDate) - .clone(); - if ($attrs.dayWidth) { - dayCounter = dayCounter.startOf('week'); - } + vm.dayViewSplit = parseInt(vm.dayViewSplit); + var dayStart = (vm.dayViewStart || '00:00').split(':'); + var dayEnd = (vm.dayViewEnd || '23:59').split(':'); + vm.hourGrid = calendarUtils.getDayViewHourGrid({ + viewDate: $attrs.dayWidth ? moment(vm.viewDate).startOf('week').toDate() : moment(vm.viewDate).toDate(), + hourSegments: 60 / vm.dayViewSplit, + dayStart: { + hour: dayStart[0], + minute: dayStart[1] + }, + dayEnd: { + hour: dayEnd[0], + minute: dayEnd[1] + } + }); - 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), - date: dayCounter.clone() - }); - dayCounter.add(1, 'hour'); - } - vm.hourChunks = []; - for (var j = 0; j < (60 / vm.dayViewSplit); j++) { - vm.hourChunks.push(j); - } } var originalLocale = moment.locale(); diff --git a/src/services/calendarHelper.js b/src/services/calendarHelper.js index 4d68b617..93803440 100644 --- a/src/services/calendarHelper.js +++ b/src/services/calendarHelper.js @@ -229,81 +229,46 @@ angular function getDayView(events, viewDate, dayViewStart, dayViewEnd, dayViewSplit) { - var dayStartHour = moment(dayViewStart || '00:00', 'HH:mm').hours(); - var dayEndHour = moment(dayViewEnd || '23:00', 'HH:mm').hours(); - var hourHeight = (60 / dayViewSplit) * 30; - var calendarStart = moment(viewDate).startOf('day').add(dayStartHour, 'hours'); - var calendarEnd = moment(viewDate).startOf('day').add(dayEndHour + 1, 'hours'); - var calendarHeight = (dayEndHour - dayStartHour + 1) * hourHeight; - var hourHeightMultiplier = hourHeight / 60; - var buckets = []; - var eventsInPeriod = filterEventsInPeriod( - events, - moment(viewDate).startOf('day').toDate(), - moment(viewDate).endOf('day').toDate() - ); - - return eventsInPeriod.map(function(event) { - if (moment(event.startsAt).isBefore(calendarStart)) { - event.top = 0; - } else { - event.top = (moment(event.startsAt).startOf('minute').diff(calendarStart.startOf('minute'), 'minutes') * hourHeightMultiplier) - 2; - } - - if (moment(event.endsAt || event.startsAt).isAfter(calendarEnd)) { - event.height = calendarHeight - event.top; - } else { - var diffStart = event.startsAt; - if (moment(event.startsAt).isBefore(calendarStart)) { - diffStart = calendarStart.toDate(); - } - if (!event.endsAt) { - event.height = 30; - } else { - event.height = moment(event.endsAt).diff(moment(diffStart), 'minutes') * hourHeightMultiplier; - } - } - - if (event.top - event.height > calendarHeight) { - event.height = 0; - } - - event.left = 0; - - return event; - }).filter(function(event) { - return event.height > 0; - }).map(function(event) { - - var cannotFitInABucket = true; - buckets.forEach(function(bucket, bucketIndex) { - var canFitInThisBucket = true; + var dayStart = (dayViewStart || '00:00').split(':'); + var dayEnd = (dayViewEnd || '23:59').split(':'); - 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; - } - }); + var allDayEvents = events.filter(function(event) { + return event.allDay; + }); - if (canFitInThisBucket && cannotFitInABucket) { - cannotFitInABucket = false; - event.left = bucketIndex * 150; - buckets[bucketIndex].push(event); - } + var nonAllDayEvents = events.filter(function(event) { + return !event.allDay; + }); - }); + var view = calendarUtils.getDayView({ + events: nonAllDayEvents.map(function(event) { // hack required to work with event API + event.start = event.startsAt; + event.end = event.endsAt; + return event; + }), + viewDate: viewDate, + hourSegments: 60 / dayViewSplit, + dayStart: { + hour: dayStart[0], + minute: dayStart[1] + }, + dayEnd: { + hour: dayEnd[0], + minute: dayEnd[1] + }, + eventWidth: 150, + segmentHeight: 30 + }); - if (cannotFitInABucket) { - event.left = buckets.length * 150; - buckets.push([event]); - } + // remove hack to work with new event API + nonAllDayEvents.forEach(function(event) { + delete event.start; + delete event.end; + }); - return event; + view.allDayEvents = allDayEvents; - }); + return view; } @@ -326,13 +291,15 @@ angular dayViewStart, dayViewEnd, dayViewSplit - ); + ).events; newEvents = newEvents.concat(newDayEvents); }); weekView.eventRows = [{ - row: newEvents.map(function(event) { + row: newEvents.map(function(dayEvent) { + var event = dayEvent.event; return { event: event, + top: dayEvent.top, offset: calendarUtils.getDayOffset( {start: event.startsAt, end: event.endsAt}, moment(viewDate).startOf('week') @@ -345,7 +312,7 @@ angular function getDayViewHeight(dayViewStart, dayViewEnd, dayViewSplit) { var dayViewStartM = moment(dayViewStart || '00:00', 'HH:mm'); - var dayViewEndM = moment(dayViewEnd || '23:00', 'HH:mm'); + var dayViewEndM = moment(dayViewEnd || '23:59', 'HH:mm'); var hourHeight = (60 / dayViewSplit) * 30; return ((dayViewEndM.diff(dayViewStartM, 'hours') + 1) * hourHeight) + 2; } diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html index d4222f3d..fb6da4a9 100644 --- a/src/templates/calendarDayView.html +++ b/src/templates/calendarDayView.html @@ -41,41 +41,41 @@
+ on-resize="vm.eventResized(event.event, edge, y / 30)" + on-resize-end="vm.eventResizeComplete(event.event, edge, y / 30)"> - , - + , + - - + + + ng-click="vm.onEditEventClick({calendarEvent: event.event})"> + ng-click="vm.onDeleteEventClick({calendarEvent: event.event})">
diff --git a/src/templates/calendarHourList.html b/src/templates/calendarHourList.html index 90076eed..9e8317cc 100644 --- a/src/templates/calendarHourList.html +++ b/src/templates/calendarHourList.html @@ -1,32 +1,32 @@
-
+
- +
- +  
+ on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex), dayIndex)" + on-drag-select-move="vm.onDragSelectMove(vm.getClickedDate(segment.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))" + on-drag-select-end="vm.onDragSelectEnd(vm.getClickedDate(segment.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))">
diff --git a/src/templates/calendarWeekView.html b/src/templates/calendarWeekView.html index a80eba6d..a8b2b4d5 100644 --- a/src/templates/calendarWeekView.html +++ b/src/templates/calendarWeekView.html @@ -49,7 +49,7 @@ ng-repeat="eventRow in row.row track by eventRow.event.$id" ng-class="'cal-cell' + (vm.showTimes ? 1 : eventRow.span) + (vm.showTimes ? '' : ' cal-offset' + eventRow.offset)" ng-style="{ - top: vm.showTimes ? ((eventRow.event.top + 2) + 'px') : 'auto', + top: vm.showTimes ? ((eventRow.top) + 'px') : 'auto', position: vm.showTimes ? 'absolute' : 'inherit', width: vm.showTimes ? (vm.dayColumnDimensions.width + 'px') : '', left: vm.showTimes ? (vm.dayColumnDimensions.width * eventRow.offset) + 15 + 'px' : '' diff --git a/test/unit/directives/mwlCalendar.spec.js b/test/unit/directives/mwlCalendar.spec.js index 6f9cc81c..13a2f56d 100644 --- a/test/unit/directives/mwlCalendar.spec.js +++ b/test/unit/directives/mwlCalendar.spec.js @@ -28,7 +28,7 @@ describe('mwlCalendar directive', function() { 'on-delete-event-click="vm.eventDeleted(calendarEvent)" ' + 'cell-is-open="true" ' + 'day-view-start="06:00" ' + - 'day-view-end="22:00" ' + + 'day-view-end="22:59" ' + 'day-view-split="30" ' + 'cell-modifier="vm.modifyCell(calendarCell)"> ' + ''; diff --git a/test/unit/directives/mwlCalendarDay.spec.js b/test/unit/directives/mwlCalendarDay.spec.js index b32bba3b..dd71dccd 100644 --- a/test/unit/directives/mwlCalendarDay.spec.js +++ b/test/unit/directives/mwlCalendarDay.spec.js @@ -27,7 +27,7 @@ describe('mwlCalendarDay directive', function() { //These variables MUST be set as a minimum for the calendar to work vm.viewDate = calendarDay; vm.dayViewStart = '06:00'; - vm.dayViewEnd = '22:00'; + vm.dayViewEnd = '22:59'; vm.dayViewsplit = 30; vm.events = [ { @@ -87,12 +87,12 @@ describe('mwlCalendarDay directive', function() { sinon.stub(calendarHelper, 'getDayViewHeight').returns(1000); var event1 = {event: 'event1'}; var event2 = {event: 'event2', allDay: true}; - sinon.stub(calendarHelper, 'getDayView').returns([event1, event2]); + sinon.stub(calendarHelper, 'getDayView').returns({events: [{event: event1}], allDayEvents: [event2]}); scope.$broadcast('calendar.refreshView'); - expect(calendarHelper.getDayViewHeight).to.have.been.calledWith('06:00', '22:00', 30); + expect(calendarHelper.getDayViewHeight).to.have.been.calledWith('06:00', '22:59', 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.nonAllDayEvents).to.eql([event1]); + expect(calendarHelper.getDayView).to.have.been.calledWith(scope.events, scope.viewDate, '06:00', '22:59', 30); + expect(MwlCalendarCtrl.nonAllDayEvents).to.eql([{event: event1}]); expect(MwlCalendarCtrl.allDayEvents).to.eql([event2]); }); @@ -147,7 +147,7 @@ describe('mwlCalendarDay directive', function() { scope.$broadcast('calendar.refreshView'); scope.dayViewSplit = 15; scope.$apply(); - expect(MwlCalendarCtrl.nonAllDayEvents[0].height).to.equal(2040); + expect(MwlCalendarCtrl.nonAllDayEvents[0].height).to.equal(2038); }); }); diff --git a/test/unit/directives/mwlCalendarHourList.spec.js b/test/unit/directives/mwlCalendarHourList.spec.js index 520f1064..ac070768 100644 --- a/test/unit/directives/mwlCalendarHourList.spec.js +++ b/test/unit/directives/mwlCalendarHourList.spec.js @@ -22,7 +22,7 @@ describe('mwlCalendarHourList directive', function() { function prepareScope(vm) { //These variables MUST be set as a minimum for the calendar to work vm.dayViewStart = '06:00'; - vm.dayViewEnd = '22:00'; + vm.dayViewEnd = '22:59'; vm.dayViewsplit = 30; showModal = sinon.spy(); @@ -55,7 +55,7 @@ describe('mwlCalendarHourList directive', function() { }); it('should define a list of hours', function() { - expect(MwlCalendarCtrl.hours.length).to.equal(17); + expect(MwlCalendarCtrl.hourGrid.length).to.equal(17); }); it('should update the list of hours when the calendar refreshes if the locale changes', function() { @@ -63,7 +63,7 @@ describe('mwlCalendarHourList directive', function() { scope.dayViewStart = '00:00'; scope.$apply(); scope.$broadcast('calendar.refreshView'); - expect(MwlCalendarCtrl.hours.length).to.equal(23); + expect(MwlCalendarCtrl.hourGrid.length).to.equal(23); moment.locale.restore(); }); diff --git a/test/unit/directives/mwlCalendarMonth.spec.js b/test/unit/directives/mwlCalendarMonth.spec.js index dc313b7a..72034191 100644 --- a/test/unit/directives/mwlCalendarMonth.spec.js +++ b/test/unit/directives/mwlCalendarMonth.spec.js @@ -33,7 +33,7 @@ describe('mwlCalendarMonth directive', function() { vm.viewDate = calendarDay; vm.cellIsOpen = true; vm.dayViewStart = '06:00'; - vm.dayViewEnd = '22:00'; + vm.dayViewEnd = '22:59'; vm.dayViewsplit = 30; vm.events = [ { diff --git a/test/unit/directives/mwlCalendarWeek.spec.js b/test/unit/directives/mwlCalendarWeek.spec.js index 4406365f..d7d5c62f 100644 --- a/test/unit/directives/mwlCalendarWeek.spec.js +++ b/test/unit/directives/mwlCalendarWeek.spec.js @@ -28,7 +28,7 @@ describe('mwlCalendarWeek directive', function() { //These variables MUST be set as a minimum for the calendar to work vm.viewDate = calendarDay; vm.dayViewStart = '06:00'; - vm.dayViewEnd = '22:00'; + vm.dayViewEnd = '22:59'; vm.dayViewsplit = 30; vm.events = [ { @@ -92,14 +92,14 @@ describe('mwlCalendarWeek directive', function() { sinon.stub(calendarHelper, 'getWeekView').returns({event: 'event1'}); sinon.stub(calendarHelper, 'getWeekViewWithTimes').returns({event: 'event2'}); scope.$broadcast('calendar.refreshView'); - expect(calendarHelper.getDayViewHeight).to.have.been.calledWith('06:00', '22:00', 30); + expect(calendarHelper.getDayViewHeight).to.have.been.calledWith('06:00', '22:59', 30); expect(MwlCalendarCtrl.dayViewHeight).to.equal(1000); expect(calendarHelper.getWeekView).to.have.been.calledWith(scope.events, scope.viewDate); expect(MwlCalendarCtrl.view).to.eql({event: 'event1'}); MwlCalendarCtrl.showTimes = true; scope.$broadcast('calendar.refreshView'); - expect(calendarHelper.getWeekViewWithTimes).to.have.been.calledWith(scope.events, scope.viewDate, '06:00', '22:00', 30); + expect(calendarHelper.getWeekViewWithTimes).to.have.been.calledWith(scope.events, scope.viewDate, '06:00', '22:59', 30); expect(MwlCalendarCtrl.view).to.eql({event: 'event2'}); }); diff --git a/test/unit/directives/mwlCalendarYear.spec.js b/test/unit/directives/mwlCalendarYear.spec.js index e5a366e7..28d338ab 100644 --- a/test/unit/directives/mwlCalendarYear.spec.js +++ b/test/unit/directives/mwlCalendarYear.spec.js @@ -30,7 +30,7 @@ describe('mwlCalendarYear directive', function() { vm.viewDate = calendarDay; vm.cellIsOpen = true; vm.dayViewStart = '06:00'; - vm.dayViewEnd = '22:00'; + vm.dayViewEnd = '22:59'; vm.dayViewsplit = 30; vm.events = [ { diff --git a/test/unit/services/calendarHelper.spec.js b/test/unit/services/calendarHelper.spec.js index 76f44d15..362897e6 100644 --- a/test/unit/services/calendarHelper.spec.js +++ b/test/unit/services/calendarHelper.spec.js @@ -527,37 +527,40 @@ describe('calendarHelper', function() { dayEvents, calendarDay, '00:00', - '23:00', + '23:59', 30 ); }); it('should only contain events for that day', function() { - expect(dayView).to.eql(dayEvents); + expect(dayView.events[0].event).to.eql(dayEvents[0]); + expect(dayView.events[1].event).to.eql(dayEvents[1]); + expect(dayView.events[2].event).to.eql(dayEvents[2]); + expect(dayView.events[3].event).to.eql(dayEvents[3]); }); it('should set the top to 0 if the event starts before the start of the day', function() { - expect(dayView[0].top).to.equal(0); + expect(dayView.events[0].top).to.equal(0); }); it('should set the top correctly if the event starts after the start of the day', function() { - expect(dayView[1].top).to.equal(658); + expect(dayView.events[1].top).to.equal(660); }); it('should set the height correctly if the event finishes after the end of the day', function() { - expect(dayView[1].height).to.equal(782); + expect(dayView.events[1].height).to.equal(779); }); it('should set the height correctly if the event finishes before the end of the day', function() { - expect(dayView[2].height).to.equal(60); + expect(dayView.events[2].height).to.equal(60); }); it('should set the height correctly of events that finish within an hour after the day view end', function() { - expect(dayView[3].height).to.equal(90); + expect(dayView.events[3].height).to.equal(90); }); it('should never exceed the maximum height of the calendar', function() { - expect(dayView[0].height).to.equal(1440); + expect(dayView.events[0].height).to.equal(1439); }); it('should remove events that start and end at the same time', function() { @@ -568,16 +571,16 @@ describe('calendarHelper', function() { }], calendarDay, '00:00', - '23:00', + '23:59', 30 ); - expect(dayView).to.eql([]); + expect(dayView.events).to.eql([]); }); it('should move events across if there are multiple ones on the same line', function() { - expect(dayView[0].left).to.equal(0); - expect(dayView[1].left).to.equal(150); - expect(dayView[2].left).to.equal(300); + expect(dayView.events[0].left).to.equal(0); + expect(dayView.events[1].left).to.equal(150); + expect(dayView.events[2].left).to.equal(300); }); }); @@ -586,7 +589,7 @@ describe('calendarHelper', function() { var dayViewHeight; beforeEach(function() { - dayViewHeight = calendarHelper.getDayViewHeight('01:00', '22:00', 10); + dayViewHeight = calendarHelper.getDayViewHeight('01:00', '22:59', 10); }); it('should calculate the height of the day view', function() { @@ -613,7 +616,7 @@ describe('calendarHelper', function() { dayEvents, calendarDay, '00:00', - '23:00', + '23:59', 30 ); }); @@ -622,36 +625,29 @@ describe('calendarHelper', function() { var expectedEventsWeekView = [ { event: { - top: 658, - height: 782, - left: 0, startsAt: new Date('October 19, 2015 11:00:00'), endsAt: new Date('October 21, 2015 11:00:00') }, - offset: 1 + offset: 1, + top: 660 }, { event: { - top: 658, - height: 782, - left: 0, startsAt: new Date('October 20, 2015 11:00:00'), endsAt: new Date('October 21, 2015 11:00:00') }, - offset: 2 + offset: 2, + top: 660, }, { event: { startsAt: new Date('October 20, 2015 11:00:00'), - endsAt: new Date('October 20, 2015 12:00:00'), - top: 658, - height: 60, - left: 150 + endsAt: new Date('October 20, 2015 12:00:00') }, - offset: 2 + offset: 2, + top: 660, } ]; - expect(weekViewWithTimes.days.length).to.equal(7); expect(weekViewWithTimes.eventRows[0].row).to.eql(expectedEventsWeekView); });