docs(demos): maintain selected day when changing the view date

Author: Matt Lewis

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

@@ -22,6 +22,17 @@ 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;

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

@@ -1,5 +1,37 @@
+<div class="row">
+  <div class="col-md-6">
+    <div class="btn-group">
+      <div
+        class="btn btn-primary"
+        mwlCalendarPreviousView
+        view="month"
+        [(viewDate)]="viewDate">
+        Previous
+      </div>
+      <div
+        class="btn btn-secondary"
+        mwlCalendarToday
+        [(viewDate)]="viewDate">
+        Today
+      </div>
+      <div
+        class="btn btn-primary"
+        mwlCalendarNextView
+        view="month"
+        [(viewDate)]="viewDate">
+        Next
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 text-right">
+    <h3>{{ viewDate | calendarDate:'monthViewTitle':'en' }}</h3>
+  </div>
+</div>
+<br>
+
 <mwl-calendar-month-view
   [viewDate]="viewDate"
   [events]="events"
+  [dayModifier]="selectDay"
   (dayClicked)="dayClicked($event.day)">
 </mwl-calendar-month-view>