feat: add a CalendarView enum to prevent typos in view names

demos/demo-modules/kitchen-sink/component.ts

@@ -19,7 +19,8 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
   CalendarEvent,
   CalendarEventAction,
-  CalendarEventTimesChangedEvent
+  CalendarEventTimesChangedEvent,
+  CalendarView
 } from 'angular-calendar';
 
 const colors: any = {
@@ -46,7 +47,9 @@ const colors: any = {
 export class DemoComponent {
   @ViewChild('modalContent') modalContent: TemplateRef<any>;
 
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
+
+  CalendarView = CalendarView;
 
   viewDate: Date = new Date();
 

demos/demo-modules/kitchen-sink/template.html

@@ -54,20 +54,20 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
     <div class="btn-group">
       <div
         class="btn btn-primary"
-        (click)="view = 'month'"
-        [class.active]="view === 'month'">
+        (click)="view = CalendarView.Month"
+        [class.active]="view === CalendarView.Month">
         Month
       </div>
       <div
         class="btn btn-primary"
-        (click)="view = 'week'"
-        [class.active]="view === 'week'">
+        (click)="view = CalendarView.Week"
+        [class.active]="view === CalendarView.Week">
         Week
       </div>
       <div
         class="btn btn-primary"
-        (click)="view = 'day'"
-        [class.active]="view === 'day'">
+        (click)="view = CalendarView.Day"
+        [class.active]="view === CalendarView.Day">
         Day
       </div>
     </div>
@@ -76,7 +76,7 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
 <br>
 <div [ngSwitch]="view">
   <mwl-calendar-month-view
-    *ngSwitchCase="'month'"
+    *ngSwitchCase="CalendarView.Month"
     [viewDate]="viewDate"
     [events]="events"
     [refresh]="refresh"
@@ -86,15 +86,15 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
     (eventTimesChanged)="eventTimesChanged($event)">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view
-    *ngSwitchCase="'week'"
+    *ngSwitchCase="CalendarView.Week"
     [viewDate]="viewDate"
     [events]="events"
     [refresh]="refresh"
     (eventClicked)="handleEvent('Clicked', $event.event)"
     (eventTimesChanged)="eventTimesChanged($event)">
   </mwl-calendar-week-view>
   <mwl-calendar-day-view
-    *ngSwitchCase="'day'"
+    *ngSwitchCase="CalendarView.Day"
     [viewDate]="viewDate"
     [events]="events"
     [refresh]="refresh"
@@ -173,4 +173,4 @@ <h3>
     </tr>
   </tbody>
 
-</table>
+</table>

src/modules/common/calendar-common.module.ts

@@ -31,6 +31,7 @@ export * from './calendar-utils.provider';
 export * from './calendar-date-formatter.interface';
 export * from './calendar-event-times-changed-event.interface';
 export * from '../../date-adapters/date-adapter';
+export * from './calendar-view.enum';
 
 export {
   CalendarEvent,

src/modules/common/calendar-next-view.directive.ts

@@ -6,6 +6,7 @@ import {
   EventEmitter
 } from '@angular/core';
 import { DateAdapter } from '../../date-adapters/date-adapter';
+import { CalendarView } from './calendar-view.enum';
 
 /**
  * Change the view date to the next view. For example:
@@ -26,7 +27,7 @@ export class CalendarNextViewDirective {
   /**
    * The current view
    */
-  @Input() view: string;
+  @Input() view: CalendarView;
 
   /**
    * The current view date

src/modules/common/calendar-previous-view.directive.ts

@@ -6,6 +6,7 @@ import {
   EventEmitter
 } from '@angular/core';
 import { DateAdapter } from '../../date-adapters/date-adapter';
+import { CalendarView } from './calendar-view.enum';
 
 /**
  * Change the view date to the previous view. For example:
@@ -26,7 +27,7 @@ export class CalendarPreviousViewDirective {
   /**
    * The current view
    */
-  @Input() view: string;
+  @Input() view: CalendarView;
 
   /**
    * The current view date

src/modules/common/calendar-view.enum.ts

@@ -0,0 +1,5 @@
+export enum CalendarView {
+  Month = 'month',
+  Week = 'week',
+  Day = 'day'
+}