Merge branch 'master' into 0.29.0

Author: mattlewis92

projects/angular-calendar/tsconfig.lib.json

@@ -16,7 +16,7 @@
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
+    "strictTemplates": true,
     "strictInjectionParameters": true,
     "trace": true
   },

projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

@@ -2,7 +2,7 @@
   <div class="cal-day-headers" role="row">
     <div
       class="cal-header"
-      *ngFor="let user of users; trackBy: trackById"
+      *ngFor="let user of users; trackBy: trackByUserId"
       tabindex="0"
       role="columnheader"
     >

projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.ts

@@ -23,6 +23,8 @@ import {
   WeekViewTimeEvent,
   EventColor,
   CalendarEvent,
+  WeekViewAllDayEventRow,
+  WeekViewAllDayEvent,
 } from 'calendar-utils';
 import { DragEndEvent, DragMoveEvent } from 'angular-draggable-droppable';
 
@@ -102,6 +104,8 @@ export class DayViewSchedulerComponent extends CalendarWeekViewComponent
     super(cdr, utils, locale, dateAdapter, element);
   }
 
+  trackByUserId = (index: number, row: User) => row.id;
+
   ngOnChanges(changes: SimpleChanges): void {
     super.ngOnChanges(changes);
 
@@ -145,7 +149,7 @@ export class DayViewSchedulerComponent extends CalendarWeekViewComponent
   }
 
   dragEnded(
-    weekEvent: WeekViewTimeEvent,
+    weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent,
     dragEndEvent: DragEndEvent,
     dayWidth: number,
     useY = false
@@ -195,7 +199,10 @@ export class DayViewSchedulerComponent extends CalendarWeekViewComponent
     });
   }
 
-  private getDraggedUserColumn(dayEvent: WeekViewTimeEvent, xPixels: number) {
+  private getDraggedUserColumn(
+    dayEvent: WeekViewTimeEvent | WeekViewAllDayEvent,
+    xPixels: number
+  ) {
     const columnsMoved = Math.round(xPixels / this.dayColumnWidth);
     const currentColumnIndex = this.view.users.findIndex(
       (user) => user === dayEvent.event.meta.user

projects/demos/app/demo-modules/demo-utils/calendar-header.component.ts

@@ -42,22 +42,22 @@ import { CalendarView } from 'angular-calendar';
         <div class="btn-group">
           <div
             class="btn btn-primary"
-            (click)="viewChange.emit('month')"
-            [class.active]="view === 'month'"
+            (click)="viewChange.emit(CalendarView.Month)"
+            [class.active]="view === CalendarView.Month"
           >
             Month
           </div>
           <div
             class="btn btn-primary"
-            (click)="viewChange.emit('week')"
-            [class.active]="view === 'week'"
+            (click)="viewChange.emit(CalendarView.Week)"
+            [class.active]="view === CalendarView.Week"
           >
             Week
           </div>
           <div
             class="btn btn-primary"
-            (click)="viewChange.emit('day')"
-            [class.active]="view === 'day'"
+            (click)="viewChange.emit(CalendarView.Day)"
+            [class.active]="view === CalendarView.Day"
           >
             Day
           </div>
@@ -68,13 +68,15 @@ import { CalendarView } from 'angular-calendar';
   `,
 })
 export class CalendarHeaderComponent {
-  @Input() view: CalendarView | 'month' | 'week' | 'day';
+  @Input() view: CalendarView;
 
   @Input() viewDate: Date;
 
   @Input() locale: string = 'en';
 
-  @Output() viewChange: EventEmitter<string> = new EventEmitter();
+  @Output() viewChange = new EventEmitter<CalendarView>();
 
-  @Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
+  @Output() viewDateChange = new EventEmitter<Date>();
+
+  CalendarView = CalendarView;
 }

projects/demos/app/demo-modules/selectable-period/component.ts

@@ -7,8 +7,9 @@ import {
   CalendarEvent,
   CalendarMonthViewDay,
   CalendarView,
+  CalendarWeekViewBeforeRenderEvent,
 } from 'angular-calendar';
-import { WeekViewHour } from 'calendar-utils';
+import { WeekViewHour, WeekViewHourColumn } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-demo-component',
@@ -34,7 +35,7 @@ export class DemoComponent {
 
   selectedDayViewDate: Date;
 
-  dayView: WeekViewHour[];
+  hourColumns: WeekViewHourColumn[];
 
   events: CalendarEvent[] = [];
 
@@ -73,21 +74,23 @@ export class DemoComponent {
     this.addSelectedDayViewClass();
   }
 
-  beforeDayViewRender(dayView: WeekViewHour[]) {
-    this.dayView = dayView;
+  beforeWeekOrDayViewRender(event: CalendarWeekViewBeforeRenderEvent) {
+    this.hourColumns = event.hourColumns;
     this.addSelectedDayViewClass();
   }
 
   private addSelectedDayViewClass() {
-    this.dayView.forEach((hourSegment) => {
-      hourSegment.segments.forEach((segment) => {
-        delete segment.cssClass;
-        if (
-          this.selectedDayViewDate &&
-          segment.date.getTime() === this.selectedDayViewDate.getTime()
-        ) {
-          segment.cssClass = 'cal-day-selected';
-        }
+    this.hourColumns.forEach((column) => {
+      column.hours.forEach((hourSegment) => {
+        hourSegment.segments.forEach((segment) => {
+          delete segment.cssClass;
+          if (
+            this.selectedDayViewDate &&
+            segment.date.getTime() === this.selectedDayViewDate.getTime()
+          ) {
+            segment.cssClass = 'cal-day-selected';
+          }
+        });
       });
     });
   }

projects/demos/app/demo-modules/selectable-period/template.html

@@ -2,7 +2,7 @@
 </mwl-demo-utils-calendar-header>
 
 <div class="alert alert-info">
-  Click on a month view day or a day view hour to select it
+  Click on a month view day or a time on the week or day view to select it
 </div>
 
 <div [ngSwitch]="view">
@@ -18,13 +18,15 @@
     *ngSwitchCase="'week'"
     [viewDate]="viewDate"
     [events]="events"
+    (beforeViewRender)="beforeWeekOrDayViewRender($event)"
+    (hourSegmentClicked)="hourSegmentClicked($event.date)"
   >
   </mwl-calendar-week-view>
   <mwl-calendar-day-view
     *ngSwitchCase="'day'"
     [viewDate]="viewDate"
     [events]="events"
-    (beforeViewRender)="beforeDayViewRender($event.body.hourGrid)"
+    (beforeViewRender)="beforeWeekOrDayViewRender($event)"
     (hourSegmentClicked)="hourSegmentClicked($event.date)"
   >
   </mwl-calendar-day-view>

projects/demos/tsconfig.app.json

@@ -8,7 +8,7 @@
     "trace": true,
     "strictInjectionParameters": true,
     "preserveWhitespaces": true,
-    "fullTemplateTypeCheck": true
+    "strictTemplates": true
   },
   "files": [
     "main.ts",