feat(meta): add CalendarEvent meta property for storing arbritary data

Closes #218

Author: Matt Lewis

demos/demo-modules/additional-event-properties/component.ts

@@ -2,10 +2,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CalendarEvent } from 'angular-calendar';
 import { colors } from '../demo-utils/colors';
 
-interface MyEvent extends CalendarEvent {
-  id: number;
-}
-
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,16 +13,20 @@ export class DemoComponent {
 
   viewDate: Date = new Date();
 
-  events: MyEvent[] = [{
-    id: 1,
+  events: CalendarEvent[] = [{
     title: 'Event 1',
     color: colors.yellow,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      id: 1
+    }
   }, {
-    id: 2,
     title: 'Event 2',
     color: colors.blue,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      id: 2
+    }
   }];
 
 }

demos/demo-modules/async-events/component.ts

@@ -12,10 +12,6 @@ interface Film {
   release_date: string;
 }
 
-interface FilmEvent extends CalendarEvent {
-  film: Film;
-}
-
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,7 +23,7 @@ export class DemoComponent implements OnInit {
 
   viewDate: Date = new Date();
 
-  events$: Observable<FilmEvent[]>;
+  events$: Observable<CalendarEvent[]>;
 
   activeDayIsOpen: boolean = false;
 
@@ -64,7 +60,9 @@ export class DemoComponent implements OnInit {
             title: film.title,
             start: new Date(film.release_date),
             color: colors.yellow,
-            film
+            meta: {
+              film
+            }
           };
         });
       });
@@ -85,8 +83,8 @@ export class DemoComponent implements OnInit {
     }
   }
 
-  eventClicked(event: FilmEvent): void {
-    window.open(`https://www.themoviedb.org/movie/${event.film.id}`, '_blank');
+  eventClicked(event: CalendarEvent): void {
+    window.open(`https://www.themoviedb.org/movie/${event.meta.film.id}`, '_blank');
   }
 
 }

demos/demo-modules/group-month-view-events/component.ts

@@ -2,10 +2,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CalendarEvent, CalendarMonthViewDay } from 'angular-calendar';
 import { colors } from '../demo-utils/colors';
 
-interface MyEvent extends CalendarEvent {
-  type: string;
-}
-
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,38 +22,48 @@ export class DemoComponent {
 
   viewDate: Date = new Date();
 
-  events: MyEvent[] = [{
+  events: CalendarEvent[] = [{
     title: 'Event 1',
-    type: 'warning',
     color: colors.yellow,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      type: 'warning'
+    }
   }, {
     title: 'Event 2',
-    type: 'warning',
     color: colors.yellow,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      type: 'warning'
+    }
   }, {
     title: 'Event 3',
-    type: 'info',
     color: colors.blue,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      type: 'info'
+    }
   }, {
     title: 'Event 4',
-    type: 'danger',
     color: colors.red,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      type: 'danger'
+    }
   }, {
     title: 'Event 5',
-    type: 'danger',
     color: colors.red,
-    start: new Date()
+    start: new Date(),
+    meta: {
+      type: 'danger'
+    }
   }];
 
   groupEvents(cell: CalendarMonthViewDay): void {
     const groups: any = {};
-    cell.events.forEach((event: MyEvent) => {
-      groups[event.type] = groups[event.type] || [];
-      groups[event.type].push(event);
+    cell.events.forEach((event: CalendarEvent) => {
+      groups[event.meta.type] = groups[event.meta.type] || [];
+      groups[event.meta.type].push(event);
     });
     cell['eventGroups'] = Object.entries(groups);
   }

demos/demo-modules/month-view-badge-total/component.ts

@@ -2,10 +2,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CalendarEvent, CalendarMonthViewDay } from 'angular-calendar';
 import { colors } from '../demo-utils/colors';
 
-interface MyEvent extends CalendarEvent {
-  incrementsBadgeTotal?: boolean;
-}
-
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -15,20 +11,24 @@ export class DemoComponent {
 
   viewDate: Date = new Date();
 
-  events: MyEvent[] = [{
+  events: CalendarEvent[] = [{
     title: 'Increments badge total on the day cell',
     color: colors.yellow,
     start: new Date(),
-    incrementsBadgeTotal: true
+    meta: {
+      incrementsBadgeTotal: true
+    }
   }, {
     title: 'Does not increment the badge total on the day cell',
     color: colors.blue,
     start: new Date(),
-    incrementsBadgeTotal: false
+    meta: {
+      incrementsBadgeTotal: false
+    }
   }];
 
   addBadgeTotal(day: CalendarMonthViewDay): void {
-    day.badgeTotal = day.events.filter(event => event['incrementsBadgeTotal']).length;
+    day.badgeTotal = day.events.filter(event => event.meta.incrementsBadgeTotal).length;
   }
 
 }

package.json

@@ -144,7 +144,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^1.0.1",
     "angular-resizable-element": "^1.1.1",
-    "calendar-utils": "0.0.49",
+    "calendar-utils": "0.0.50",
     "date-fns": "^1.28.5",
     "positioning": "^1.0.4"
   }

yarn.lock

@@ -778,9 +778,9 @@ cachedir@^1.1.0:
   dependencies:
     os-homedir "^1.0.1"
 
-[email protected].49:
-  version "0.0.49"
-  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.49.tgz#1bfa57a9de8ee843cb22ef205a8508987f5e266c"
+[email protected].50:
+  version "0.0.50"
+  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.50.tgz#0009cbee879fe58abe2fb5e006655700f3f3eb33"
 
 [email protected]:
   version "1.0.0"