fix: update event track by ids when the original calendar events are …

…reset

BREAKING CHANGE:
If using a custom template the event track by field has changed from `$id` to `calendarEventId`. It is also now enumerable.

Closes #457

src/directives/mwlCalendar.js

@@ -66,7 +66,7 @@ angular
       }
 
       vm.events = vm.events.filter(eventIsValid).map(function(event, index) {
-        Object.defineProperty(event, '$id', {enumerable: false, configurable: true, value: index});
+        event.calendarEventId = index;
         return event;
       });
 

src/templates/calendarDayView.html

@@ -7,7 +7,7 @@
             class="cal-cell-6 day-highlight"
             ng-style="{backgroundColor: event.color.secondary}"
             data-event-class
-            ng-repeat="event in vm.allDayEvents track by event.$id">
+            ng-repeat="event in vm.allDayEvents track by event.calendarEventId">
             <strong>
               <span ng-bind="event.startsAt | calendarDate:'datetime':true"></span>
               <span ng-if="event.endsAt">
@@ -44,7 +44,7 @@
 
     <div
       class="pull-left day-event day-highlight"
-      ng-repeat="dayEvent in vm.nonAllDayEvents track by dayEvent.event.$id"
+      ng-repeat="dayEvent in vm.nonAllDayEvents track by dayEvent.event.calendarEventId"
       ng-class="dayEvent.event.cssClass"
       ng-style="{
         top: dayEvent.top - 1 + 'px',

src/templates/calendarMonthCellEvents.html

@@ -1,6 +1,6 @@
 <div class="events-list" ng-show="day.events.length > 0">
   <a
-    ng-repeat="event in day.events | orderBy:'startsAt' track by event.$id"
+    ng-repeat="event in day.events | orderBy:'startsAt' track by event.calendarEventId"
     href="javascript:;"
     ng-click="$event.stopPropagation(); vm.onEventClick({calendarEvent: event})"
     class="pull-left event"

src/templates/calendarSlideBox.html

@@ -3,7 +3,7 @@
     <ul class="unstyled list-unstyled">
 
       <li
-        ng-repeat="event in vm.events | orderBy:'startsAt' track by event.$id"
+        ng-repeat="event in vm.events | orderBy:'startsAt' track by event.calendarEventId"
         ng-class="event.cssClass"
         mwl-draggable="event.draggable === true"
         drop-data="{event: event}">

src/templates/calendarWeekView.html

@@ -48,7 +48,7 @@
       <div class="col-xs-12">
         <div class="cal-row-fluid">
           <div
-            ng-repeat="eventRow in row.row track by eventRow.event.$id"
+            ng-repeat="eventRow in row.row track by eventRow.event.calendarEventId"
             ng-class="'cal-cell' + (vm.showTimes ? 1 : eventRow.span) + (vm.showTimes ? '' : ' cal-offset' + eventRow.offset)"
             ng-style="{
               top: vm.showTimes ? ((eventRow.top) + 'px') : 'auto',

test/unit/directives/mwlCalendar.spec.js

@@ -154,21 +154,21 @@ describe('mwlCalendar directive', function() {
     $log.warn = sinon.spy();
     scope.vm.events = [{title: 'title'}];
     scope.$apply();
-    expect($log.warn).to.have.been.calledOnce;
+    expect($log.warn).to.have.been.called;
   });
 
   it('should log a warning if the event starts at is not a valid date object', function() {
     $log.warn = sinon.spy();
     scope.vm.events = [{title: 'title', startsAt: '2016-06-01'}];
     scope.$apply();
-    expect($log.warn).to.have.been.calledOnce;
+    expect($log.warn).to.have.been.called;
   });
 
   it('should log a warning if the event ends at is not a valid date object', function() {
     $log.warn = sinon.spy();
     scope.vm.events = [{title: 'title', startsAt: new Date(), endsAt: '2016-01-01'}];
     scope.$apply();
-    expect($log.warn).to.have.been.calledOnce;
+    expect($log.warn).to.have.been.called;
   });
 
   it('should not log a warning if the event ends at is set to a falsey value', function() {
@@ -182,7 +182,7 @@ describe('mwlCalendar directive', function() {
     $log.warn = sinon.spy();
     scope.vm.events = [{title: 'title', startsAt: new Date(), endsAt: new Date(Date.now() - 1)}];
     scope.$apply();
-    expect($log.warn).to.have.been.calledOnce;
+    expect($log.warn).to.have.been.called;
   });
 
   afterEach(function() {

test/unit/directives/mwlCalendarDay.spec.js

@@ -33,23 +33,23 @@ describe('mwlCalendarDay directive', function() {
     vm.cellModifier = sinon.spy();
     vm.events = [
       {
-        $id: 0,
+        calendarEventId: 0,
         title: 'An event',
         type: 'warning',
         startsAt: moment(calendarDay).startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
         endsAt: moment(calendarDay).startOf('week').add(1, 'week').add(9, 'hours').toDate(),
         draggable: true,
         resizable: true
       }, {
-        $id: 1,
+        calendarEventId: 1,
         title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
         type: 'info',
         startsAt: moment(calendarDay).subtract(1, 'day').toDate(),
         endsAt: moment(calendarDay).add(5, 'days').toDate(),
         draggable: true,
         resizable: true
       }, {
-        $id: 2,
+        calendarEventId: 2,
         title: 'This is a really long event title that occurs on every year',
         type: 'important',
         startsAt: moment(calendarDay).startOf('day').add(7, 'hours').toDate(),

test/unit/directives/mwlCalendarMonth.spec.js

@@ -41,23 +41,23 @@ describe('mwlCalendarMonth directive', function() {
     vm.dayViewsplit = 30;
     vm.events = [
       {
-        $id: 0,
+        calendarEventId: 0,
         title: 'An event',
         type: 'warning',
         startsAt: moment(calendarDay).startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
         endsAt: moment(calendarDay).startOf('week').add(1, 'week').add(9, 'hours').toDate(),
         draggable: true,
         resizable: true
       }, {
-        $id: 1,
+        calendarEventId: 1,
         title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
         type: 'info',
         startsAt: moment(calendarDay).subtract(1, 'day').toDate(),
         endsAt: moment(calendarDay).add(5, 'days').toDate(),
         draggable: true,
         resizable: true
       }, {
-        $id: 2,
+        calendarEventId: 2,
         title: 'This is a really long event title that occurs on every year',
         type: 'important',
         startsAt: moment(calendarDay).startOf('day').add(7, 'hours').toDate(),

test/unit/directives/mwlCalendarSlideBox.spec.js

@@ -19,23 +19,23 @@ describe('mwlCalendarSlideBox directive', function() {
     vm.isOpen = false;
     vm.events = [
       {
-        $id: 0,
+        calendarEventId: 0,
         title: 'An 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(),
         draggable: true,
         resizable: true
       }, {
-        $id: 1,
+        calendarEventId: 1,
         title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
         type: 'info',
         startsAt: moment().subtract(1, 'day').toDate(),
         endsAt: moment().add(5, 'days').toDate(),
         draggable: true,
         resizable: true
       }, {
-        $id: 2,
+        calendarEventId: 2,
         title: 'This is a really long event title that occurs on every year',
         type: 'important',
         startsAt: moment().startOf('day').add(7, 'hours').toDate(),