Skip to content

Commit d4fdfb3

Browse files
mattlewis92mattlewis92
committed
fix: ensure compatibility with angular 9 and ivy
BREAKING CHANGE: If extending the week view component the trackBy function `trackByDayOrWeekEvent` was split into `trackByWeekAllDayEvent` and `trackByWeekTimeEvent` Closes #1086
1 parent 224848c commit d4fdfb3

File tree

44 files changed

+149
-81
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+149
-81
lines changed

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,9 @@
142142
"zone.js": "~0.9.1"
143143
},
144144
"peerDependencies": {
145-
"@angular/animations": ">=6.0.0 <9.0.0",
146-
"@angular/common": ">=6.0.0 <9.0.0",
147-
"@angular/core": ">=6.0.0 <9.0.0"
145+
"@angular/animations": ">=6.0.0 <10.0.0",
146+
"@angular/common": ">=6.0.0 <10.0.0",
147+
"@angular/core": ">=6.0.0 <10.0.0"
148148
},
149149
"dependencies": {
150150
"angular-draggable-droppable": "^4.3.2",

‎projects/angular-calendar/src/modules/common/calendar-a11y.provider.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ import { A11yParams } from './calendar-a11y.interface';
1010
* ```typescript
1111
* import { A11yParams, CalendarA11y } from 'angular-calendar';
1212
* import { formatDate, I18nPluralPipe } from '@angular/common';
13+
* import { Injectable } from '@angular/core';
1314
*
1415
* // adding your own a11y params
1516
* export interface CustomA11yParams extends A11yParams {
1617
* isDrSuess?: boolean;
1718
* }
1819
*
20+
* @Injectable()
1921
* export class CustomCalendarA11y extends CalendarA11y {
2022
* constructor(protected i18nPlural: I18nPluralPipe) {
2123
* super(i18nPlural);

‎projects/angular-calendar/src/modules/common/calendar-date-formatter.provider.ts

+2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { Injectable } from '@angular/core';
99
* ```typescript
1010
* import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
1111
* import { formatDate } from '@angular/common';
12+
* import { Injectable } from '@angular/core';
1213
*
14+
* @Injectable()
1315
* class CustomDateFormatter extends CalendarDateFormatter {
1416
*
1517
* public monthViewColumnHeader({date, locale}: DateFormatterParams): string {

‎projects/angular-calendar/src/modules/common/calendar-event-title-formatter.provider.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { CalendarEvent } from 'calendar-utils';
44
* This class is responsible for displaying all event titles within the calendar. You may override any of its methods via angulars DI to suit your requirements. For example:
55
*
66
* ```typescript
7+
* import { Injectable } from '@angular/core';
78
* import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar';
89
*
10+
* @Injectable()
911
* class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
1012
*
1113
* month(event: CalendarEvent): string {

‎projects/angular-calendar/src/modules/common/calendar-next-view.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class CalendarNextViewDirective {
2828
/**
2929
* The current view
3030
*/
31-
@Input() view: CalendarView;
31+
@Input() view: CalendarView | 'month' | 'week' | 'day';
3232

3333
/**
3434
* The current view date

‎projects/angular-calendar/src/modules/common/calendar-previous-view.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class CalendarPreviousViewDirective {
2828
/**
2929
* The current view
3030
*/
31-
@Input() view: CalendarView;
31+
@Input() view: CalendarView | 'month' | 'week' | 'day';
3232

3333
/**
3434
* The current view date

‎projects/angular-calendar/src/modules/common/util.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,14 @@ export const trackByHourSegment = (
4646
export const trackByHour = (index: number, hour: WeekViewHour) =>
4747
hour.segments[0].date.toISOString();
4848

49-
export const trackByDayOrWeekEvent = (
49+
export const trackByWeekAllDayEvent = (
5050
index: number,
51-
weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent
51+
weekEvent: WeekViewAllDayEvent
52+
) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);
53+
54+
export const trackByWeekTimeEvent = (
55+
index: number,
56+
weekEvent: WeekViewTimeEvent
5257
) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);
5358

5459
const MINUTES_IN_HOUR = 60;

‎projects/angular-calendar/src/modules/week/calendar-week-view-hour-segment.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, Input, TemplateRef } from '@angular/core';
2-
import { WeekViewHourColumn } from 'calendar-utils';
2+
import { WeekViewHourSegment } from 'calendar-utils';
33

44
@Component({
55
selector: 'mwl-calendar-week-view-hour-segment',
@@ -50,7 +50,7 @@ import { WeekViewHourColumn } from 'calendar-utils';
5050
`
5151
})
5252
export class CalendarWeekViewHourSegmentComponent {
53-
@Input() segment: WeekViewHourColumn;
53+
@Input() segment: WeekViewHourSegment;
5454

5555
@Input() segmentHeight: number;
5656

‎projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

+11-5
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,11 @@ import {
4242
getDefaultEventEnd,
4343
getMinimumEventHeightInMinutes,
4444
addDaysWithExclusions,
45-
trackByDayOrWeekEvent,
4645
isDraggedWithinPeriod,
4746
shouldFireDroppedEvent,
48-
getWeekViewPeriod
47+
getWeekViewPeriod,
48+
trackByWeekAllDayEvent,
49+
trackByWeekTimeEvent
4950
} from '../common/util';
5051
import { DateAdapter } from '../../date-adapters/date-adapter';
5152
import {
@@ -121,7 +122,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
121122
<div
122123
*ngFor="
123124
let allDayEvent of eventRow.row;
124-
trackBy: trackByDayOrWeekEvent
125+
trackBy: trackByWeekAllDayEvent
125126
"
126127
#event
127128
class="cal-event-container"
@@ -244,7 +245,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
244245
<div
245246
*ngFor="
246247
let timeEvent of column.events;
247-
trackBy: trackByDayOrWeekEvent
248+
trackBy: trackByWeekTimeEvent
248249
"
249250
#event
250251
class="cal-event-container"
@@ -654,7 +655,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
654655
/**
655656
* @hidden
656657
*/
657-
trackByDayOrWeekEvent = trackByDayOrWeekEvent;
658+
trackByWeekAllDayEvent = trackByWeekAllDayEvent;
659+
660+
/**
661+
* @hidden
662+
*/
663+
trackByWeekTimeEvent = trackByWeekTimeEvent;
658664

659665
/**
660666
* @hidden

‎projects/demos/app/demo-modules/additional-event-properties/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33
import { colors } from '../demo-utils/colors';
44

55
@Component({
@@ -8,7 +8,7 @@ import { colors } from '../demo-utils/colors';
88
templateUrl: 'template.html'
99
})
1010
export class DemoComponent {
11-
view: string = 'month';
11+
view: CalendarView = CalendarView.Month;
1212

1313
viewDate: Date = new Date();
1414

‎projects/demos/app/demo-modules/async-events/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
22
import { HttpClient, HttpParams } from '@angular/common/http';
33
import { map } from 'rxjs/operators';
4-
import { CalendarEvent } from 'angular-calendar';
4+
import { CalendarEvent, CalendarView } from 'angular-calendar';
55
import {
66
isSameMonth,
77
isSameDay,
@@ -39,7 +39,7 @@ function getTimezoneOffsetString(date: Date): string {
3939
templateUrl: 'template.html'
4040
})
4141
export class DemoComponent implements OnInit {
42-
view: string = 'month';
42+
view: CalendarView = CalendarView.Month;
4343

4444
viewDate: Date = new Date();
4545

‎projects/demos/app/demo-modules/before-view-render/component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
CalendarEvent,
88
CalendarMonthViewBeforeRenderEvent,
99
CalendarWeekViewBeforeRenderEvent,
10-
CalendarDayViewBeforeRenderEvent
10+
CalendarDayViewBeforeRenderEvent,
11+
CalendarView
1112
} from 'angular-calendar';
1213

1314
@Component({
@@ -24,7 +25,7 @@ import {
2425
]
2526
})
2627
export class DemoComponent {
27-
view: string = 'month';
28+
view: CalendarView = CalendarView.Month;
2829

2930
viewDate: Date = new Date();
3031

‎projects/demos/app/demo-modules/clickable-days/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33

44
@Component({
55
selector: 'mwl-demo-component',
66
changeDetection: ChangeDetectionStrategy.OnPush,
77
templateUrl: 'template.html'
88
})
99
export class DemoComponent {
10-
view: string = 'month';
10+
view: CalendarView = CalendarView.Month;
1111

1212
viewDate: Date = new Date();
1313

‎projects/demos/app/demo-modules/clickable-events/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33
import { colors } from '../demo-utils/colors';
44

55
@Component({
@@ -8,7 +8,7 @@ import { colors } from '../demo-utils/colors';
88
templateUrl: 'template.html'
99
})
1010
export class DemoComponent {
11-
view: string = 'month';
11+
view: CalendarView = CalendarView.Month;
1212

1313
viewDate: Date = new Date();
1414

‎projects/demos/app/demo-modules/context-menu/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33
import { Subject } from 'rxjs';
44
import { colors } from '../demo-utils/colors';
55

@@ -19,7 +19,7 @@ import { colors } from '../demo-utils/colors';
1919
]
2020
})
2121
export class DemoComponent {
22-
view: string = 'month';
22+
view: CalendarView = CalendarView.Month;
2323

2424
viewDate: Date = new Date();
2525

‎projects/demos/app/demo-modules/custom-event-class/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
ChangeDetectionStrategy,
44
ViewEncapsulation
55
} from '@angular/core';
6-
import { CalendarEvent } from 'angular-calendar';
6+
import { CalendarEvent, CalendarView } from 'angular-calendar';
77
import { colors } from '../demo-utils/colors';
88

99
@Component({
@@ -21,7 +21,7 @@ import { colors } from '../demo-utils/colors';
2121
]
2222
})
2323
export class DemoComponent {
24-
view: string = 'month';
24+
view: CalendarView = CalendarView.Month;
2525

2626
viewDate: Date = new Date();
2727

‎projects/demos/app/demo-modules/custom-templates/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33

44
@Component({
55
selector: 'mwl-demo-component',
66
changeDetection: ChangeDetectionStrategy.OnPush,
77
templateUrl: 'template.html'
88
})
99
export class DemoComponent {
10-
view: string = 'month';
10+
view: CalendarView = CalendarView.Month;
1111

1212
viewDate: Date = new Date();
1313

‎projects/demos/app/demo-modules/customise-date-formats/component.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent, CalendarDateFormatter } from 'angular-calendar';
2+
import {
3+
CalendarEvent,
4+
CalendarDateFormatter,
5+
CalendarView
6+
} from 'angular-calendar';
37
import { CustomDateFormatter } from './custom-date-formatter.provider';
48

59
@Component({
@@ -14,7 +18,7 @@ import { CustomDateFormatter } from './custom-date-formatter.provider';
1418
]
1519
})
1620
export class DemoComponent {
17-
view: string = 'month';
21+
view: CalendarView = CalendarView.Month;
1822

1923
viewDate: Date = new Date();
2024

‎projects/demos/app/demo-modules/customise-date-formats/custom-date-formatter.provider.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
22
import { DatePipe } from '@angular/common';
3+
import { Injectable } from '@angular/core';
34

5+
@Injectable()
46
export class CustomDateFormatter extends CalendarDateFormatter {
57
// you can override any of the methods defined in the parent class
68

‎projects/demos/app/demo-modules/day-view-hour-split/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33

44
@Component({
55
selector: 'mwl-demo-component',
66
changeDetection: ChangeDetectionStrategy.OnPush,
77
templateUrl: 'template.html'
88
})
99
export class DemoComponent {
10-
view: string = 'day';
10+
view: CalendarView = CalendarView.Day;
1111

1212
viewDate: Date = new Date();
1313

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

+13-6
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,7 @@
4242
*ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
4343
>
4444
<div
45-
*ngFor="
46-
let timeEvent of column.events;
47-
trackBy: trackByDayOrWeekEvent
48-
"
45+
*ngFor="let timeEvent of column.events; trackBy: trackByWeekTimeEvent"
4946
#event
5047
class="cal-event-container"
5148
[class.cal-draggable]="
@@ -113,7 +110,12 @@
113110
[eventTitleTemplate]="eventTitleTemplate"
114111
[eventActionsTemplate]="eventActionsTemplate"
115112
[column]="column"
116-
(eventClicked)="eventClicked.emit({ event: timeEvent.event })"
113+
(eventClicked)="
114+
eventClicked.emit({
115+
event: timeEvent.event,
116+
sourceEvent: $event.sourceEvent
117+
})
118+
"
117119
>
118120
</mwl-calendar-week-view-event>
119121
<div
@@ -141,7 +143,12 @@
141143
[segmentHeight]="hourSegmentHeight"
142144
[locale]="locale"
143145
[customTemplate]="hourSegmentTemplate"
144-
(mwlClick)="hourSegmentClicked.emit({ date: segment.date })"
146+
(mwlClick)="
147+
hourSegmentClicked.emit({
148+
date: segment.date,
149+
sourceEvent: $event
150+
})
151+
"
145152
[clickListenerDisabled]="hourSegmentClicked.observers.length === 0"
146153
mwlDroppable
147154
[dragOverClass]="

‎projects/demos/app/demo-modules/day-view-start-end/component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
2-
import { CalendarEvent } from 'angular-calendar';
2+
import { CalendarEvent, CalendarView } from 'angular-calendar';
33

44
@Component({
55
selector: 'mwl-demo-component',
66
changeDetection: ChangeDetectionStrategy.OnPush,
77
templateUrl: 'template.html'
88
})
99
export class DemoComponent {
10-
view: string = 'day';
10+
view: CalendarView = CalendarView.Day;
1111

1212
viewDate: Date = new Date();
1313

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, Input, Output, EventEmitter } from '@angular/core';
2+
import { CalendarView } from 'angular-calendar';
23

34
@Component({
45
selector: 'mwl-demo-utils-calendar-header',
@@ -67,7 +68,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
6768
`
6869
})
6970
export class CalendarHeaderComponent {
70-
@Input() view: string;
71+
@Input() view: CalendarView | 'month' | 'week' | 'day';
7172

7273
@Input() viewDate: Date;
7374

0 commit comments

Comments
 (0)