feat(monthView): introduce the beforeViewRender output

BREAKING CHANGE: the `dayModifier` input has been replaced with a more powerful `beforeViewRender`
output

Author: Matt Lewis

demos/demo-app.module.ts

@@ -26,7 +26,7 @@ import * as clickableDays from './demo-modules/clickable-days';
 import * as dayViewStartEnd from './demo-modules/day-view-start-end';
 import * as dayViewHourSplit from './demo-modules/day-view-hour-split';
 import * as navigatingBetweenViews from './demo-modules/navigating-between-views';
-import * as dayModifier from './demo-modules/day-modifier';
+import * as beforeViewRender from './demo-modules/before-view-render';
 import * as i18n from './demo-modules/i18n';
 import * as draggableExternalEvents from './demo-modules/draggable-external-events';
 import * as allDayEvents from './demo-modules/all-day-events';
@@ -66,7 +66,7 @@ import * as extraMonthViewWeeks from './demo-modules/extra-month-view-weeks';
     dayViewStartEnd.DemoModule,
     dayViewHourSplit.DemoModule,
     navigatingBetweenViews.DemoModule,
-    dayModifier.DemoModule,
+    beforeViewRender.DemoModule,
     i18n.DemoModule,
     draggableExternalEvents.DemoModule,
     allDayEvents.DemoModule,
@@ -169,9 +169,9 @@ import * as extraMonthViewWeeks from './demo-modules/extra-month-view-weeks';
       }
     }, {
       path: 'day-modifier',
-      component: dayModifier.DemoComponent,
+      component: beforeViewRender.DemoComponent,
       data: {
-        label: 'Day modifier'
+        label: 'Before view render'
       }
     }, {
       path: 'exclude-days',

demos/demo-modules/day-modifier/component.ts demos/demo-modules/before-view-render/component.ts

@@ -20,15 +20,12 @@ export class DemoComponent {
 
   events: CalendarEvent[] = [];
 
-  addCssClass: (day: CalendarMonthViewDay) => void;
-
-  constructor() {
-    // an arrow function is used so that `this` is the component instance
-    this.addCssClass = (day: CalendarMonthViewDay): void => {
+  beforeMonthViewRender({body}: {body: CalendarMonthViewDay[]}): void {
+    body.forEach((day) => {
       if (day.date.getDate() % 2 === 1 && day.inMonth) {
         day.cssClass = 'odd-cell';
       }
-    };
+    });
   }
 
 }

demos/demo-modules/day-modifier/index.ts demos/demo-modules/before-view-render/index.ts

@@ -8,7 +8,7 @@
     *ngSwitchCase="'month'"
     [viewDate]="viewDate"
     [events]="events"
-    [dayModifier]="addCssClass">
+    (beforeViewRender)="beforeMonthViewRender($event)">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view
     *ngSwitchCase="'week'"

demos/demo-modules/day-modifier/module.ts demos/demo-modules/before-view-render/module.ts

@@ -59,13 +59,15 @@ export class DemoComponent {
     }
   }];
 
-  groupEvents(cell: CalendarMonthViewDay): void {
-    const groups: any = {};
-    cell.events.forEach((event: CalendarEvent<{type: string}>) => {
-      groups[event.meta.type] = groups[event.meta.type] || [];
-      groups[event.meta.type].push(event);
+  beforeMonthViewRender({body}: {body: CalendarMonthViewDay[]}): void {
+    body.forEach((cell) => {
+      const groups: any = {};
+      cell.events.forEach((event: CalendarEvent<{type: string}>) => {
+        groups[event.meta.type] = groups[event.meta.type] || [];
+        groups[event.meta.type].push(event);
+      });
+      cell['eventGroups'] = Object.entries(groups);
     });
-    cell['eventGroups'] = Object.entries(groups);
   }
 
 }

demos/demo-modules/day-modifier/template.html demos/demo-modules/before-view-render/template.html

@@ -23,7 +23,7 @@
     [viewDate]="viewDate"
     [events]="events"
     [cellTemplate]="customCellTemplate"
-    [dayModifier]="groupEvents"
+    (beforeViewRender)="beforeMonthViewRender($event)"
     [activeDayIsOpen]="true">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view

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

@@ -69,18 +69,11 @@ export class DemoComponent {
 
   maxDate: Date = addMonths(new Date(), 1);
 
-  dayModifier: Function;
-
   prevBtnDisabled: boolean = false;
 
   nextBtnDisabled: boolean = false;
 
   constructor() {
-    this.dayModifier = function(day: CalendarMonthViewDay): void {
-      if (!this.dateIsValid(day.date)) {
-        day.cssClass = 'cal-disabled';
-      }
-    }.bind(this);
     this.dateOrViewChanged();
   }
 
@@ -120,5 +113,13 @@ export class DemoComponent {
     }
   }
 
+  beforeMonthViewRender({body}: {body: CalendarMonthViewDay[]}): void {
+    body.forEach((day) => {
+      if (!this.dateIsValid(day.date)) {
+        day.cssClass = 'cal-disabled';
+      }
+    });
+  }
+
 }
 

demos/demo-modules/group-month-view-events/template.html

@@ -30,7 +30,7 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
     *ngSwitchCase="'month'"
     [viewDate]="viewDate"
     [events]="events"
-    [dayModifier]="dayModifier">
+    (beforeViewRender)="beforeMonthViewRender($event)">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view
     *ngSwitchCase="'week'"

demos/demo-modules/min-max-date/component.ts

@@ -27,8 +27,10 @@ export class DemoComponent {
     }
   }];
 
-  addBadgeTotal(day: CalendarMonthViewDay): void {
-    day.badgeTotal = day.events.filter(event => event.meta.incrementsBadgeTotal).length;
+  beforeMonthViewRender({body}: {body: CalendarMonthViewDay[]}): void {
+    body.forEach((day) => {
+      day.badgeTotal = day.events.filter(event => event.meta.incrementsBadgeTotal).length;
+    });
   }
 
 }

demos/demo-modules/min-max-date/template.html

@@ -2,5 +2,5 @@
   [viewDate]="viewDate"
   [events]="events"
   [activeDayIsOpen]="true"
-  [dayModifier]="addBadgeTotal">
+  (beforeViewRender)="beforeMonthViewRender($event)">
 </mwl-calendar-month-view>

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

@@ -29,22 +29,20 @@ export class DemoComponent {
 
   refresh: Subject<any> = new Subject();
 
-  addCssClass: (day: CalendarMonthViewDay) => void;
-
   cssClass: string = RED_CELL;
 
-  constructor() {
-    this.addCssClass = (day: CalendarMonthViewDay): void => {
-      if (day.date.getDate() % 2 === 1) {
-        day.cssClass = this.cssClass;
-      }
-    };
-  }
-
   refreshView(): void {
     this.cssClass = this.cssClass === RED_CELL ? BLUE_CELL : RED_CELL;
     this.refresh.next();
   }
 
+  beforeMonthViewRender({body}: {body: CalendarMonthViewDay[]}): void {
+    body.forEach((day) => {
+      if (day.date.getDate() % 2 === 1) {
+        day.cssClass = this.cssClass;
+      }
+    });
+  }
+
 }
 

demos/demo-modules/month-view-badge-total/template.html

@@ -13,7 +13,7 @@
     [viewDate]="viewDate"
     [events]="events"
     [refresh]="refresh"
-    [dayModifier]="addCssClass">
+    (beforeViewRender)="beforeMonthViewRender($event)">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view
     *ngSwitchCase="'week'"

demos/demo-modules/refreshing-the-view/component.ts

@@ -22,17 +22,6 @@ export class DemoComponent {
 
   events: CalendarEvent[] = [];
 
-  selectDay: (day: CalendarMonthViewDay) => void;
-
-  constructor() {
-    // an arrow function is used so that `this` is the component instance
-    this.selectDay = (day: CalendarMonthViewDay): void => {
-      if (this.selectedDay && day.date.getTime() === this.selectedDay.date.getTime()) {
-        day.cssClass = 'cal-day-selected';
-      }
-    };
-  }
-
   dayClicked(day: CalendarMonthViewDay): void {
     if (this.selectedDay) {
       delete this.selectedDay.cssClass;
@@ -41,4 +30,13 @@ export class DemoComponent {
     this.selectedDay = day;
   }
 
+  beforeMonthViewRender({body}: {body: CalendarMonthViewDay[]}): void {
+    body.forEach((day) => {
+      if (this.selectedDay && day.date.getTime() === this.selectedDay.date.getTime()) {
+        day.cssClass = 'cal-day-selected';
+        this.selectedDay = day;
+      }
+    });
+  }
+
 }

demos/demo-modules/refreshing-the-view/template.html

@@ -32,6 +32,6 @@ <h3>{{ viewDate | calendarDate:'monthViewTitle':'en' }}</h3>
 <mwl-calendar-month-view
   [viewDate]="viewDate"
   [events]="events"
-  [dayModifier]="selectDay"
+  (beforeViewRender)="beforeMonthViewRender($event)"
   (dayClicked)="dayClicked($event.day)">
 </mwl-calendar-month-view>

demos/demo-modules/selectable-month-day/component.ts

@@ -107,12 +107,6 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   @Input() activeDayIsOpen: boolean = false;
 
-  /**
-   * A function that will be called before each cell is rendered. The first argument will contain the calendar cell.
-   * If you add the `cssClass` property to the cell it will add that class to the cell in the template
-   */
-  @Input() dayModifier: Function;
-
   /**
    * An observable that when emitted on will re-render the current view
    */
@@ -158,6 +152,12 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   @Input() weekendDays: number[];
 
+  /**
+   * An output that will be called before the view is rendered for the current month.
+   * If you add the `cssClass` property to a day in the body it will add that class to the cell element in the template
+   */
+  @Output() beforeViewRender: EventEmitter<{header: WeekDay[], body: MonthViewDay[]}> = new EventEmitter();
+
   /**
    * Called when the day cell is clicked
    */
@@ -280,6 +280,7 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
       excluded: this.excludeDays,
       weekendDays: this.weekendDays
     });
+    this.emitBeforeViewRender();
   }
 
   private refreshBody(): void {
@@ -290,9 +291,7 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
       excluded: this.excludeDays,
       weekendDays: this.weekendDays
     });
-    if (this.dayModifier) {
-      this.view.days.forEach(day => this.dayModifier(day));
-    }
+    this.emitBeforeViewRender();
   }
 
   private checkActiveDayIsOpen(): void {
@@ -312,4 +311,13 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
     this.checkActiveDayIsOpen();
   }
 
+  private emitBeforeViewRender(): void {
+    if (this.columnHeaders && this.view) {
+      this.beforeViewRender.emit({
+        header: this.columnHeaders,
+        body: this.view.days
+      });
+    }
+  }
+
 }

demos/demo-modules/selectable-month-day/template.html

@@ -122,9 +122,9 @@ describe('calendarMonthView component', () => {
   it('should add a custom CSS class to days via the day modifier', () => {
     const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-06-27');
-    fixture.componentInstance.dayModifier = day => {
-      day.cssClass = 'foo';
-    };
+    fixture.componentInstance.beforeViewRender.take(1).subscribe(({body}) => {
+      body[0].cssClass = 'foo';
+    });
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.cal-days .cal-cell').classList.contains('foo')).to.equal(true);
@@ -135,12 +135,10 @@ describe('calendarMonthView component', () => {
     const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-06-27');
     let firstDay: CalendarMonthViewDay;
-    fixture.componentInstance.dayModifier = (day) => {
-      if (!firstDay) {
-        firstDay = day;
-        day.cssClass = 'foo';
-      }
-    };
+    fixture.componentInstance.beforeViewRender.take(1).subscribe(({body}) => {
+      body[0].cssClass = 'foo';
+      firstDay = body[0];
+    });
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
     fixture.detectChanges();
     const cell: HTMLElement = fixture.nativeElement.querySelector('.cal-days .cal-cell');
@@ -288,10 +286,9 @@ describe('calendarMonthView component', () => {
   it('should allow the badge total to be customised', () => {
     const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-06-27');
-    fixture.componentInstance.dayModifier = day => {
-      day.badgeTotal = 100;
-      return day;
-    };
+    fixture.componentInstance.beforeViewRender.take(1).subscribe(({body}) => {
+      body[0].badgeTotal = 100;
+    });
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.cal-day-badge').innerHTML).to.equal('100');