@pieninck/ionic2-calendar 3.0.1 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1257 -1027
  2. package/fesm2022/pieninck-ionic2-calendar.mjs +435 -394
  3. package/fesm2022/pieninck-ionic2-calendar.mjs.map +1 -1
  4. package/package.json +9 -7
  5. package/types/pieninck-ionic2-calendar.d.ts +25 -332
package/fesm2022/pieninck-ionic2-calendar.mjs CHANGED
@@ -1,11 +1,10 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, EventEmitter, Output, Input, ViewChild, Component, ViewEncapsulation, HostBinding, LOCALE_ID, Inject, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
- import { DatePipe, CommonModule } from '@angular/common';
5
- import * as i2$1 from '@ionic/angular';
6
- import { IonicSlides, IonicModule } from '@ionic/angular';
7
- import SwiperCore, { Swiper } from 'swiper';
2
+ import { Injectable, EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, HostBinding, LOCALE_ID, Inject } from '@angular/core';
8
3
  import { Subject } from 'rxjs';
4
+ import SwiperCore, { Swiper } from 'swiper';
5
+ import * as i2 from '@ionic/angular';
6
+ import { IonicSlides, IonicModule } from '@ionic/angular';
7
+ import { DatePipe, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
9
8
 
10
9
  class CalendarService {
11
10
  constructor() {
@@ -15,8 +14,10 @@ class CalendarService {
15
14
  this.eventSourceChanged = new Subject();
16
15
  this.slideChanged = new Subject();
17
16
  this.slideUpdated = new Subject();
18
- this.currentDateChangedFromParent$ = this.currentDateChangedFromParent.asObservable();
19
- this.currentDateChangedFromChildren$ = this.currentDateChangedFromChildren.asObservable();
17
+ this.currentDateChangedFromParent$ =
18
+ this.currentDateChangedFromParent.asObservable();
19
+ this.currentDateChangedFromChildren$ =
20
+ this.currentDateChangedFromChildren.asObservable();
20
21
  this.eventSourceChanged$ = this.eventSourceChanged.asObservable();
21
22
  this.slideChanged$ = this.slideChanged.asObservable();
22
23
  this.slideUpdated$ = this.slideUpdated.asObservable();
@@ -34,13 +35,13 @@ class CalendarService {
34
35
  return this._currentDate;
35
36
  }
36
37
  rangeChanged(component) {
37
- if (this.queryMode === 'local') {
38
+ if (this.queryMode === "local") {
38
39
  if (component.eventSource && component.onDataLoaded) {
39
40
  component.onDataLoaded();
40
41
  }
41
42
  }
42
- else if (this.queryMode === 'remote') {
43
- let rangeStart = new Date(component.range.startTime.getTime()), rangeEnd = new Date(component.range.endTime.getTime());
43
+ else if (this.queryMode === "remote") {
44
+ let rangeStart = new Date(component.range.startTime), rangeEnd = new Date(component.range.endTime);
44
45
  rangeStart.setHours(0);
45
46
  if (rangeStart.getHours() === 23) {
46
47
  rangeStart.setTime(rangeStart.getTime() + 3600000);
@@ -51,29 +52,29 @@ class CalendarService {
51
52
  }
52
53
  component.onRangeChanged.emit({
53
54
  startTime: rangeStart,
54
- endTime: rangeEnd
55
+ endTime: rangeEnd,
55
56
  });
56
57
  }
57
58
  }
58
59
  getStep(mode) {
59
60
  switch (mode) {
60
- case 'month':
61
+ case "month":
61
62
  return {
62
63
  years: 0,
63
64
  months: 1,
64
- days: 0
65
+ days: 0,
65
66
  };
66
- case 'week':
67
+ case "week":
67
68
  return {
68
69
  years: 0,
69
70
  months: 0,
70
- days: 7
71
+ days: 7,
71
72
  };
72
- case 'day':
73
+ case "day":
73
74
  return {
74
75
  years: 0,
75
76
  months: 0,
76
- days: 1
77
+ days: 1,
77
78
  };
78
79
  }
79
80
  }
@@ -81,7 +82,7 @@ class CalendarService {
81
82
  let calculateCalendarDate = this.currentDate;
82
83
  const step = this.getStep(mode), year = calculateCalendarDate.getFullYear() + direction * step.years, month = calculateCalendarDate.getMonth() + direction * step.months, date = calculateCalendarDate.getDate() + direction * step.days;
83
84
  calculateCalendarDate = new Date(year, month, date, 12, 0, 0);
84
- if (mode === 'month') {
85
+ if (mode === "month") {
85
86
  const firstDayInNextMonth = new Date(year, month + 1, 1, 12, 0, 0);
86
87
  if (firstDayInNextMonth.getTime() <= calculateCalendarDate.getTime()) {
87
88
  calculateCalendarDate = new Date(firstDayInNextMonth.getTime() - 24 * 60 * 60 * 1000);
@@ -98,59 +99,60 @@ class CalendarService {
98
99
  if (component.direction === 1) {
99
100
  currentViewStartDate = this.getAdjacentViewStartTime(component, 1);
100
101
  toUpdateViewIndex = (currentViewIndex + 1) % 3;
101
- component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate);
102
+ component.views[toUpdateViewIndex] =
103
+ component.getViewData(currentViewStartDate);
102
104
  }
103
105
  else if (component.direction === -1) {
104
106
  currentViewStartDate = this.getAdjacentViewStartTime(component, -1);
105
107
  toUpdateViewIndex = (currentViewIndex + 2) % 3;
106
- component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate);
108
+ component.views[toUpdateViewIndex] =
109
+ component.getViewData(currentViewStartDate);
110
+ }
111
+ else if (component.views) {
112
+ currentViewStartDate = component.range.startTime;
113
+ component.views[currentViewIndex] =
114
+ component.getViewData(currentViewStartDate);
115
+ currentViewStartDate = this.getAdjacentViewStartTime(component, -1);
116
+ toUpdateViewIndex = (currentViewIndex + 2) % 3;
117
+ component.views[toUpdateViewIndex] =
118
+ component.getViewData(currentViewStartDate);
119
+ currentViewStartDate = this.getAdjacentViewStartTime(component, 1);
120
+ toUpdateViewIndex = (currentViewIndex + 1) % 3;
121
+ component.views[toUpdateViewIndex] =
122
+ component.getViewData(currentViewStartDate);
107
123
  }
108
124
  else {
109
- if (!component.views) {
110
- currentViewData = [];
111
- currentViewStartDate = component.range.startTime;
112
- currentViewData.push(component.getViewData(currentViewStartDate));
113
- currentViewStartDate = this.getAdjacentViewStartTime(component, 1);
114
- currentViewData.push(component.getViewData(currentViewStartDate));
115
- currentViewStartDate = this.getAdjacentViewStartTime(component, -1);
116
- currentViewData.push(component.getViewData(currentViewStartDate));
117
- component.views = currentViewData;
118
- }
119
- else {
120
- currentViewStartDate = component.range.startTime;
121
- component.views[currentViewIndex] = component.getViewData(currentViewStartDate);
122
- currentViewStartDate = this.getAdjacentViewStartTime(component, -1);
123
- toUpdateViewIndex = (currentViewIndex + 2) % 3;
124
- component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate);
125
- currentViewStartDate = this.getAdjacentViewStartTime(component, 1);
126
- toUpdateViewIndex = (currentViewIndex + 1) % 3;
127
- component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate);
128
- }
125
+ currentViewData = [];
126
+ currentViewStartDate = component.range.startTime;
127
+ currentViewData.push(component.getViewData(currentViewStartDate));
128
+ currentViewStartDate = this.getAdjacentViewStartTime(component, 1);
129
+ currentViewData.push(component.getViewData(currentViewStartDate));
130
+ currentViewStartDate = this.getAdjacentViewStartTime(component, -1);
131
+ currentViewData.push(component.getViewData(currentViewStartDate));
132
+ component.views = currentViewData;
129
133
  }
130
134
  }
131
- loadEvents() {
132
- this.eventSourceChanged.next();
133
- }
134
135
  slide(direction) {
135
136
  this.slideChanged.next(direction);
136
137
  }
137
- update() {
138
- this.slideUpdated.next();
139
- }
140
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
141
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarService }); }
138
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
139
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CalendarService }); }
142
140
  }
143
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarService, decorators: [{
141
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CalendarService, decorators: [{
144
142
  type: Injectable
145
143
  }], ctorParameters: () => [] });
146
144
 
145
+ var Step;
146
+ (function (Step) {
147
+ Step[Step["Hour"] = 60] = "Hour";
148
+ })(Step || (Step = {}));
149
+
147
150
  class MonthViewComponent {
148
- constructor(calendarService, zone) {
151
+ constructor(calendarService) {
149
152
  this.calendarService = calendarService;
150
- this.zone = zone;
151
153
  this.showEventDetail = true;
152
154
  this.autoSelect = true;
153
- this.dir = '';
155
+ this.dir = "";
154
156
  this.lockSwipeToPrev = false;
155
157
  this.lockSwipeToNext = false;
156
158
  this.lockSwipes = false;
@@ -160,74 +162,77 @@ class MonthViewComponent {
160
162
  this.onTitleChanged = new EventEmitter();
161
163
  this.views = [];
162
164
  this.currentViewIndex = 0;
163
- this.mode = 'month';
165
+ this.mode = "month";
164
166
  this.direction = 0;
165
167
  this.moveOnSelected = false;
166
168
  this.inited = false;
167
169
  }
168
170
  static getDates(startDate, n) {
169
- const dates = new Array(n), current = new Date(startDate.getTime());
171
+ const dates = new Array(n), current = new Date(startDate);
170
172
  let i = 0;
171
173
  while (i < n) {
172
- dates[i++] = new Date(current.getTime());
174
+ dates[i++] = new Date(current);
173
175
  current.setDate(current.getDate() + 1);
174
176
  }
175
177
  return dates;
176
178
  }
177
179
  ngOnInit() {
178
- if (!this.sliderOptions) {
179
- this.sliderOptions = {};
180
- }
180
+ this.sliderOptions ??= {};
181
181
  this.sliderOptions.loop = true;
182
182
  this.sliderOptions.allowSlidePrev = !this.lockSwipeToPrev;
183
183
  this.sliderOptions.allowSlideNext = !this.lockSwipeToNext;
184
184
  this.sliderOptions.allowTouchMove = !this.lockSwipes;
185
- if (this.dateFormatter && this.dateFormatter.formatMonthViewDay) {
185
+ if (this.dateFormatter?.formatMonthViewDay) {
186
186
  this.formatDayLabel = this.dateFormatter.formatMonthViewDay;
187
187
  }
188
188
  else {
189
- const dayLabelDatePipe = new DatePipe('en-US');
189
+ const dayLabelDatePipe = new DatePipe("en-US");
190
190
  this.formatDayLabel = function (date) {
191
- return dayLabelDatePipe.transform(date, this.formatDay) || '';
191
+ return dayLabelDatePipe.transform(date, this.formatDay) || "";
192
192
  };
193
193
  }
194
- if (this.dateFormatter && this.dateFormatter.formatMonthViewDayHeader) {
195
- this.formatDayHeaderLabel = this.dateFormatter.formatMonthViewDayHeader;
194
+ if (this.dateFormatter?.formatMonthViewDayHeader) {
195
+ this.formatDayHeaderLabel =
196
+ this.dateFormatter.formatMonthViewDayHeader;
196
197
  }
197
198
  else {
198
199
  const datePipe = new DatePipe(this.locale);
199
200
  this.formatDayHeaderLabel = function (date) {
200
- return datePipe.transform(date, this.formatDayHeader) || '';
201
+ return datePipe.transform(date, this.formatDayHeader) || "";
201
202
  };
202
203
  }
203
- if (this.dateFormatter && this.dateFormatter.formatMonthViewTitle) {
204
+ if (this.dateFormatter?.formatMonthViewTitle) {
204
205
  this.formatTitle = this.dateFormatter.formatMonthViewTitle;
205
206
  }
206
207
  else {
207
208
  const datePipe = new DatePipe(this.locale);
208
209
  this.formatTitle = function (date) {
209
- return datePipe.transform(date, this.formatMonthTitle) || '';
210
+ return datePipe.transform(date, this.formatMonthTitle) || "";
210
211
  };
211
212
  }
212
213
  this.refreshView();
213
214
  this.inited = true;
214
- this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => {
215
- this.refreshView();
216
- });
217
- this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => {
218
- this.onDataLoaded();
219
- });
220
- this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => {
221
- if (direction === 1) {
222
- this.slider.slideNext();
223
- }
224
- else if (direction === -1) {
225
- this.slider.slidePrev();
226
- }
227
- });
228
- this.slideUpdatedSubscription = this.calendarService.slideUpdated$.subscribe(() => {
229
- this.slider.update();
230
- });
215
+ this.currentDateChangedFromParentSubscription =
216
+ this.calendarService.currentDateChangedFromParent$.subscribe(() => {
217
+ this.refreshView();
218
+ });
219
+ this.eventSourceChangedSubscription =
220
+ this.calendarService.eventSourceChanged$.subscribe(() => {
221
+ this.onDataLoaded();
222
+ });
223
+ this.slideChangedSubscription =
224
+ this.calendarService.slideChanged$.subscribe((direction) => {
225
+ if (direction === 1) {
226
+ this.slider.slideNext();
227
+ }
228
+ else if (direction === -1) {
229
+ this.slider.slidePrev();
230
+ }
231
+ });
232
+ this.slideUpdatedSubscription =
233
+ this.calendarService.slideUpdated$.subscribe(() => {
234
+ this.slider.update();
235
+ });
231
236
  }
232
237
  ngOnDestroy() {
233
238
  if (this.currentDateChangedFromParentSubscription) {
@@ -251,19 +256,19 @@ class MonthViewComponent {
251
256
  if (!this.inited) {
252
257
  return;
253
258
  }
254
- const eventSourceChange = changes['eventSource'];
255
- if (eventSourceChange && eventSourceChange.currentValue) {
259
+ const eventSourceChange = changes["eventSource"];
260
+ if (eventSourceChange?.currentValue) {
256
261
  this.onDataLoaded();
257
262
  }
258
- const lockSwipeToPrev = changes['lockSwipeToPrev'];
263
+ const lockSwipeToPrev = changes["lockSwipeToPrev"];
259
264
  if (lockSwipeToPrev) {
260
265
  this.slider.allowSlidePrev = !lockSwipeToPrev.currentValue;
261
266
  }
262
- const lockSwipeToNext = changes['lockSwipeToNext'];
267
+ const lockSwipeToNext = changes["lockSwipeToNext"];
263
268
  if (lockSwipeToNext) {
264
269
  this.slider.allowSlideNext = !lockSwipeToNext.currentValue;
265
270
  }
266
- const lockSwipes = changes['lockSwipes'];
271
+ const lockSwipes = changes["lockSwipes"];
267
272
  if (lockSwipes) {
268
273
  this.slider.allowTouchMove = !lockSwipes.currentValue;
269
274
  }
@@ -271,21 +276,18 @@ class MonthViewComponent {
271
276
  ngAfterViewInit() {
272
277
  this.slider = new Swiper(this.swiperElement?.nativeElement, this.sliderOptions);
273
278
  let me = this;
274
- this.slider.on('slideNextTransitionEnd', function () {
279
+ this.slider.on("slideNextTransitionEnd", function () {
275
280
  me.onSlideChanged(1);
276
281
  });
277
- this.slider.on('slidePrevTransitionEnd', function () {
282
+ this.slider.on("slidePrevTransitionEnd", function () {
278
283
  me.onSlideChanged(-1);
279
284
  });
280
- if (this.dir == 'rtl') {
281
- this.slider.changeLanguageDirection('rtl');
285
+ if (this.dir == "rtl") {
286
+ this.slider.changeLanguageDirection("rtl");
282
287
  }
283
288
  const title = this.getTitle();
284
289
  this.onTitleChanged.emit(title);
285
290
  }
286
- setSwiperInstance(swiper) {
287
- this.slider = swiper;
288
- }
289
291
  onSlideChanged(direction) {
290
292
  this.currentViewIndex = (this.currentViewIndex + direction + 3) % 3;
291
293
  this.move(direction);
@@ -313,11 +315,11 @@ class MonthViewComponent {
313
315
  events: [],
314
316
  label: this.formatDayLabel(date),
315
317
  secondary: false,
316
- disabled
318
+ disabled,
317
319
  };
318
320
  }
319
321
  getViewData(startTime) {
320
- const startDate = startTime, date = startDate.getDate(), month = (startDate.getMonth() + (date !== 1 ? 1 : 0)) % 12;
322
+ const startDate = startTime, date = startDate.getDate(), month = (startDate.getMonth() + (date === 1 ? 0 : 1)) % 12;
321
323
  const dates = MonthViewComponent.getDates(startDate, 42);
322
324
  const days = [];
323
325
  for (let i = 0; i < 42; i++) {
@@ -331,56 +333,56 @@ class MonthViewComponent {
331
333
  }
332
334
  return {
333
335
  dates: days,
334
- dayHeaders
336
+ dayHeaders,
335
337
  };
336
338
  }
337
339
  getHighlightClass(date) {
338
- let className = '';
340
+ let className = "";
339
341
  if (date.hasEvent) {
340
342
  if (date.secondary) {
341
- className = 'monthview-secondary-with-event';
343
+ className = "monthview-secondary-with-event";
342
344
  }
343
345
  else {
344
- className = 'monthview-primary-with-event';
346
+ className = "monthview-primary-with-event";
345
347
  }
346
348
  }
347
349
  if (date.selected) {
348
350
  if (className) {
349
- className += ' ';
351
+ className += " ";
350
352
  }
351
- className += 'monthview-selected';
353
+ className += "monthview-selected";
352
354
  }
353
355
  if (date.current) {
354
356
  if (className) {
355
- className += ' ';
357
+ className += " ";
356
358
  }
357
- className += 'monthview-current';
359
+ className += "monthview-current";
358
360
  }
359
361
  if (date.secondary) {
360
362
  if (className) {
361
- className += ' ';
363
+ className += " ";
362
364
  }
363
- className += 'text-muted';
365
+ className += "text-muted";
364
366
  }
365
367
  if (date.disabled) {
366
368
  if (className) {
367
- className += ' ';
369
+ className += " ";
368
370
  }
369
- className += 'monthview-disabled';
371
+ className += "monthview-disabled";
370
372
  }
371
373
  return className;
372
374
  }
373
375
  getRange(currentDate) {
374
376
  const year = currentDate.getFullYear(), month = currentDate.getMonth(), firstDayOfMonth = new Date(year, month, 1, 12, 0, 0), // set hour to 12 to avoid DST problem
375
- difference = this.startingDayMonth - firstDayOfMonth.getDay(), numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth.getTime());
377
+ difference = this.startingDayMonth - firstDayOfMonth.getDay(), numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth);
376
378
  if (numDisplayedFromPreviousMonth > 0) {
377
379
  startDate.setDate(-numDisplayedFromPreviousMonth + 1);
378
380
  }
379
- const endDate = new Date(startDate.getTime());
381
+ const endDate = new Date(startDate);
380
382
  endDate.setDate(endDate.getDate() + 42);
381
383
  return {
382
384
  startTime: startDate,
383
- endTime: endDate
385
+ endTime: endDate,
384
386
  };
385
387
  }
386
388
  onDataLoaded() {
@@ -402,7 +404,8 @@ class MonthViewComponent {
402
404
  eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate());
403
405
  eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1);
404
406
  }
405
- if (eventUTCEndTime <= utcStartTime || eventUTCStartTime >= utcEndTime) {
407
+ if (eventUTCEndTime <= utcStartTime ||
408
+ eventUTCStartTime >= utcEndTime) {
406
409
  continue;
407
410
  }
408
411
  let timeDifferenceStart, timeDifferenceEnd;
@@ -410,7 +413,8 @@ class MonthViewComponent {
410
413
  timeDifferenceStart = 0;
411
414
  }
412
415
  else {
413
- timeDifferenceStart = (eventUTCStartTime - utcStartTime) / oneDay;
416
+ timeDifferenceStart =
417
+ (eventUTCStartTime - utcStartTime) / oneDay;
414
418
  }
415
419
  if (eventUTCEndTime > utcEndTime) {
416
420
  timeDifferenceEnd = (utcEndTime - utcStartTime) / oneDay;
@@ -452,7 +456,7 @@ class MonthViewComponent {
452
456
  this.onTimeSelected.emit({
453
457
  selectedTime: this.selectedDate.date,
454
458
  events: this.selectedDate.events,
455
- disabled: this.selectedDate.disabled
459
+ disabled: this.selectedDate.disabled,
456
460
  });
457
461
  }
458
462
  }
@@ -468,7 +472,8 @@ class MonthViewComponent {
468
472
  this.calendarService.rangeChanged(this);
469
473
  }
470
474
  getTitle() {
471
- const currentViewStartDate = this.range.startTime, date = currentViewStartDate.getDate(), month = (currentViewStartDate.getMonth() + (date !== 1 ? 1 : 0)) % 12, year = currentViewStartDate.getFullYear() + (date !== 1 && month === 0 ? 1 : 0), headerDate = new Date(year, month, 1, 12, 0, 0, 0);
475
+ const currentViewStartDate = this.range.startTime, date = currentViewStartDate.getDate(), month = (currentViewStartDate.getMonth() + (date === 1 ? 0 : 1)) % 12, year = currentViewStartDate.getFullYear() +
476
+ (date !== 1 && month === 0 ? 1 : 0), headerDate = new Date(year, month, 1, 12, 0, 0, 0);
472
477
  return this.formatTitle(headerDate);
473
478
  }
474
479
  compareEvent(event1, event2) {
@@ -479,7 +484,7 @@ class MonthViewComponent {
479
484
  return -1;
480
485
  }
481
486
  else {
482
- return (event1.startTime.getTime() - event2.startTime.getTime());
487
+ return event1.startTime.getTime() - event2.startTime.getTime();
483
488
  }
484
489
  }
485
490
  select(viewDate) {
@@ -500,7 +505,9 @@ class MonthViewComponent {
500
505
  }
501
506
  this.calendarService.setCurrentDate(selectedDate);
502
507
  if (direction === 0) {
503
- const currentViewStartDate = this.range.startTime, oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay);
508
+ const currentViewStartDate = this.range.startTime, oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) -
509
+ Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) /
510
+ oneDay);
504
511
  for (let r = 0; r < 42; r += 1) {
505
512
  dates[r].selected = false;
506
513
  }
@@ -514,7 +521,11 @@ class MonthViewComponent {
514
521
  this.slideView(direction);
515
522
  }
516
523
  }
517
- this.onTimeSelected.emit({ selectedTime: selectedDate, events, disabled: viewDate.disabled });
524
+ this.onTimeSelected.emit({
525
+ selectedTime: selectedDate,
526
+ events,
527
+ disabled: viewDate.disabled,
528
+ });
518
529
  }
519
530
  slideView(direction) {
520
531
  if (direction === 1) {
@@ -525,11 +536,18 @@ class MonthViewComponent {
525
536
  }
526
537
  }
527
538
  updateCurrentView(currentViewStartDate, view) {
528
- const currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), currentCalendarDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay), currentDayDifference = Math.round((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay);
539
+ const currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), currentCalendarDate.getDate()) -
540
+ Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) /
541
+ oneDay), currentDayDifference = Math.round((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) -
542
+ Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) /
543
+ oneDay);
529
544
  for (let r = 0; r < 42; r += 1) {
530
545
  view.dates[r].selected = false;
531
546
  }
532
- if (selectedDayDifference >= 0 && selectedDayDifference < 42 && !view.dates[selectedDayDifference].disabled && (this.autoSelect || this.moveOnSelected)) {
547
+ if (selectedDayDifference >= 0 &&
548
+ selectedDayDifference < 42 &&
549
+ !view.dates[selectedDayDifference].disabled &&
550
+ (this.autoSelect || this.moveOnSelected)) {
533
551
  view.dates[selectedDayDifference].selected = true;
534
552
  this.selectedDate = view.dates[selectedDayDifference];
535
553
  }
@@ -540,18 +558,15 @@ class MonthViewComponent {
540
558
  view.dates[currentDayDifference].current = true;
541
559
  }
542
560
  }
543
- eventSelected(event) {
544
- this.onEventSelected.emit(event);
545
- }
546
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MonthViewComponent, deps: [{ token: CalendarService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
547
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: MonthViewComponent, isStandalone: false, selector: "monthview", inputs: { monthviewDisplayEventTemplate: "monthviewDisplayEventTemplate", monthviewInactiveDisplayEventTemplate: "monthviewInactiveDisplayEventTemplate", monthviewEventDetailTemplate: "monthviewEventDetailTemplate", formatDay: "formatDay", formatDayHeader: "formatDayHeader", formatMonthTitle: "formatMonthTitle", eventSource: "eventSource", startingDayMonth: "startingDayMonth", showEventDetail: "showEventDetail", noEventsLabel: "noEventsLabel", autoSelect: "autoSelect", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", sliderOptions: "sliderOptions" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, viewQueries: [{ propertyName: "swiperElement", first: true, predicate: ["monthViewSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"swiper monthview-swiper\" #monthViewSwiper>\r\n <div class=\"swiper-wrapper\">\r\n <div class=\"swiper-slide\">\r\n <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\r\n [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr class=\"text-center\">\r\n <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n <tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"swiper-slide\">\r\n <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\r\n [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr class=\"text-center\">\r\n <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n <tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"swiper-slide\">\r\n <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\r\n [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr class=\"text-center\">\r\n <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n <tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\r\n </ng-template>\r\n</div>", styles: [".text-muted{color:#999}.table-fixed{table-layout:fixed}.table{width:100%;max-width:100%;background-color:transparent}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.monthview-primary-with-event{background-color:#3a87ad;color:#fff}.monthview-current{background-color:#f0f0f0}.monthview-selected{background-color:#090;color:#fff}.monthview-datetable td.monthview-disabled{color:#d3d3d3;cursor:default}.monthview-datetable th{text-align:center}.monthview-datetable td{cursor:pointer;text-align:center}.monthview-secondary-with-event{background-color:#d9edf7}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
561
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MonthViewComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
562
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: MonthViewComponent, isStandalone: true, selector: "monthview", inputs: { monthviewDisplayEventTemplate: "monthviewDisplayEventTemplate", monthviewInactiveDisplayEventTemplate: "monthviewInactiveDisplayEventTemplate", monthviewEventDetailTemplate: "monthviewEventDetailTemplate", formatDay: "formatDay", formatDayHeader: "formatDayHeader", formatMonthTitle: "formatMonthTitle", eventSource: "eventSource", startingDayMonth: "startingDayMonth", showEventDetail: "showEventDetail", noEventsLabel: "noEventsLabel", autoSelect: "autoSelect", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", sliderOptions: "sliderOptions" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, viewQueries: [{ propertyName: "swiperElement", first: true, predicate: ["monthViewSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"swiper monthview-swiper\" #monthViewSwiper>\n <div class=\"swiper-wrapper\">\n <div class=\"swiper-slide\">\n @if (0===currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr>\n @for (dayHeader of views[0].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td\n tappable\n (click)=\"select(views[0].dates[row*7+col])\"\n [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\"\n >\n <ng-template\n [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @if (0!==currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr class=\"text-center\">\n @for (dayHeader of views[0].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td>\n <ng-template\n [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n <tr></tr>\n </tbody>\n </table>\n }\n </div>\n <div class=\"swiper-slide\">\n @if (1===currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr>\n @for (dayHeader of views[1].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td\n tappable\n (click)=\"select(views[1].dates[row*7+col])\"\n [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\"\n >\n <ng-template\n [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @if (1!==currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr class=\"text-center\">\n @for (dayHeader of views[1].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td>\n <ng-template\n [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n <tr></tr>\n </tbody>\n </table>\n }\n </div>\n <div class=\"swiper-slide\">\n @if (2===currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr>\n @for (dayHeader of views[2].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td\n tappable\n (click)=\"select(views[2].dates[row*7+col])\"\n [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\"\n >\n <ng-template\n [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @if (2!==currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr class=\"text-center\">\n @for (dayHeader of views[2].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td>\n <ng-template\n [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n <tr></tr>\n </tbody>\n </table>\n }\n </div>\n </div>\n <ng-template\n [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n [ngTemplateOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\"\n >\n </ng-template>\n</div>\n", styles: [".text-muted{color:#999}.table-fixed{table-layout:fixed}.table{width:100%;max-width:100%;background-color:transparent}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.monthview-primary-with-event{background-color:#3a87ad;color:#fff}.monthview-current{background-color:#f0f0f0}.monthview-selected{background-color:#090;color:#fff}.monthview-datetable td.monthview-disabled{color:#d3d3d3;cursor:default}.monthview-datetable th{text-align:center}.monthview-datetable td{cursor:pointer;text-align:center}.monthview-secondary-with-event{background-color:#d9edf7}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
548
563
  }
549
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MonthViewComponent, decorators: [{
564
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MonthViewComponent, decorators: [{
550
565
  type: Component,
551
- args: [{ selector: 'monthview', standalone: false, template: "<div class=\"swiper monthview-swiper\" #monthViewSwiper>\r\n <div class=\"swiper-wrapper\">\r\n <div class=\"swiper-slide\">\r\n <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\r\n [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr class=\"text-center\">\r\n <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n <tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"swiper-slide\">\r\n <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\r\n [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr class=\"text-center\">\r\n <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n <tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"swiper-slide\">\r\n <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\r\n [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\r\n <thead>\r\n <tr class=\"text-center\">\r\n <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\r\n <small>{{dayHeader}}</small>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\r\n <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\r\n <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\r\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\">\r\n </ng-template>\r\n </td>\r\n <tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\r\n </ng-template>\r\n</div>", styles: [".text-muted{color:#999}.table-fixed{table-layout:fixed}.table{width:100%;max-width:100%;background-color:transparent}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.monthview-primary-with-event{background-color:#3a87ad;color:#fff}.monthview-current{background-color:#f0f0f0}.monthview-selected{background-color:#090;color:#fff}.monthview-datetable td.monthview-disabled{color:#d3d3d3;cursor:default}.monthview-datetable th{text-align:center}.monthview-datetable td{cursor:pointer;text-align:center}.monthview-secondary-with-event{background-color:#d9edf7}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}\n"] }]
552
- }], ctorParameters: () => [{ type: CalendarService }, { type: i0.NgZone }], propDecorators: { swiperElement: [{
566
+ args: [{ selector: "monthview", changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"swiper monthview-swiper\" #monthViewSwiper>\n <div class=\"swiper-wrapper\">\n <div class=\"swiper-slide\">\n @if (0===currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr>\n @for (dayHeader of views[0].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td\n tappable\n (click)=\"select(views[0].dates[row*7+col])\"\n [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\"\n >\n <ng-template\n [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @if (0!==currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr class=\"text-center\">\n @for (dayHeader of views[0].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td>\n <ng-template\n [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[0], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n <tr></tr>\n </tbody>\n </table>\n }\n </div>\n <div class=\"swiper-slide\">\n @if (1===currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr>\n @for (dayHeader of views[1].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td\n tappable\n (click)=\"select(views[1].dates[row*7+col])\"\n [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\"\n >\n <ng-template\n [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @if (1!==currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr class=\"text-center\">\n @for (dayHeader of views[1].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td>\n <ng-template\n [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[1], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n <tr></tr>\n </tbody>\n </table>\n }\n </div>\n <div class=\"swiper-slide\">\n @if (2===currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr>\n @for (dayHeader of views[2].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td\n tappable\n (click)=\"select(views[2].dates[row*7+col])\"\n [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\"\n >\n <ng-template\n [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @if (2!==currentViewIndex) {\n <table class=\"table table-bordered table-fixed monthview-datetable\">\n <thead>\n <tr class=\"text-center\">\n @for (dayHeader of views[2].dayHeaders; track dayHeader)\n {\n <th>\n <small>{{dayHeader}}</small>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of [0,1,2,3,4,5]; track row) {\n <tr>\n @for (col of [0,1,2,3,4,5,6]; track col) {\n <td>\n <ng-template\n [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n [ngTemplateOutletContext]=\"{view: views[2], row: row, col: col}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n <tr></tr>\n </tbody>\n </table>\n }\n </div>\n </div>\n <ng-template\n [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n [ngTemplateOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\"\n >\n </ng-template>\n</div>\n", styles: [".text-muted{color:#999}.table-fixed{table-layout:fixed}.table{width:100%;max-width:100%;background-color:transparent}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.monthview-primary-with-event{background-color:#3a87ad;color:#fff}.monthview-current{background-color:#f0f0f0}.monthview-selected{background-color:#090;color:#fff}.monthview-datetable td.monthview-disabled{color:#d3d3d3;cursor:default}.monthview-datetable th{text-align:center}.monthview-datetable td{cursor:pointer;text-align:center}.monthview-secondary-with-event{background-color:#d9edf7}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}\n"] }]
567
+ }], ctorParameters: () => [{ type: CalendarService }], propDecorators: { swiperElement: [{
553
568
  type: ViewChild,
554
- args: ['monthViewSwiper']
569
+ args: ["monthViewSwiper"]
555
570
  }], monthviewDisplayEventTemplate: [{
556
571
  type: Input
557
572
  }], monthviewInactiveDisplayEventTemplate: [{
@@ -608,8 +623,10 @@ class initPositionScrollComponent {
608
623
  this.element = el;
609
624
  }
610
625
  ngOnChanges(changes) {
611
- let initPosition = changes['initPosition'];
612
- if (initPosition && initPosition.currentValue !== undefined && this.scrollContent && initPosition.currentValue != this.scrollContent.scrollTop) {
626
+ let initPosition = changes["initPosition"];
627
+ if (initPosition?.currentValue !== undefined &&
628
+ this.scrollContent &&
629
+ initPosition.currentValue != this.scrollContent.scrollTop) {
613
630
  const me = this;
614
631
  this.ngZone.run(() => {
615
632
  me.scrollContent.scrollTop = initPosition.currentValue;
@@ -617,7 +634,8 @@ class initPositionScrollComponent {
617
634
  }
618
635
  }
619
636
  ngAfterViewInit() {
620
- const scrollContent = this.scrollContent = this.element.nativeElement.querySelector('.scroll-content');
637
+ const scrollContent = (this.scrollContent =
638
+ this.element.nativeElement.querySelector(".scroll-content"));
621
639
  if (this.initPosition !== undefined) {
622
640
  scrollContent.scrollTop = this.initPosition;
623
641
  }
@@ -630,29 +648,29 @@ class initPositionScrollComponent {
630
648
  }
631
649
  };
632
650
  this.listenerAttached = true;
633
- scrollContent.addEventListener('scroll', this.handler);
651
+ scrollContent.addEventListener("scroll", this.handler);
634
652
  }
635
653
  }
636
654
  ngOnDestroy() {
637
655
  if (this.listenerAttached) {
638
- this.scrollContent.removeEventListener('scroll', this.handler);
656
+ this.scrollContent.removeEventListener("scroll", this.handler);
639
657
  this.listenerAttached = false;
640
658
  }
641
659
  }
642
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: initPositionScrollComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
643
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: initPositionScrollComponent, isStandalone: false, selector: "init-position-scroll", inputs: { initPosition: "initPosition", emitEvent: "emitEvent" }, outputs: { onScroll: "onScroll" }, usesOnChanges: true, ngImport: i0, template: `
644
- <div class="scroll-content" style="height:100%">
645
- <ng-content></ng-content>
646
- </div>
647
- `, isInline: true, styles: [".scroll-content{overflow-y:auto;overflow-x:hidden}\n"], encapsulation: i0.ViewEncapsulation.None }); }
660
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: initPositionScrollComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
661
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: initPositionScrollComponent, isStandalone: true, selector: "init-position-scroll", inputs: { initPosition: "initPosition", emitEvent: "emitEvent" }, outputs: { onScroll: "onScroll" }, usesOnChanges: true, ngImport: i0, template: `
662
+ <div class="scroll-content" style="height:100%">
663
+ <ng-content></ng-content>
664
+ </div>
665
+ `, isInline: true, styles: [".scroll-content{overflow-y:auto;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
648
666
  }
649
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: initPositionScrollComponent, decorators: [{
667
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: initPositionScrollComponent, decorators: [{
650
668
  type: Component,
651
- args: [{ selector: 'init-position-scroll', template: `
652
- <div class="scroll-content" style="height:100%">
653
- <ng-content></ng-content>
654
- </div>
655
- `, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".scroll-content{overflow-y:auto;overflow-x:hidden}\n"] }]
669
+ args: [{ selector: "init-position-scroll", template: `
670
+ <div class="scroll-content" style="height:100%">
671
+ <ng-content></ng-content>
672
+ </div>
673
+ `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, styles: [".scroll-content{overflow-y:auto;overflow-x:hidden}\n"] }]
656
674
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { initPosition: [{
657
675
  type: Input
658
676
  }], emitEvent: [{
@@ -662,13 +680,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
662
680
  }] } });
663
681
 
664
682
  class WeekViewComponent {
665
- constructor(calendarService, elm, zone) {
683
+ constructor(calendarService, elm) {
666
684
  this.calendarService = calendarService;
667
685
  this.elm = elm;
668
- this.zone = zone;
669
686
  this.class = true;
670
687
  this.autoSelect = true;
671
- this.dir = '';
688
+ this.dir = "";
672
689
  this.scrollToHour = 0;
673
690
  this.onRangeChanged = new EventEmitter();
674
691
  this.onEventSelected = new EventEmitter();
@@ -679,7 +696,7 @@ class WeekViewComponent {
679
696
  this.views = [];
680
697
  this.currentViewIndex = 0;
681
698
  this.direction = 0;
682
- this.mode = 'week';
699
+ this.mode = "week";
683
700
  this.inited = false;
684
701
  }
685
702
  static createDateObjects(startTime, startHour, endHour, timeInterval) {
@@ -697,12 +714,12 @@ class WeekViewComponent {
697
714
  for (let interval = 0; interval < 60; interval += minStep) {
698
715
  const row = [];
699
716
  for (let day = 0; day < 7; day += 1) {
700
- const time = new Date(startTime.getTime());
717
+ const time = new Date(startTime);
701
718
  time.setHours(currentHour + hour, interval);
702
719
  time.setDate(currentDate + day);
703
720
  row.push({
704
721
  events: [],
705
- time
722
+ time,
706
723
  });
707
724
  }
708
725
  times.push(row);
@@ -711,13 +728,13 @@ class WeekViewComponent {
711
728
  return times;
712
729
  }
713
730
  static getDates(startTime, n) {
714
- const dates = new Array(n), current = new Date(startTime.getTime());
731
+ const dates = new Array(n), current = new Date(startTime);
715
732
  let i = 0;
716
733
  while (i < n) {
717
734
  dates[i++] = {
718
- date: new Date(current.getTime()),
735
+ date: new Date(current),
719
736
  events: [],
720
- dayHeader: ''
737
+ dayHeader: "",
721
738
  };
722
739
  current.setDate(current.getDate() + 1);
723
740
  }
@@ -735,7 +752,7 @@ class WeekViewComponent {
735
752
  for (let i = 0; i < totalSize; i += 1) {
736
753
  cells[i] = {
737
754
  calculated: false,
738
- events: []
755
+ events: [],
739
756
  };
740
757
  }
741
758
  const len = orderedEvents.length;
@@ -754,9 +771,10 @@ class WeekViewComponent {
754
771
  const overlapNumber = event.position + 1;
755
772
  event.overlapNumber = overlapNumber;
756
773
  const eventQueue = [event];
757
- while (event = eventQueue.shift()) {
774
+ while ((event = eventQueue.shift())) {
758
775
  let index = event.startIndex * hourParts + event.startOffset;
759
- while (index < event.endIndex * hourParts - event.endOffset) {
776
+ while (index <
777
+ event.endIndex * hourParts - event.endOffset) {
760
778
  if (!cells[index].calculated) {
761
779
  cells[index].calculated = true;
762
780
  if (cells[index].events) {
@@ -764,7 +782,8 @@ class WeekViewComponent {
764
782
  for (let j = 0; j < eventCountInCell; j += 1) {
765
783
  const currentEventInCell = cells[index].events[j];
766
784
  if (!currentEventInCell.overlapNumber) {
767
- currentEventInCell.overlapNumber = overlapNumber;
785
+ currentEventInCell.overlapNumber =
786
+ overlapNumber;
768
787
  eventQueue.push(currentEventInCell);
769
788
  }
770
789
  }
@@ -778,81 +797,87 @@ class WeekViewComponent {
778
797
  }
779
798
  }
780
799
  ngOnInit() {
781
- if (!this.sliderOptions) {
782
- this.sliderOptions = {};
783
- }
800
+ this.sliderOptions ??= {};
784
801
  this.sliderOptions.loop = true;
785
802
  this.sliderOptions.allowSlidePrev = !this.lockSwipeToPrev;
786
803
  this.sliderOptions.allowSlideNext = !this.lockSwipeToNext;
787
804
  this.sliderOptions.allowTouchMove = !this.lockSwipes;
788
805
  this.hourRange = (this.endHour - this.startHour) * this.hourSegments;
789
- if (this.dateFormatter && this.dateFormatter.formatWeekViewDayHeader) {
806
+ if (this.dateFormatter?.formatWeekViewDayHeader) {
790
807
  this.formatDayHeader = this.dateFormatter.formatWeekViewDayHeader;
791
808
  }
792
809
  else {
793
810
  const datePipe = new DatePipe(this.locale);
794
811
  this.formatDayHeader = function (date) {
795
- return datePipe.transform(date, this.formatWeekViewDayHeader) || '';
812
+ return (datePipe.transform(date, this.formatWeekViewDayHeader) || "");
796
813
  };
797
814
  }
798
- if (this.dateFormatter && this.dateFormatter.formatWeekViewTitle) {
815
+ if (this.dateFormatter?.formatWeekViewTitle) {
799
816
  this.formatTitle = this.dateFormatter.formatWeekViewTitle;
800
817
  }
801
818
  else {
802
819
  const datePipe = new DatePipe(this.locale);
803
820
  this.formatTitle = function (date) {
804
- return datePipe.transform(date, this.formatWeekTitle) || '';
821
+ return datePipe.transform(date, this.formatWeekTitle) || "";
805
822
  };
806
823
  }
807
- if (this.dateFormatter && this.dateFormatter.formatWeekViewHourColumn) {
808
- this.formatHourColumnLabel = this.dateFormatter.formatWeekViewHourColumn;
824
+ if (this.dateFormatter?.formatWeekViewHourColumn) {
825
+ this.formatHourColumnLabel =
826
+ this.dateFormatter.formatWeekViewHourColumn;
809
827
  }
810
828
  else {
811
829
  const datePipe = new DatePipe(this.locale);
812
830
  this.formatHourColumnLabel = function (date) {
813
- return datePipe.transform(date, this.formatHourColumn) || '';
831
+ return datePipe.transform(date, this.formatHourColumn) || "";
814
832
  };
815
833
  }
816
834
  this.refreshView();
817
835
  this.hourColumnLabels = this.getHourColumnLabels();
818
836
  this.inited = true;
819
- this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => {
820
- this.refreshView();
821
- });
822
- this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => {
823
- this.onDataLoaded();
824
- });
825
- this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => {
826
- if (direction === 1) {
827
- this.slider.slideNext();
828
- }
829
- else if (direction === -1) {
830
- this.slider.slidePrev();
831
- }
832
- });
833
- this.slideUpdatedSubscription = this.calendarService.slideUpdated$.subscribe(() => {
834
- this.slider.update();
835
- });
837
+ this.currentDateChangedFromParentSubscription =
838
+ this.calendarService.currentDateChangedFromParent$.subscribe(() => {
839
+ this.refreshView();
840
+ });
841
+ this.eventSourceChangedSubscription =
842
+ this.calendarService.eventSourceChanged$.subscribe(() => {
843
+ this.onDataLoaded();
844
+ });
845
+ this.slideChangedSubscription =
846
+ this.calendarService.slideChanged$.subscribe((direction) => {
847
+ if (direction === 1) {
848
+ this.slider.slideNext();
849
+ }
850
+ else if (direction === -1) {
851
+ this.slider.slidePrev();
852
+ }
853
+ });
854
+ this.slideUpdatedSubscription =
855
+ this.calendarService.slideUpdated$.subscribe(() => {
856
+ this.slider.update();
857
+ });
836
858
  }
837
859
  ngAfterViewInit() {
838
860
  this.slider = new Swiper(this.swiperElement?.nativeElement, this.sliderOptions);
839
861
  let me = this;
840
- this.slider.on('slideNextTransitionEnd', function () {
862
+ this.slider.on("slideNextTransitionEnd", function () {
841
863
  me.onSlideChanged(1);
842
864
  });
843
- this.slider.on('slidePrevTransitionEnd', function () {
865
+ this.slider.on("slidePrevTransitionEnd", function () {
844
866
  me.onSlideChanged(-1);
845
867
  });
846
- if (this.dir === 'rtl') {
847
- this.slider.changeLanguageDirection('rtl');
868
+ if (this.dir === "rtl") {
869
+ this.slider.changeLanguageDirection("rtl");
848
870
  }
849
871
  const title = this.getTitle();
850
872
  this.onTitleChanged.emit(title);
851
873
  if (this.scrollToHour > 0) {
852
- const hourColumns = this.elm.nativeElement.querySelector('.weekview-normal-event-container').querySelectorAll('.calendar-hour-column');
874
+ const hourColumns = this.elm.nativeElement
875
+ .querySelector(".weekview-normal-event-container")
876
+ .querySelectorAll(".calendar-hour-column");
853
877
  const me = this;
854
878
  setTimeout(() => {
855
- me.initScrollPosition = hourColumns[me.scrollToHour - me.startHour].offsetTop;
879
+ me.initScrollPosition =
880
+ hourColumns[me.scrollToHour - me.startHour].offsetTop;
856
881
  }, 50);
857
882
  }
858
883
  }
@@ -860,26 +885,29 @@ class WeekViewComponent {
860
885
  if (!this.inited) {
861
886
  return;
862
887
  }
863
- if ((changes['startHour'] || changes['endHour']) && (!changes['startHour'].isFirstChange() || !changes['endHour'].isFirstChange())) {
888
+ if ((changes["startHour"] || changes["endHour"]) &&
889
+ (!changes["startHour"].isFirstChange() ||
890
+ !changes["endHour"].isFirstChange())) {
864
891
  this.views = [];
865
- this.hourRange = (this.endHour - this.startHour) * this.hourSegments;
892
+ this.hourRange =
893
+ (this.endHour - this.startHour) * this.hourSegments;
866
894
  this.direction = 0;
867
895
  this.refreshView();
868
896
  this.hourColumnLabels = this.getHourColumnLabels();
869
897
  }
870
- const eventSourceChange = changes['eventSource'];
871
- if (eventSourceChange && eventSourceChange.currentValue) {
898
+ const eventSourceChange = changes["eventSource"];
899
+ if (eventSourceChange?.currentValue) {
872
900
  this.onDataLoaded();
873
901
  }
874
- const lockSwipeToPrev = changes['lockSwipeToPrev'];
902
+ const lockSwipeToPrev = changes["lockSwipeToPrev"];
875
903
  if (lockSwipeToPrev) {
876
904
  this.slider.allowSlidePrev = !lockSwipeToPrev.currentValue;
877
905
  }
878
- const lockSwipeToNext = changes['lockSwipeToNext'];
906
+ const lockSwipeToNext = changes["lockSwipeToNext"];
879
907
  if (lockSwipeToPrev) {
880
908
  this.slider.allowSlideNext = !lockSwipeToNext.currentValue;
881
909
  }
882
- const lockSwipes = changes['lockSwipes'];
910
+ const lockSwipes = changes["lockSwipes"];
883
911
  if (lockSwipes) {
884
912
  this.slider.allowTouchMove = !lockSwipes.currentValue;
885
913
  }
@@ -920,7 +948,8 @@ class WeekViewComponent {
920
948
  const hourColumnLabels = [];
921
949
  for (let hour = 0, length = this.views[0].rows.length; hour < length; hour += 1) {
922
950
  // handle edge case for DST
923
- if (hour === 0 && this.views[0].rows[hour][0].time.getHours() !== this.startHour) {
951
+ if (hour === 0 &&
952
+ this.views[0].rows[hour][0].time.getHours() !== this.startHour) {
924
953
  const time = new Date(this.views[0].rows[hour][0].time);
925
954
  time.setDate(time.getDate() + 1);
926
955
  time.setHours(this.startHour);
@@ -939,7 +968,7 @@ class WeekViewComponent {
939
968
  }
940
969
  return {
941
970
  rows: WeekViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments),
942
- dates
971
+ dates,
943
972
  };
944
973
  }
945
974
  getRange(currentDate) {
@@ -952,7 +981,7 @@ class WeekViewComponent {
952
981
  const firstDayOfWeek = new Date(year, month, date - difference, 12, 0, 0), endTime = new Date(year, month, date - difference + 7, 12, 0, 0);
953
982
  return {
954
983
  startTime: firstDayOfWeek,
955
- endTime
984
+ endTime,
956
985
  };
957
986
  }
958
987
  onDataLoaded() {
@@ -982,7 +1011,9 @@ class WeekViewComponent {
982
1011
  eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate());
983
1012
  eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1);
984
1013
  }
985
- if (eventUTCEndTime <= utcStartTime || eventUTCStartTime >= utcEndTime || eventStartTime >= eventEndTime) {
1014
+ if (eventUTCEndTime <= utcStartTime ||
1015
+ eventUTCStartTime >= utcEndTime ||
1016
+ eventStartTime >= eventEndTime) {
986
1017
  continue;
987
1018
  }
988
1019
  if (event.allDay) {
@@ -1007,7 +1038,7 @@ class WeekViewComponent {
1007
1038
  endIndex: allDayEndIndex,
1008
1039
  startOffset: 0,
1009
1040
  endOffset: 0,
1010
- position: 0
1041
+ position: 0,
1011
1042
  };
1012
1043
  let eventSet = dates[allDayStartIndex].events;
1013
1044
  if (eventSet) {
@@ -1027,22 +1058,31 @@ class WeekViewComponent {
1027
1058
  timeDifferenceStart = 0;
1028
1059
  }
1029
1060
  else {
1030
- timeDifferenceStart = (eventUTCStartTime - utcStartTime) / oneHour * this.hourSegments + (eventStartTime.getHours() + eventStartTime.getMinutes() / 60) * this.hourSegments;
1061
+ timeDifferenceStart =
1062
+ ((eventUTCStartTime - utcStartTime) / oneHour) *
1063
+ this.hourSegments +
1064
+ (eventStartTime.getHours() +
1065
+ eventStartTime.getMinutes() / 60) *
1066
+ this.hourSegments;
1031
1067
  }
1032
1068
  let timeDifferenceEnd;
1033
1069
  if (eventUTCEndTime > utcEndTime) {
1034
- timeDifferenceEnd = (utcEndTime - utcStartTime) / oneHour * this.hourSegments;
1070
+ timeDifferenceEnd =
1071
+ ((utcEndTime - utcStartTime) / oneHour) *
1072
+ this.hourSegments;
1035
1073
  }
1036
1074
  else {
1037
- timeDifferenceEnd = (eventUTCEndTime - oneDay - utcStartTime) / oneHour * this.hourSegments + (eventEndTime.getHours() + eventEndTime.getMinutes() / 60) * this.hourSegments;
1075
+ timeDifferenceEnd =
1076
+ ((eventUTCEndTime - oneDay - utcStartTime) / oneHour) *
1077
+ this.hourSegments +
1078
+ (eventEndTime.getHours() +
1079
+ eventEndTime.getMinutes() / 60) *
1080
+ this.hourSegments;
1038
1081
  }
1039
1082
  const startIndex = Math.floor(timeDifferenceStart), endIndex = Math.ceil(timeDifferenceEnd - eps);
1040
1083
  let startRowIndex = startIndex % allRows, dayIndex = Math.floor(startIndex / allRows), endOfDay = dayIndex * allRows, startOffset = 0, endOffset = 0;
1041
1084
  if (this.hourParts !== 1) {
1042
- if (startRowIndex < rangeStartRowIndex) {
1043
- startOffset = 0;
1044
- }
1045
- else {
1085
+ if (startRowIndex >= rangeStartRowIndex) {
1046
1086
  startOffset = Math.floor((timeDifferenceStart - startIndex) * this.hourParts);
1047
1087
  }
1048
1088
  }
@@ -1064,7 +1104,8 @@ class WeekViewComponent {
1064
1104
  endOffset = 0;
1065
1105
  }
1066
1106
  else {
1067
- endOffset = Math.floor((endIndex - timeDifferenceEnd) * this.hourParts);
1107
+ endOffset = Math.floor((endIndex - timeDifferenceEnd) *
1108
+ this.hourParts);
1068
1109
  }
1069
1110
  }
1070
1111
  }
@@ -1085,7 +1126,7 @@ class WeekViewComponent {
1085
1126
  endIndex: endRowIndex,
1086
1127
  startOffset,
1087
1128
  endOffset,
1088
- position: 0
1129
+ position: 0,
1089
1130
  };
1090
1131
  let eventSet = rows[startRowIndex][dayIndex].events;
1091
1132
  if (eventSet) {
@@ -1144,8 +1185,8 @@ class WeekViewComponent {
1144
1185
  }
1145
1186
  this.onTimeSelected.emit({
1146
1187
  selectedTime: selectedDate.date,
1147
- events: selectedDate.events.map(e => e.event),
1148
- disabled
1188
+ events: selectedDate.events.map((e) => e.event),
1189
+ disabled,
1149
1190
  });
1150
1191
  }
1151
1192
  }
@@ -1161,29 +1202,26 @@ class WeekViewComponent {
1161
1202
  this.calendarService.rangeChanged(this);
1162
1203
  }
1163
1204
  getTitle() {
1164
- const firstDayOfWeek = new Date(this.range.startTime.getTime());
1205
+ const firstDayOfWeek = new Date(this.range.startTime);
1165
1206
  firstDayOfWeek.setHours(12, 0, 0, 0);
1166
1207
  return this.formatTitle(firstDayOfWeek);
1167
1208
  }
1168
1209
  getHighlightClass(date) {
1169
- let className = '';
1210
+ let className = " ";
1170
1211
  if (date.hasEvent) {
1171
- if (className) {
1172
- className += ' ';
1173
- }
1174
- className = 'weekview-with-event';
1212
+ className = "weekview-with-event";
1175
1213
  }
1176
1214
  if (date.selected) {
1177
1215
  if (className) {
1178
- className += ' ';
1216
+ className += " ";
1179
1217
  }
1180
- className += 'weekview-selected';
1218
+ className += "weekview-selected";
1181
1219
  }
1182
1220
  if (date.current) {
1183
1221
  if (className) {
1184
- className += ' ';
1222
+ className += " ";
1185
1223
  }
1186
- className += 'weekview-current';
1224
+ className += "weekview-current";
1187
1225
  }
1188
1226
  return className;
1189
1227
  }
@@ -1194,8 +1232,8 @@ class WeekViewComponent {
1194
1232
  }
1195
1233
  this.onTimeSelected.emit({
1196
1234
  selectedTime,
1197
- events: events.map(e => e.event),
1198
- disabled
1235
+ events: events.map((e) => e.event),
1236
+ disabled,
1199
1237
  });
1200
1238
  }
1201
1239
  placeEvents(orderedEvents) {
@@ -1207,7 +1245,9 @@ class WeekViewComponent {
1207
1245
  }
1208
1246
  overlap(event1, event2) {
1209
1247
  let earlyEvent = event1, lateEvent = event2;
1210
- if (event1.startIndex > event2.startIndex || (event1.startIndex === event2.startIndex && event1.startOffset > event2.startOffset)) {
1248
+ if (event1.startIndex > event2.startIndex ||
1249
+ (event1.startIndex === event2.startIndex &&
1250
+ event1.startOffset > event2.startOffset)) {
1211
1251
  earlyEvent = event2;
1212
1252
  lateEvent = event1;
1213
1253
  }
@@ -1215,7 +1255,8 @@ class WeekViewComponent {
1215
1255
  return false;
1216
1256
  }
1217
1257
  else {
1218
- return !(earlyEvent.endIndex - lateEvent.startIndex === 1 && earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts);
1258
+ return !(earlyEvent.endIndex - lateEvent.startIndex === 1 &&
1259
+ earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts);
1219
1260
  }
1220
1261
  }
1221
1262
  calculatePosition(events) {
@@ -1243,18 +1284,24 @@ class WeekViewComponent {
1243
1284
  events[i].position = maxColumn++;
1244
1285
  }
1245
1286
  }
1246
- if (this.dir === 'rtl') {
1287
+ if (this.dir === "rtl") {
1247
1288
  for (let i = 0; i < len; i += 1) {
1248
1289
  events[i].position = maxColumn - 1 - events[i].position;
1249
1290
  }
1250
1291
  }
1251
1292
  }
1252
1293
  updateCurrentView(currentViewStartDate, view) {
1253
- const currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), currentCalendarDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay), currentDayDifference = Math.floor((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay);
1294
+ const currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), currentCalendarDate.getDate()) -
1295
+ Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) /
1296
+ oneDay), currentDayDifference = Math.floor((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) -
1297
+ Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) /
1298
+ oneDay);
1254
1299
  for (let r = 0; r < 7; r += 1) {
1255
1300
  view.dates[r].selected = false;
1256
1301
  }
1257
- if (selectedDayDifference >= 0 && selectedDayDifference < 7 && this.autoSelect) {
1302
+ if (selectedDayDifference >= 0 &&
1303
+ selectedDayDifference < 7 &&
1304
+ this.autoSelect) {
1258
1305
  view.dates[selectedDayDifference].selected = true;
1259
1306
  }
1260
1307
  if (currentDayDifference >= 0 && currentDayDifference < 7) {
@@ -1262,7 +1309,9 @@ class WeekViewComponent {
1262
1309
  }
1263
1310
  }
1264
1311
  daySelected(viewDate) {
1265
- const selectedDate = viewDate.date, dates = this.views[this.currentViewIndex].dates, currentViewStartDate = this.range.startTime, oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay);
1312
+ const selectedDate = viewDate.date, dates = this.views[this.currentViewIndex].dates, currentViewStartDate = this.range.startTime, oneDay = 86400000, selectedDayDifference = Math.round((Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) -
1313
+ Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) /
1314
+ oneDay);
1266
1315
  this.calendarService.setCurrentDate(selectedDate);
1267
1316
  for (let r = 0; r < 7; r += 1) {
1268
1317
  dates[r].selected = false;
@@ -1274,23 +1323,27 @@ class WeekViewComponent {
1274
1323
  if (this.markDisabled) {
1275
1324
  disabled = this.markDisabled(selectedDate);
1276
1325
  }
1277
- this.onDayHeaderSelected.emit({ selectedTime: selectedDate, events: viewDate.events.map(e => e.event), disabled });
1326
+ this.onDayHeaderSelected.emit({
1327
+ selectedTime: selectedDate,
1328
+ events: viewDate.events.map((e) => e.event),
1329
+ disabled,
1330
+ });
1278
1331
  }
1279
1332
  setScrollPosition(scrollPosition) {
1280
1333
  this.initScrollPosition = scrollPosition;
1281
1334
  }
1282
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WeekViewComponent, deps: [{ token: CalendarService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1283
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: WeekViewComponent, isStandalone: false, selector: "weekview", inputs: { weekviewHeaderTemplate: "weekviewHeaderTemplate", weekviewAllDayEventTemplate: "weekviewAllDayEventTemplate", weekviewNormalEventTemplate: "weekviewNormalEventTemplate", weekviewAllDayEventSectionTemplate: "weekviewAllDayEventSectionTemplate", weekviewNormalEventSectionTemplate: "weekviewNormalEventSectionTemplate", weekviewInactiveAllDayEventSectionTemplate: "weekviewInactiveAllDayEventSectionTemplate", weekviewInactiveNormalEventSectionTemplate: "weekviewInactiveNormalEventSectionTemplate", formatWeekTitle: "formatWeekTitle", formatWeekViewDayHeader: "formatWeekViewDayHeader", formatHourColumn: "formatHourColumn", startingDayWeek: "startingDayWeek", allDayLabel: "allDayLabel", hourParts: "hourParts", eventSource: "eventSource", autoSelect: "autoSelect", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", hourSegments: "hourSegments" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onDayHeaderSelected: "onDayHeaderSelected", onTitleChanged: "onTitleChanged" }, host: { properties: { "class.weekview": "this.class" } }, viewQueries: [{ propertyName: "swiperElement", first: true, predicate: ["weekViewSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"swiper weekview-swiper\" #weekViewSwiper>\r\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\r\n <div *ngFor=\"let sliderIndex of sliderIndexList\" class=\"swiper-slide slide-container weekview-slide-container\">\r\n <table class=\"table table-bordered table-fixed weekview-header\">\r\n <thead>\r\n <tr>\r\n <th class=\"calendar-hour-column\"></th>\r\n <th class=\"weekview-header text-center\" *ngFor=\"let date of views[sliderIndex].dates\"\r\n [ngClass]=\"getHighlightClass(date)\" (click)=\"daySelected(date)\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{viewDate:date}\">\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n </table>\r\n <div *ngIf=\"sliderIndex===currentViewIndex\">\r\n <div class=\"weekview-allday-table\">\r\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\r\n <div class=\"weekview-allday-content-wrapper scroll-content\">\r\n <table class=\"table table-fixed weekview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td *ngFor=\"let day of views[sliderIndex].dates\" class=\"calendar-cell\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\"\r\n [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\r\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable\r\n (click)=\"select(tm.time, tm.events)\">\r\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </div>\r\n <div *ngIf=\"sliderIndex!==currentViewIndex\">\r\n <div class=\"weekview-allday-table\">\r\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\r\n <div class=\"weekview-allday-content-wrapper scroll-content\">\r\n <table class=\"table table-fixed weekview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td *ngFor=\"let day of views[sliderIndex].dates\" class=\"calendar-cell\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewInactiveAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{day:day}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\r\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\r\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".weekview-slide-container .table-fixed{table-layout:fixed}.weekview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.weekview-slide-container .table>thead>tr>th,.weekview-slide-container .table>tbody>tr>th,.weekview-slide-container .table>tfoot>tr>th,.weekview-slide-container .table>thead>tr>td,.weekview-slide-container .table>tbody>tr>td,.weekview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.weekview-slide-container .table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.weekview-slide-container .table>thead:first-child>tr:first-child>th,.weekview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.weekview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.weekview-slide-container .table-bordered{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>tbody>tr>th,.weekview-slide-container .table-bordered>tfoot>tr>th,.weekview-slide-container .table-bordered>thead>tr>td,.weekview-slide-container .table-bordered>tbody>tr>td,.weekview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.calendar-cell{padding:0!important;height:37px}.weekview-swiper{height:100%}.weekview-slide-container{display:block!important}.weekview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-left:1px solid #ddd}[dir=rtl] .weekview-allday-label{float:right;border-right:1px solid #ddd}.weekview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:50px}.weekview-allday-content-table{min-height:50px}.weekview-allday-content-table td{border-left:1px solid #ddd;border-right:1px solid #ddd}.weekview-header th{overflow:hidden;white-space:nowrap;font-size:14px}.weekview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.weekview-normal-event-container{margin-top:87px;overflow:hidden;inset:0;position:absolute;font-size:14px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.weekview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.weekview-allday-label{padding-top:4px}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.weekview-slide-container .table>thead>tr>th.weekview-header{padding-left:0;padding-right:0;font-size:12px}.weekview-allday-label{line-height:20px}.weekview-allday-content-wrapper{margin-left:31px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: initPositionScrollComponent, selector: "init-position-scroll", inputs: ["initPosition", "emitEvent"], outputs: ["onScroll"] }], encapsulation: i0.ViewEncapsulation.None }); }
1335
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WeekViewComponent, deps: [{ token: CalendarService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
1336
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WeekViewComponent, isStandalone: true, selector: "weekview", inputs: { weekviewHeaderTemplate: "weekviewHeaderTemplate", weekviewAllDayEventTemplate: "weekviewAllDayEventTemplate", weekviewNormalEventTemplate: "weekviewNormalEventTemplate", weekviewAllDayEventSectionTemplate: "weekviewAllDayEventSectionTemplate", weekviewNormalEventSectionTemplate: "weekviewNormalEventSectionTemplate", weekviewInactiveAllDayEventSectionTemplate: "weekviewInactiveAllDayEventSectionTemplate", weekviewInactiveNormalEventSectionTemplate: "weekviewInactiveNormalEventSectionTemplate", formatWeekTitle: "formatWeekTitle", formatWeekViewDayHeader: "formatWeekViewDayHeader", formatHourColumn: "formatHourColumn", startingDayWeek: "startingDayWeek", allDayLabel: "allDayLabel", hourParts: "hourParts", eventSource: "eventSource", autoSelect: "autoSelect", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", hourSegments: "hourSegments" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onDayHeaderSelected: "onDayHeaderSelected", onTitleChanged: "onTitleChanged" }, host: { properties: { "class.weekview": "this.class" } }, viewQueries: [{ propertyName: "swiperElement", first: true, predicate: ["weekViewSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"swiper weekview-swiper\" #weekViewSwiper>\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\n @for (sliderIndex of sliderIndexList; track sliderIndex) {\n <div class=\"swiper-slide slide-container weekview-slide-container\">\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n @for (date of views[sliderIndex].dates; track date) {\n <th\n class=\"weekview-header text-center\"\n [ngClass]=\"getHighlightClass(date)\"\n (click)=\"daySelected(date)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"weekviewHeaderTemplate\"\n [ngTemplateOutletContext]=\"{viewDate:date}\"\n >\n </ng-template>\n </th>\n }\n </tr>\n </thead>\n </table>\n @if (sliderIndex===currentViewIndex) {\n <div>\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <div class=\"weekview-allday-content-wrapper scroll-content\">\n <table\n class=\"table table-fixed weekview-allday-content-table\"\n >\n <tbody>\n <tr>\n @for (day of views[sliderIndex].dates; track\n day) {\n <td class=\"calendar-cell\">\n <ng-template\n [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <init-position-scroll\n class=\"weekview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n [emitEvent]=\"preserveScrollPosition\"\n (onScroll)=\"setScrollPosition($event)\"\n >\n <table\n class=\"table table-bordered table-fixed weekview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let\n i = $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n @for (tm of row; track tm) {\n <td\n class=\"calendar-cell\"\n tappable\n (click)=\"select(tm.time, tm.events)\"\n >\n @if (tm.events) {\n <div\n [ngClass]=\"{'calendar-event-wrap': tm.events}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\"\n >\n </ng-template>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n } @if (sliderIndex!==currentViewIndex) {\n <div>\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <div class=\"weekview-allday-content-wrapper scroll-content\">\n <table\n class=\"table table-fixed weekview-allday-content-table\"\n >\n <tbody>\n <tr>\n @for (day of views[sliderIndex].dates; track\n day) {\n <td class=\"calendar-cell\">\n <ng-template\n [ngTemplateOutlet]=\"weekviewInactiveAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <init-position-scroll\n class=\"weekview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n >\n <table\n class=\"table table-bordered table-fixed weekview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let\n i = $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n @for (tm of row; track tm) {\n <td class=\"calendar-cell\">\n @if (tm.events) {\n <div\n [ngClass]=\"{'calendar-event-wrap': tm.events}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"weekviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\"\n >\n </ng-template>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".weekview-slide-container .table-fixed{table-layout:fixed}.weekview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.weekview-slide-container .table>thead>tr>th,.weekview-slide-container .table>tbody>tr>th,.weekview-slide-container .table>tfoot>tr>th,.weekview-slide-container .table>thead>tr>td,.weekview-slide-container .table>tbody>tr>td,.weekview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.weekview-slide-container .table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.weekview-slide-container .table>thead:first-child>tr:first-child>th,.weekview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.weekview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.weekview-slide-container .table-bordered{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>tbody>tr>th,.weekview-slide-container .table-bordered>tfoot>tr>th,.weekview-slide-container .table-bordered>thead>tr>td,.weekview-slide-container .table-bordered>tbody>tr>td,.weekview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.calendar-cell{padding:0!important;height:37px}.weekview-swiper{height:100%}.weekview-slide-container{display:block!important}.weekview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-left:1px solid #ddd}[dir=rtl] .weekview-allday-label{float:right;border-right:1px solid #ddd}.weekview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:50px}.weekview-allday-content-table{min-height:50px}.weekview-allday-content-table td{border-left:1px solid #ddd;border-right:1px solid #ddd}.weekview-header th{overflow:hidden;white-space:nowrap;font-size:14px}.weekview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.weekview-normal-event-container{margin-top:87px;overflow:hidden;inset:0;position:absolute;font-size:14px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.weekview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.weekview-slide-container .table>thead>tr>th.weekview-header{padding-left:0;padding-right:0;font-size:12px}.weekview-allday-label{line-height:20px;padding-top:4px}.weekview-allday-content-wrapper{margin-left:31px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: initPositionScrollComponent, selector: "init-position-scroll", inputs: ["initPosition", "emitEvent"], outputs: ["onScroll"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1284
1337
  }
1285
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WeekViewComponent, decorators: [{
1338
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WeekViewComponent, decorators: [{
1286
1339
  type: Component,
1287
- args: [{ selector: 'weekview', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"swiper weekview-swiper\" #weekViewSwiper>\r\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\r\n <div *ngFor=\"let sliderIndex of sliderIndexList\" class=\"swiper-slide slide-container weekview-slide-container\">\r\n <table class=\"table table-bordered table-fixed weekview-header\">\r\n <thead>\r\n <tr>\r\n <th class=\"calendar-hour-column\"></th>\r\n <th class=\"weekview-header text-center\" *ngFor=\"let date of views[sliderIndex].dates\"\r\n [ngClass]=\"getHighlightClass(date)\" (click)=\"daySelected(date)\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{viewDate:date}\">\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n </table>\r\n <div *ngIf=\"sliderIndex===currentViewIndex\">\r\n <div class=\"weekview-allday-table\">\r\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\r\n <div class=\"weekview-allday-content-wrapper scroll-content\">\r\n <table class=\"table table-fixed weekview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td *ngFor=\"let day of views[sliderIndex].dates\" class=\"calendar-cell\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\"\r\n [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\r\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable\r\n (click)=\"select(tm.time, tm.events)\">\r\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </div>\r\n <div *ngIf=\"sliderIndex!==currentViewIndex\">\r\n <div class=\"weekview-allday-table\">\r\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\r\n <div class=\"weekview-allday-content-wrapper scroll-content\">\r\n <table class=\"table table-fixed weekview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td *ngFor=\"let day of views[sliderIndex].dates\" class=\"calendar-cell\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewInactiveAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{day:day}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\r\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\r\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\r\n <ng-template [ngTemplateOutlet]=\"weekviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".weekview-slide-container .table-fixed{table-layout:fixed}.weekview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.weekview-slide-container .table>thead>tr>th,.weekview-slide-container .table>tbody>tr>th,.weekview-slide-container .table>tfoot>tr>th,.weekview-slide-container .table>thead>tr>td,.weekview-slide-container .table>tbody>tr>td,.weekview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.weekview-slide-container .table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.weekview-slide-container .table>thead:first-child>tr:first-child>th,.weekview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.weekview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.weekview-slide-container .table-bordered{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>tbody>tr>th,.weekview-slide-container .table-bordered>tfoot>tr>th,.weekview-slide-container .table-bordered>thead>tr>td,.weekview-slide-container .table-bordered>tbody>tr>td,.weekview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.calendar-cell{padding:0!important;height:37px}.weekview-swiper{height:100%}.weekview-slide-container{display:block!important}.weekview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-left:1px solid #ddd}[dir=rtl] .weekview-allday-label{float:right;border-right:1px solid #ddd}.weekview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:50px}.weekview-allday-content-table{min-height:50px}.weekview-allday-content-table td{border-left:1px solid #ddd;border-right:1px solid #ddd}.weekview-header th{overflow:hidden;white-space:nowrap;font-size:14px}.weekview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.weekview-normal-event-container{margin-top:87px;overflow:hidden;inset:0;position:absolute;font-size:14px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.weekview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.weekview-allday-label{padding-top:4px}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.weekview-slide-container .table>thead>tr>th.weekview-header{padding-left:0;padding-right:0;font-size:12px}.weekview-allday-label{line-height:20px}.weekview-allday-content-wrapper{margin-left:31px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"] }]
1288
- }], ctorParameters: () => [{ type: CalendarService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { swiperElement: [{
1340
+ args: [{ selector: "weekview", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, NgTemplateOutlet, initPositionScrollComponent], template: "<div class=\"swiper weekview-swiper\" #weekViewSwiper>\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\n @for (sliderIndex of sliderIndexList; track sliderIndex) {\n <div class=\"swiper-slide slide-container weekview-slide-container\">\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n @for (date of views[sliderIndex].dates; track date) {\n <th\n class=\"weekview-header text-center\"\n [ngClass]=\"getHighlightClass(date)\"\n (click)=\"daySelected(date)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"weekviewHeaderTemplate\"\n [ngTemplateOutletContext]=\"{viewDate:date}\"\n >\n </ng-template>\n </th>\n }\n </tr>\n </thead>\n </table>\n @if (sliderIndex===currentViewIndex) {\n <div>\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <div class=\"weekview-allday-content-wrapper scroll-content\">\n <table\n class=\"table table-fixed weekview-allday-content-table\"\n >\n <tbody>\n <tr>\n @for (day of views[sliderIndex].dates; track\n day) {\n <td class=\"calendar-cell\">\n <ng-template\n [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <init-position-scroll\n class=\"weekview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n [emitEvent]=\"preserveScrollPosition\"\n (onScroll)=\"setScrollPosition($event)\"\n >\n <table\n class=\"table table-bordered table-fixed weekview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let\n i = $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n @for (tm of row; track tm) {\n <td\n class=\"calendar-cell\"\n tappable\n (click)=\"select(tm.time, tm.events)\"\n >\n @if (tm.events) {\n <div\n [ngClass]=\"{'calendar-event-wrap': tm.events}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\"\n >\n </ng-template>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n } @if (sliderIndex!==currentViewIndex) {\n <div>\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <div class=\"weekview-allday-content-wrapper scroll-content\">\n <table\n class=\"table table-fixed weekview-allday-content-table\"\n >\n <tbody>\n <tr>\n @for (day of views[sliderIndex].dates; track\n day) {\n <td class=\"calendar-cell\">\n <ng-template\n [ngTemplateOutlet]=\"weekviewInactiveAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <init-position-scroll\n class=\"weekview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n >\n <table\n class=\"table table-bordered table-fixed weekview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let\n i = $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n @for (tm of row; track tm) {\n <td class=\"calendar-cell\">\n @if (tm.events) {\n <div\n [ngClass]=\"{'calendar-event-wrap': tm.events}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"weekviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\"\n >\n </ng-template>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".weekview-slide-container .table-fixed{table-layout:fixed}.weekview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.weekview-slide-container .table>thead>tr>th,.weekview-slide-container .table>tbody>tr>th,.weekview-slide-container .table>tfoot>tr>th,.weekview-slide-container .table>thead>tr>td,.weekview-slide-container .table>tbody>tr>td,.weekview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.weekview-slide-container .table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.weekview-slide-container .table>thead:first-child>tr:first-child>th,.weekview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.weekview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.weekview-slide-container .table-bordered{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>tbody>tr>th,.weekview-slide-container .table-bordered>tfoot>tr>th,.weekview-slide-container .table-bordered>thead>tr>td,.weekview-slide-container .table-bordered>tbody>tr>td,.weekview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.weekview-slide-container .table-bordered>thead>tr>th,.weekview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.weekview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.calendar-cell{padding:0!important;height:37px}.weekview-swiper{height:100%}.weekview-slide-container{display:block!important}.weekview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-left:1px solid #ddd}[dir=rtl] .weekview-allday-label{float:right;border-right:1px solid #ddd}.weekview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:50px}.weekview-allday-content-table{min-height:50px}.weekview-allday-content-table td{border-left:1px solid #ddd;border-right:1px solid #ddd}.weekview-header th{overflow:hidden;white-space:nowrap;font-size:14px}.weekview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.weekview-normal-event-container{margin-top:87px;overflow:hidden;inset:0;position:absolute;font-size:14px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.weekview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.weekview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.weekview-slide-container .table>thead>tr>th.weekview-header{padding-left:0;padding-right:0;font-size:12px}.weekview-allday-label{line-height:20px;padding-top:4px}.weekview-allday-content-wrapper{margin-left:31px}[dir=rtl] .weekview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"] }]
1341
+ }], ctorParameters: () => [{ type: CalendarService }, { type: i0.ElementRef }], propDecorators: { swiperElement: [{
1289
1342
  type: ViewChild,
1290
- args: ['weekViewSwiper']
1343
+ args: ["weekViewSwiper"]
1291
1344
  }], class: [{
1292
1345
  type: HostBinding,
1293
- args: ['class.weekview']
1346
+ args: ["class.weekview"]
1294
1347
  }], weekviewHeaderTemplate: [{
1295
1348
  type: Input
1296
1349
  }], weekviewAllDayEventTemplate: [{
@@ -1360,12 +1413,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
1360
1413
  }] } });
1361
1414
 
1362
1415
  class DayViewComponent {
1363
- constructor(calendarService, elm, zone) {
1416
+ constructor(calendarService, elm) {
1364
1417
  this.calendarService = calendarService;
1365
1418
  this.elm = elm;
1366
- this.zone = zone;
1367
1419
  this.class = true;
1368
- this.dir = '';
1420
+ this.dir = "";
1369
1421
  this.scrollToHour = 0;
1370
1422
  this.lockSwipeToPrev = false;
1371
1423
  this.lockSwipeToNext = false;
@@ -1378,9 +1430,8 @@ class DayViewComponent {
1378
1430
  this.views = [];
1379
1431
  this.currentViewIndex = 0;
1380
1432
  this.direction = 0;
1381
- this.mode = 'day';
1433
+ this.mode = "day";
1382
1434
  this.inited = false;
1383
- this.callbackOnInit = true;
1384
1435
  }
1385
1436
  static createDateObjects(startTime, startHour, endHour, timeInterval) {
1386
1437
  const rows = [], currentHour = 0, currentDate = startTime.getDate();
@@ -1395,13 +1446,13 @@ class DayViewComponent {
1395
1446
  }
1396
1447
  for (let hour = startHour; hour < endHour; hour += hourStep) {
1397
1448
  for (let interval = 0; interval < 60; interval += minStep) {
1398
- time = new Date(startTime.getTime());
1449
+ time = new Date(startTime);
1399
1450
  time.setHours(currentHour + hour, interval);
1400
1451
  time.setDate(currentDate);
1401
1452
  rows.push({
1402
1453
  time,
1403
1454
  events: [],
1404
- eventsGroupByCategory: new Map()
1455
+ eventsGroupByCategory: new Map(),
1405
1456
  });
1406
1457
  }
1407
1458
  }
@@ -1419,7 +1470,7 @@ class DayViewComponent {
1419
1470
  for (let i = 0; i < totalSize; i += 1) {
1420
1471
  cells[i] = {
1421
1472
  calculated: false,
1422
- events: []
1473
+ events: [],
1423
1474
  };
1424
1475
  }
1425
1476
  const len = orderedEvents.length;
@@ -1440,7 +1491,8 @@ class DayViewComponent {
1440
1491
  const eventQueue = [event];
1441
1492
  while ((event = eventQueue.shift())) {
1442
1493
  let index = event.startIndex * hourParts + event.startOffset;
1443
- while (index < event.endIndex * hourParts - event.endOffset) {
1494
+ while (index <
1495
+ event.endIndex * hourParts - event.endOffset) {
1444
1496
  if (!cells[index].calculated) {
1445
1497
  cells[index].calculated = true;
1446
1498
  if (cells[index].events) {
@@ -1448,7 +1500,8 @@ class DayViewComponent {
1448
1500
  for (let j = 0; j < eventCountInCell; j += 1) {
1449
1501
  const currentEventInCell = cells[index].events[j];
1450
1502
  if (!currentEventInCell.overlapNumber) {
1451
- currentEventInCell.overlapNumber = overlapNumber;
1503
+ currentEventInCell.overlapNumber =
1504
+ overlapNumber;
1452
1505
  eventQueue.push(currentEventInCell);
1453
1506
  }
1454
1507
  }
@@ -1462,74 +1515,78 @@ class DayViewComponent {
1462
1515
  }
1463
1516
  }
1464
1517
  ngOnInit() {
1465
- if (!this.sliderOptions) {
1466
- this.sliderOptions = {};
1467
- }
1518
+ this.sliderOptions ??= {};
1468
1519
  this.sliderOptions.loop = true;
1469
1520
  this.sliderOptions.allowSlidePrev = !this.lockSwipeToPrev;
1470
1521
  this.sliderOptions.allowSlideNext = !this.lockSwipeToNext;
1471
1522
  this.sliderOptions.allowTouchMove = !this.lockSwipes;
1472
1523
  this.hourRange = (this.endHour - this.startHour) * this.hourSegments;
1473
- if (this.dateFormatter && this.dateFormatter.formatDayViewTitle) {
1524
+ if (this.dateFormatter?.formatDayViewTitle) {
1474
1525
  this.formatTitle = this.dateFormatter.formatDayViewTitle;
1475
1526
  }
1476
1527
  else {
1477
1528
  const datePipe = new DatePipe(this.locale);
1478
1529
  this.formatTitle = function (date) {
1479
- return datePipe.transform(date, this.formatDayTitle) || '';
1530
+ return datePipe.transform(date, this.formatDayTitle) || "";
1480
1531
  };
1481
1532
  }
1482
- if (this.dateFormatter && this.dateFormatter.formatDayViewHourColumn) {
1483
- this.formatHourColumnLabel = this.dateFormatter.formatDayViewHourColumn;
1533
+ if (this.dateFormatter?.formatDayViewHourColumn) {
1534
+ this.formatHourColumnLabel =
1535
+ this.dateFormatter.formatDayViewHourColumn;
1484
1536
  }
1485
1537
  else {
1486
1538
  const datePipe = new DatePipe(this.locale);
1487
1539
  this.formatHourColumnLabel = function (date) {
1488
- return datePipe.transform(date, this.formatHourColumn) || '';
1540
+ return datePipe.transform(date, this.formatHourColumn) || "";
1489
1541
  };
1490
1542
  }
1491
1543
  this.refreshView();
1492
1544
  this.hourColumnLabels = this.getHourColumnLabels();
1493
1545
  this.inited = true;
1494
- this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => {
1495
- this.refreshView();
1496
- });
1497
- this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => {
1498
- this.onDataLoaded();
1499
- });
1500
- this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => {
1501
- if (direction === 1) {
1502
- this.slider.slideNext();
1503
- }
1504
- else if (direction === -1) {
1505
- this.slider.slidePrev();
1506
- }
1507
- });
1508
- this.slideUpdatedSubscription = this.calendarService.slideUpdated$.subscribe(() => {
1509
- this.slider.update();
1510
- });
1546
+ this.currentDateChangedFromParentSubscription =
1547
+ this.calendarService.currentDateChangedFromParent$.subscribe(() => {
1548
+ this.refreshView();
1549
+ });
1550
+ this.eventSourceChangedSubscription =
1551
+ this.calendarService.eventSourceChanged$.subscribe(() => {
1552
+ this.onDataLoaded();
1553
+ });
1554
+ this.slideChangedSubscription =
1555
+ this.calendarService.slideChanged$.subscribe((direction) => {
1556
+ if (direction === 1) {
1557
+ this.slider.slideNext();
1558
+ }
1559
+ else if (direction === -1) {
1560
+ this.slider.slidePrev();
1561
+ }
1562
+ });
1563
+ this.slideUpdatedSubscription =
1564
+ this.calendarService.slideUpdated$.subscribe(() => {
1565
+ this.slider.update();
1566
+ });
1511
1567
  }
1512
1568
  ngAfterViewInit() {
1513
1569
  this.slider = new Swiper(this.swiperElement?.nativeElement, this.sliderOptions);
1514
1570
  let me = this;
1515
- this.slider.on('slideNextTransitionEnd', function () {
1571
+ this.slider.on("slideNextTransitionEnd", function () {
1516
1572
  me.onSlideChanged(1);
1517
1573
  });
1518
- this.slider.on('slidePrevTransitionEnd', function () {
1574
+ this.slider.on("slidePrevTransitionEnd", function () {
1519
1575
  me.onSlideChanged(-1);
1520
1576
  });
1521
- if (this.dir === 'rtl') {
1522
- this.slider.changeLanguageDirection('rtl');
1577
+ if (this.dir === "rtl") {
1578
+ this.slider.changeLanguageDirection("rtl");
1523
1579
  }
1524
1580
  const title = this.getTitle();
1525
1581
  this.onTitleChanged.emit(title);
1526
1582
  if (this.scrollToHour > 0) {
1527
1583
  const hourColumns = this.elm.nativeElement
1528
- .querySelector('.dayview-normal-event-container')
1529
- .querySelectorAll('.calendar-hour-column');
1584
+ .querySelector(".dayview-normal-event-container")
1585
+ .querySelectorAll(".calendar-hour-column");
1530
1586
  const me = this;
1531
1587
  setTimeout(() => {
1532
- me.initScrollPosition = hourColumns[me.scrollToHour - me.startHour].offsetTop;
1588
+ me.initScrollPosition =
1589
+ hourColumns[me.scrollToHour - me.startHour].offsetTop;
1533
1590
  }, 50);
1534
1591
  }
1535
1592
  }
@@ -1537,27 +1594,29 @@ class DayViewComponent {
1537
1594
  if (!this.inited) {
1538
1595
  return;
1539
1596
  }
1540
- if ((changes['startHour'] || changes['endHour']) &&
1541
- (!changes['startHour'].isFirstChange() || !changes['endHour'].isFirstChange())) {
1597
+ if ((changes["startHour"] || changes["endHour"]) &&
1598
+ (!changes["startHour"].isFirstChange() ||
1599
+ !changes["endHour"].isFirstChange())) {
1542
1600
  this.views = [];
1543
- this.hourRange = (this.endHour - this.startHour) * this.hourSegments;
1601
+ this.hourRange =
1602
+ (this.endHour - this.startHour) * this.hourSegments;
1544
1603
  this.direction = 0;
1545
1604
  this.refreshView();
1546
1605
  this.hourColumnLabels = this.getHourColumnLabels();
1547
1606
  }
1548
- const eventSourceChange = changes['eventSource'];
1549
- if (eventSourceChange && eventSourceChange.currentValue) {
1607
+ const eventSourceChange = changes["eventSource"];
1608
+ if (eventSourceChange?.currentValue) {
1550
1609
  this.onDataLoaded();
1551
1610
  }
1552
- const lockSwipeToPrev = changes['lockSwipeToPrev'];
1611
+ const lockSwipeToPrev = changes["lockSwipeToPrev"];
1553
1612
  if (lockSwipeToPrev) {
1554
1613
  this.slider.allowSlidePrev = !lockSwipeToPrev.currentValue;
1555
1614
  }
1556
- const lockSwipeToNext = changes['lockSwipeToNext'];
1615
+ const lockSwipeToNext = changes["lockSwipeToNext"];
1557
1616
  if (lockSwipeToPrev) {
1558
1617
  this.slider.allowSlideNext = !lockSwipeToNext.currentValue;
1559
1618
  }
1560
- const lockSwipes = changes['lockSwipes'];
1619
+ const lockSwipes = changes["lockSwipes"];
1561
1620
  if (lockSwipes) {
1562
1621
  this.slider.allowTouchMove = !lockSwipes.currentValue;
1563
1622
  }
@@ -1598,7 +1657,8 @@ class DayViewComponent {
1598
1657
  const hourColumnLabels = [];
1599
1658
  for (let hour = 0, length = this.views[0].rows.length; hour < length; hour += 1) {
1600
1659
  // handle edge case for DST
1601
- if (hour === 0 && this.views[0].rows[hour].time.getHours() !== this.startHour) {
1660
+ if (hour === 0 &&
1661
+ this.views[0].rows[hour].time.getHours() !== this.startHour) {
1602
1662
  const time = new Date(this.views[0].rows[hour].time);
1603
1663
  time.setDate(time.getDate() + 1);
1604
1664
  time.setHours(this.startHour);
@@ -1614,14 +1674,14 @@ class DayViewComponent {
1614
1674
  return {
1615
1675
  rows: DayViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments),
1616
1676
  allDayEvents: [],
1617
- categorizedAllDayEventsMap: new Map()
1677
+ categorizedAllDayEventsMap: new Map(),
1618
1678
  };
1619
1679
  }
1620
1680
  getRange(currentDate) {
1621
1681
  const year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), startTime = new Date(year, month, date, 12, 0, 0), endTime = new Date(year, month, date + 1, 12, 0, 0);
1622
1682
  return {
1623
1683
  startTime,
1624
- endTime
1684
+ endTime,
1625
1685
  };
1626
1686
  }
1627
1687
  onDataLoaded() {
@@ -1644,12 +1704,14 @@ class DayViewComponent {
1644
1704
  eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate());
1645
1705
  eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1);
1646
1706
  }
1647
- if (eventUTCEndTime <= utcStartTime || eventUTCStartTime >= utcEndTime || eventStartTime >= eventEndTime) {
1707
+ if (eventUTCEndTime <= utcStartTime ||
1708
+ eventUTCStartTime >= utcEndTime ||
1709
+ eventStartTime >= eventEndTime) {
1648
1710
  continue;
1649
1711
  }
1650
1712
  if (event.allDay) {
1651
1713
  allDayEvents.push({
1652
- event
1714
+ event,
1653
1715
  });
1654
1716
  }
1655
1717
  else {
@@ -1660,30 +1722,31 @@ class DayViewComponent {
1660
1722
  }
1661
1723
  else {
1662
1724
  timeDifferenceStart =
1663
- (eventStartTime.getHours() + eventStartTime.getMinutes() / 60) * this.hourSegments;
1725
+ (eventStartTime.getHours() +
1726
+ eventStartTime.getMinutes() / 60) *
1727
+ this.hourSegments;
1664
1728
  }
1665
1729
  let timeDifferenceEnd;
1666
1730
  if (eventUTCEndTime > utcEndTime) {
1667
- timeDifferenceEnd = ((utcEndTime - utcStartTime) / oneHour) * this.hourSegments;
1731
+ timeDifferenceEnd =
1732
+ ((utcEndTime - utcStartTime) / oneHour) *
1733
+ this.hourSegments;
1668
1734
  }
1669
1735
  else {
1670
- timeDifferenceEnd = (eventEndTime.getHours() + eventEndTime.getMinutes() / 60) * this.hourSegments;
1736
+ timeDifferenceEnd =
1737
+ (eventEndTime.getHours() +
1738
+ eventEndTime.getMinutes() / 60) *
1739
+ this.hourSegments;
1671
1740
  }
1672
1741
  let startIndex = Math.floor(timeDifferenceStart);
1673
1742
  let endIndex = Math.ceil(timeDifferenceEnd - eps);
1674
1743
  let startOffset = 0;
1675
1744
  let endOffset = 0;
1676
1745
  if (this.hourParts !== 1) {
1677
- if (startIndex < rangeStartRowIndex) {
1678
- startOffset = 0;
1679
- }
1680
- else {
1746
+ if (startIndex >= rangeStartRowIndex) {
1681
1747
  startOffset = Math.floor((timeDifferenceStart - startIndex) * this.hourParts);
1682
1748
  }
1683
- if (endIndex > rangeEndRowIndex) {
1684
- endOffset = 0;
1685
- }
1686
- else {
1749
+ if (endIndex <= rangeEndRowIndex) {
1687
1750
  endOffset = Math.floor((endIndex - timeDifferenceEnd) * this.hourParts);
1688
1751
  }
1689
1752
  }
@@ -1704,7 +1767,7 @@ class DayViewComponent {
1704
1767
  endIndex,
1705
1768
  startOffset,
1706
1769
  endOffset,
1707
- position: 0
1770
+ position: 0,
1708
1771
  };
1709
1772
  let eventSet = rows[startIndex].events;
1710
1773
  if (eventSet) {
@@ -1716,20 +1779,27 @@ class DayViewComponent {
1716
1779
  rows[startIndex].events = eventSet;
1717
1780
  }
1718
1781
  // setup eventsGroupedByCategory
1719
- if (this.dayviewShowCategoryView && this.dayviewCategorySource && event.category) {
1782
+ if (this.dayviewShowCategoryView &&
1783
+ this.dayviewCategorySource &&
1784
+ event.category) {
1720
1785
  let groupedEvents = rows[startIndex].eventsGroupByCategory;
1721
1786
  if (groupedEvents) {
1722
1787
  if (Array.isArray(groupedEvents.get(event.category))) {
1723
- groupedEvents.get(event.category)?.push(displayEvent);
1788
+ groupedEvents
1789
+ .get(event.category)
1790
+ ?.push(displayEvent);
1724
1791
  }
1725
1792
  else {
1726
- groupedEvents.set(event.category, [displayEvent]);
1793
+ groupedEvents.set(event.category, [
1794
+ displayEvent,
1795
+ ]);
1727
1796
  }
1728
1797
  }
1729
1798
  else {
1730
1799
  groupedEvents = new Map();
1731
1800
  groupedEvents.set(event.category, [displayEvent]);
1732
- rows[startIndex].eventsGroupByCategory = groupedEvents;
1801
+ rows[startIndex].eventsGroupByCategory =
1802
+ groupedEvents;
1733
1803
  }
1734
1804
  }
1735
1805
  }
@@ -1773,7 +1843,9 @@ class DayViewComponent {
1773
1843
  for (const displayAllDayEvent of allDayEvents) {
1774
1844
  if (displayAllDayEvent.event.category) {
1775
1845
  if (categoryIdAllDayEventsMap.get(displayAllDayEvent.event.category)) {
1776
- categoryIdAllDayEventsMap.get(displayAllDayEvent.event.category)?.push(displayAllDayEvent);
1846
+ categoryIdAllDayEventsMap
1847
+ .get(displayAllDayEvent.event.category)
1848
+ ?.push(displayAllDayEvent);
1777
1849
  }
1778
1850
  else {
1779
1851
  categoryIdAllDayEventsMap.set(displayAllDayEvent.event.category, [displayAllDayEvent]);
@@ -1791,7 +1863,7 @@ class DayViewComponent {
1791
1863
  this.calendarService.rangeChanged(this);
1792
1864
  }
1793
1865
  getTitle() {
1794
- const startingDate = new Date(this.range.startTime.getTime());
1866
+ const startingDate = new Date(this.range.startTime);
1795
1867
  startingDate.setHours(12, 0, 0, 0);
1796
1868
  return this.formatTitle(startingDate);
1797
1869
  }
@@ -1808,21 +1880,19 @@ class DayViewComponent {
1808
1880
  this.onTimeSelected.emit({
1809
1881
  selectedTime,
1810
1882
  category,
1811
- events: events.map(e => e.event),
1812
- disabled
1883
+ events: events.map((e) => e.event),
1884
+ disabled,
1813
1885
  });
1814
1886
  }
1815
1887
  placeEvents(orderedEvents) {
1816
1888
  this.calculatePosition(orderedEvents);
1817
1889
  DayViewComponent.calculateWidth(orderedEvents, this.hourRange, this.hourParts);
1818
1890
  }
1819
- placeAllDayEvents(orderedEvents) {
1820
- this.calculatePosition(orderedEvents);
1821
- }
1822
1891
  overlap(event1, event2) {
1823
1892
  let earlyEvent = event1, lateEvent = event2;
1824
1893
  if (event1.startIndex > event2.startIndex ||
1825
- (event1.startIndex === event2.startIndex && event1.startOffset > event2.startOffset)) {
1894
+ (event1.startIndex === event2.startIndex &&
1895
+ event1.startOffset > event2.startOffset)) {
1826
1896
  earlyEvent = event2;
1827
1897
  lateEvent = event1;
1828
1898
  }
@@ -1858,30 +1928,27 @@ class DayViewComponent {
1858
1928
  events[i].position = maxColumn++;
1859
1929
  }
1860
1930
  }
1861
- if (this.dir === 'rtl') {
1931
+ if (this.dir === "rtl") {
1862
1932
  for (let i = 0; i < len; i += 1) {
1863
1933
  events[i].position = maxColumn - 1 - events[i].position;
1864
1934
  }
1865
1935
  }
1866
1936
  }
1867
- eventSelected(event) {
1868
- this.onEventSelected.emit(event);
1869
- }
1870
1937
  setScrollPosition(scrollPosition) {
1871
1938
  this.initScrollPosition = scrollPosition;
1872
1939
  }
1873
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DayViewComponent, deps: [{ token: CalendarService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1874
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: DayViewComponent, isStandalone: false, selector: "dayview", inputs: { dayviewCategoryItemTemplate: "dayviewCategoryItemTemplate", dayviewAllDayEventTemplate: "dayviewAllDayEventTemplate", dayviewNormalEventTemplate: "dayviewNormalEventTemplate", dayviewAllDayEventSectionTemplate: "dayviewAllDayEventSectionTemplate", dayviewNormalEventSectionTemplate: "dayviewNormalEventSectionTemplate", dayviewInactiveAllDayEventSectionTemplate: "dayviewInactiveAllDayEventSectionTemplate", dayviewInactiveNormalEventSectionTemplate: "dayviewInactiveNormalEventSectionTemplate", formatHourColumn: "formatHourColumn", formatDayTitle: "formatDayTitle", allDayLabel: "allDayLabel", hourParts: "hourParts", eventSource: "eventSource", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", hourSegments: "hourSegments", dayviewCategorySource: "dayviewCategorySource", dayviewShowCategoryView: "dayviewShowCategoryView" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, host: { properties: { "class.dayview": "this.class" } }, viewQueries: [{ propertyName: "swiperElement", first: true, predicate: ["dayViewSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"swiper dayview-swiper\" #dayViewSwiper>\r\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\r\n <div *ngFor=\"let sliderIndex of sliderIndexList\" class=\"swiper-slide slide-container dayview-slide-container\">\r\n <ng-container *ngIf=\"!dayviewShowCategoryView\">\r\n <div class=\"dayview-allday-table\">\r\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\r\n <div class=\"dayview-allday-content-wrapper scroll-content\">\r\n <table class=\"table table-bordered dayview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td *ngIf=\"sliderIndex===currentViewIndex\" class=\"calendar-cell\"\r\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\r\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n <td *ngIf=\"sliderIndex!==currentViewIndex\" class=\"calendar-cell\"\r\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\r\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll *ngIf=\"sliderIndex===currentViewIndex\" class=\"dayview-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\"\r\n (onScroll)=\"setScrollPosition($event)\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let tm of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td class=\"calendar-cell\" tappable (click)=\"select(tm)\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n <init-position-scroll *ngIf=\"sliderIndex!==currentViewIndex\" class=\"dayview-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let tm of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td class=\"calendar-cell\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"dayviewShowCategoryView\">\r\n <div class=\"dayview-category-header\">\r\n <table class=\"table table-fixed table-bordered dayview-category-header-table\">\r\n <thead>\r\n <tr>\r\n <th class=\"dayview-category-header-item calendar-hour-column\"></th>\r\n <th *ngFor=\"let category of dayviewCategorySource\" class=\"dayview-category-header-item\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewCategoryItemTemplate\" [ngTemplateOutletContext]=\"{category}\">\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n\r\n <div class=\"dayview-allday-table\">\r\n <div class=\"dayview-allday-label\">{{ allDayLabel }}</div>\r\n <div class=\"dayview-allday-content-wrapper dayview-allday-category-wrapper scroll-content\">\r\n <table class=\"table table-fixed table-bordered dayview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td class=\"calendar-cell\" *ngFor=\"let category of dayviewCategorySource\">\r\n <div class=\"calendar-event-wrap\">\r\n <ng-template *ngIf=\"sliderIndex === currentViewIndex\"\r\n [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n <ng-template *ngIf=\"sliderIndex !== currentViewIndex \"\r\n [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll *ngIf=\"sliderIndex === currentViewIndex\"\r\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\"\r\n (onScroll)=\"setScrollPosition($event)\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{ hourColumnLabels[i] }}\r\n </td>\r\n <td *ngIf=\"dayviewCategorySource?.size === 0\" class=\"calendar-cell\" (click)=\"select(row)\" tappable>\r\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n <td *ngFor=\"let category of dayviewCategorySource\" class=\"calendar-cell\" (click)=\"select(row, category)\"\r\n tappable>\r\n <ng-template\r\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: row.eventsGroupByCategory?.get(category)!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n\r\n <init-position-scroll *ngIf=\"sliderIndex !== currentViewIndex\"\r\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{ hourColumnLabels[i] }}\r\n </td>\r\n <td *ngIf=\"dayviewCategorySource?.size === 0\" class=\"calendar-cell\" (click)=\"select(row)\" tappable>\r\n <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n <td *ngFor=\"let category of dayviewCategorySource\" class=\"calendar-cell\" (click)=\"select(row, category)\"\r\n tappable>\r\n <ng-template\r\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: row.eventsGroupByCategory?.get(category)!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".dayview-slide-container .table-fixed{table-layout:fixed}.dayview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.dayview-slide-container .table>thead>tr>th,.dayview-slide-container .table>tbody>tr>th,.dayview-slide-container .table>tfoot>tr>th,.dayview-slide-container .table>thead>tr>td,.dayview-slide-container .table>tbody>tr>td,.dayview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.dayview-slide-container .table>thead>tr>th{vertical-align:bottom}.dayview-slide-container .table>thead:first-child>tr:first-child>th,.dayview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.dayview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.dayview-slide-container .table-bordered{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>tbody>tr>th,.dayview-slide-container .table-bordered>tfoot>tr>th,.dayview-slide-container .table-bordered>thead>tr>td,.dayview-slide-container .table-bordered>tbody>tr>td,.dayview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.dayview-swiper{height:100%}.calendar-cell{padding:0!important;height:37px}.dayview-slide-container{display:block!important}.dayview-category-header{position:relative;font-size:14px}.dayview-category-header-item{font-weight:400;height:37px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dayview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-top:1px solid #ddd;border-left:1px solid #ddd}[dir=rtl] .dayview-allday-label{border-left:none;border-right:1px solid #ddd;float:right}.dayview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:50px}.dayview-allday-category-wrapper{height:50px;margin-top:-1px}.dayview-allday-content-table{min-height:50px}.dayview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.dayview-normal-event-container{margin-top:50px;overflow:hidden;inset:0;position:absolute;font-size:14px}.dayview-categorized-normal-event-container{margin-top:87px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.dayview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.dayview-allday-label{padding-top:4px}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.dayview-allday-label{line-height:20px}.dayview-allday-content-wrapper{margin-left:31px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: initPositionScrollComponent, selector: "init-position-scroll", inputs: ["initPosition", "emitEvent"], outputs: ["onScroll"] }], encapsulation: i0.ViewEncapsulation.None }); }
1940
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DayViewComponent, deps: [{ token: CalendarService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
1941
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DayViewComponent, isStandalone: true, selector: "dayview", inputs: { dayviewCategoryItemTemplate: "dayviewCategoryItemTemplate", dayviewAllDayEventTemplate: "dayviewAllDayEventTemplate", dayviewNormalEventTemplate: "dayviewNormalEventTemplate", dayviewAllDayEventSectionTemplate: "dayviewAllDayEventSectionTemplate", dayviewNormalEventSectionTemplate: "dayviewNormalEventSectionTemplate", dayviewInactiveAllDayEventSectionTemplate: "dayviewInactiveAllDayEventSectionTemplate", dayviewInactiveNormalEventSectionTemplate: "dayviewInactiveNormalEventSectionTemplate", formatHourColumn: "formatHourColumn", formatDayTitle: "formatDayTitle", allDayLabel: "allDayLabel", hourParts: "hourParts", eventSource: "eventSource", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", hourSegments: "hourSegments", dayviewCategorySource: "dayviewCategorySource", dayviewShowCategoryView: "dayviewShowCategoryView" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, host: { properties: { "class.dayview": "this.class" } }, viewQueries: [{ propertyName: "swiperElement", first: true, predicate: ["dayViewSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"swiper dayview-swiper\" #dayViewSwiper>\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\n @for (sliderIndex of sliderIndexList; track sliderIndex) {\n <div class=\"swiper-slide slide-container dayview-slide-container\">\n @if (!dayviewShowCategoryView) {\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <div class=\"dayview-allday-content-wrapper scroll-content\">\n <table\n class=\"table table-bordered dayview-allday-content-table\"\n >\n <tbody>\n <tr>\n @if (sliderIndex===currentViewIndex) {\n <td\n class=\"calendar-cell\"\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n </td>\n } @if (sliderIndex!==currentViewIndex) {\n <td\n class=\"calendar-cell\"\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n @if (sliderIndex===currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n [emitEvent]=\"preserveScrollPosition\"\n (onScroll)=\"setScrollPosition($event)\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (tm of views[sliderIndex].rows; track tm; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td\n class=\"calendar-cell\"\n tappable\n (click)=\"select(tm)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } @if (sliderIndex!==currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (tm of views[sliderIndex].rows; track tm; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } } @if (dayviewShowCategoryView) {\n <div class=\"dayview-category-header\">\n <table\n class=\"table table-fixed table-bordered dayview-category-header-table\"\n >\n <thead>\n <tr>\n <th\n class=\"dayview-category-header-item calendar-hour-column\"\n ></th>\n @for (category of dayviewCategorySource; track\n category) {\n <th class=\"dayview-category-header-item\">\n <ng-template\n [ngTemplateOutlet]=\"dayviewCategoryItemTemplate\"\n [ngTemplateOutletContext]=\"{category}\"\n >\n </ng-template>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{ allDayLabel }}</div>\n <div\n class=\"dayview-allday-content-wrapper dayview-allday-category-wrapper scroll-content\"\n >\n <table\n class=\"table table-fixed table-bordered dayview-allday-content-table\"\n >\n <tbody>\n <tr>\n @for (category of dayviewCategorySource; track\n category) {\n <td class=\"calendar-cell\">\n <div class=\"calendar-event-wrap\">\n @if (sliderIndex === currentViewIndex) {\n <ng-template\n [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n } @if (sliderIndex !== currentViewIndex\n ) {\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n }\n </div>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n @if (sliderIndex === currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n [emitEvent]=\"preserveScrollPosition\"\n (onScroll)=\"setScrollPosition($event)\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{ hourColumnLabels[i] }}\n </td>\n @if (dayviewCategorySource?.size === 0) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n } @for (category of dayviewCategorySource; track\n category) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row, category)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: $safeNavigationMigration(row.eventsGroupByCategory?.get(category))!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } @if (sliderIndex !== currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{ hourColumnLabels[i] }}\n </td>\n @if (dayviewCategorySource?.size === 0) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n } @for (category of dayviewCategorySource; track\n category) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row, category)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: $safeNavigationMigration(row.eventsGroupByCategory?.get(category))!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } }\n </div>\n }\n </div>\n</div>\n", styles: [".dayview-slide-container .table-fixed{table-layout:fixed}.dayview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.dayview-slide-container .table>thead>tr>th,.dayview-slide-container .table>tbody>tr>th,.dayview-slide-container .table>tfoot>tr>th,.dayview-slide-container .table>thead>tr>td,.dayview-slide-container .table>tbody>tr>td,.dayview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.dayview-slide-container .table>thead>tr>th{vertical-align:bottom}.dayview-slide-container .table>thead:first-child>tr:first-child>th,.dayview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.dayview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.dayview-slide-container .table-bordered{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>tbody>tr>th,.dayview-slide-container .table-bordered>tfoot>tr>th,.dayview-slide-container .table-bordered>thead>tr>td,.dayview-slide-container .table-bordered>tbody>tr>td,.dayview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.dayview-swiper{height:100%}.calendar-cell{padding:0!important;height:37px}.dayview-slide-container{display:block!important}.dayview-category-header{position:relative;font-size:14px}.dayview-category-header-item{font-weight:400;height:37px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dayview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-top:1px solid #ddd;border-left:1px solid #ddd}[dir=rtl] .dayview-allday-label{border-left:none;border-right:1px solid #ddd;float:right}.dayview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:50px}.dayview-allday-category-wrapper{height:50px;margin-top:-1px}.dayview-allday-content-table{min-height:50px}.dayview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.dayview-normal-event-container{margin-top:50px;overflow:hidden;inset:0;position:absolute;font-size:14px}.dayview-categorized-normal-event-container{margin-top:87px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.dayview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.dayview-allday-label{padding-top:4px;line-height:20px}.dayview-allday-content-wrapper{margin-left:31px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: initPositionScrollComponent, selector: "init-position-scroll", inputs: ["initPosition", "emitEvent"], outputs: ["onScroll"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1875
1942
  }
1876
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DayViewComponent, decorators: [{
1943
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DayViewComponent, decorators: [{
1877
1944
  type: Component,
1878
- args: [{ selector: 'dayview', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"swiper dayview-swiper\" #dayViewSwiper>\r\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\r\n <div *ngFor=\"let sliderIndex of sliderIndexList\" class=\"swiper-slide slide-container dayview-slide-container\">\r\n <ng-container *ngIf=\"!dayviewShowCategoryView\">\r\n <div class=\"dayview-allday-table\">\r\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\r\n <div class=\"dayview-allday-content-wrapper scroll-content\">\r\n <table class=\"table table-bordered dayview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td *ngIf=\"sliderIndex===currentViewIndex\" class=\"calendar-cell\"\r\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\r\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n <td *ngIf=\"sliderIndex!==currentViewIndex\" class=\"calendar-cell\"\r\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\r\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll *ngIf=\"sliderIndex===currentViewIndex\" class=\"dayview-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\"\r\n (onScroll)=\"setScrollPosition($event)\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let tm of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td class=\"calendar-cell\" tappable (click)=\"select(tm)\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n <init-position-scroll *ngIf=\"sliderIndex!==currentViewIndex\" class=\"dayview-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let tm of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{hourColumnLabels[i]}}\r\n </td>\r\n <td class=\"calendar-cell\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"dayviewShowCategoryView\">\r\n <div class=\"dayview-category-header\">\r\n <table class=\"table table-fixed table-bordered dayview-category-header-table\">\r\n <thead>\r\n <tr>\r\n <th class=\"dayview-category-header-item calendar-hour-column\"></th>\r\n <th *ngFor=\"let category of dayviewCategorySource\" class=\"dayview-category-header-item\">\r\n <ng-template [ngTemplateOutlet]=\"dayviewCategoryItemTemplate\" [ngTemplateOutletContext]=\"{category}\">\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n\r\n <div class=\"dayview-allday-table\">\r\n <div class=\"dayview-allday-label\">{{ allDayLabel }}</div>\r\n <div class=\"dayview-allday-content-wrapper dayview-allday-category-wrapper scroll-content\">\r\n <table class=\"table table-fixed table-bordered dayview-allday-content-table\">\r\n <tbody>\r\n <tr>\r\n <td class=\"calendar-cell\" *ngFor=\"let category of dayviewCategorySource\">\r\n <div class=\"calendar-event-wrap\">\r\n <ng-template *ngIf=\"sliderIndex === currentViewIndex\"\r\n [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n <ng-template *ngIf=\"sliderIndex !== currentViewIndex \"\r\n [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <init-position-scroll *ngIf=\"sliderIndex === currentViewIndex\"\r\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\"\r\n (onScroll)=\"setScrollPosition($event)\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{ hourColumnLabels[i] }}\r\n </td>\r\n <td *ngIf=\"dayviewCategorySource?.size === 0\" class=\"calendar-cell\" (click)=\"select(row)\" tappable>\r\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n <td *ngFor=\"let category of dayviewCategorySource\" class=\"calendar-cell\" (click)=\"select(row, category)\"\r\n tappable>\r\n <ng-template\r\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: row.eventsGroupByCategory?.get(category)!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n\r\n <init-position-scroll *ngIf=\"sliderIndex !== currentViewIndex\"\r\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\r\n [initPosition]=\"initScrollPosition\">\r\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of views[sliderIndex].rows; let i = index\">\r\n <td class=\"calendar-hour-column text-center\">\r\n {{ hourColumnLabels[i] }}\r\n </td>\r\n <td *ngIf=\"dayviewCategorySource?.size === 0\" class=\"calendar-cell\" (click)=\"select(row)\" tappable>\r\n <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n <td *ngFor=\"let category of dayviewCategorySource\" class=\"calendar-cell\" (click)=\"select(row, category)\"\r\n tappable>\r\n <ng-template\r\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\r\n [ngTemplateOutletContext]=\"{tm: { events: row.eventsGroupByCategory?.get(category)!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\">\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </init-position-scroll>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".dayview-slide-container .table-fixed{table-layout:fixed}.dayview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.dayview-slide-container .table>thead>tr>th,.dayview-slide-container .table>tbody>tr>th,.dayview-slide-container .table>tfoot>tr>th,.dayview-slide-container .table>thead>tr>td,.dayview-slide-container .table>tbody>tr>td,.dayview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.dayview-slide-container .table>thead>tr>th{vertical-align:bottom}.dayview-slide-container .table>thead:first-child>tr:first-child>th,.dayview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.dayview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.dayview-slide-container .table-bordered{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>tbody>tr>th,.dayview-slide-container .table-bordered>tfoot>tr>th,.dayview-slide-container .table-bordered>thead>tr>td,.dayview-slide-container .table-bordered>tbody>tr>td,.dayview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.dayview-swiper{height:100%}.calendar-cell{padding:0!important;height:37px}.dayview-slide-container{display:block!important}.dayview-category-header{position:relative;font-size:14px}.dayview-category-header-item{font-weight:400;height:37px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dayview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-top:1px solid #ddd;border-left:1px solid #ddd}[dir=rtl] .dayview-allday-label{border-left:none;border-right:1px solid #ddd;float:right}.dayview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:50px}.dayview-allday-category-wrapper{height:50px;margin-top:-1px}.dayview-allday-content-table{min-height:50px}.dayview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.dayview-normal-event-container{margin-top:50px;overflow:hidden;inset:0;position:absolute;font-size:14px}.dayview-categorized-normal-event-container{margin-top:87px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.dayview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.dayview-allday-label{padding-top:4px}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.dayview-allday-label{line-height:20px}.dayview-allday-content-wrapper{margin-left:31px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"] }]
1879
- }], ctorParameters: () => [{ type: CalendarService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { swiperElement: [{
1945
+ args: [{ selector: "dayview", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, NgStyle, NgTemplateOutlet, initPositionScrollComponent], template: "<div class=\"swiper dayview-swiper\" #dayViewSwiper>\n <div class=\"swiper-wrapper slides-container\" [dir]=\"dir\">\n @for (sliderIndex of sliderIndexList; track sliderIndex) {\n <div class=\"swiper-slide slide-container dayview-slide-container\">\n @if (!dayviewShowCategoryView) {\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <div class=\"dayview-allday-content-wrapper scroll-content\">\n <table\n class=\"table table-bordered dayview-allday-content-table\"\n >\n <tbody>\n <tr>\n @if (sliderIndex===currentViewIndex) {\n <td\n class=\"calendar-cell\"\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n </td>\n } @if (sliderIndex!==currentViewIndex) {\n <td\n class=\"calendar-cell\"\n [ngClass]=\"{'calendar-event-wrap':views[sliderIndex].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[sliderIndex].allDayEvents.length+'px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[sliderIndex].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n @if (sliderIndex===currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n [emitEvent]=\"preserveScrollPosition\"\n (onScroll)=\"setScrollPosition($event)\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (tm of views[sliderIndex].rows; track tm; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td\n class=\"calendar-cell\"\n tappable\n (click)=\"select(tm)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } @if (sliderIndex!==currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (tm of views[sliderIndex].rows; track tm; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } } @if (dayviewShowCategoryView) {\n <div class=\"dayview-category-header\">\n <table\n class=\"table table-fixed table-bordered dayview-category-header-table\"\n >\n <thead>\n <tr>\n <th\n class=\"dayview-category-header-item calendar-hour-column\"\n ></th>\n @for (category of dayviewCategorySource; track\n category) {\n <th class=\"dayview-category-header-item\">\n <ng-template\n [ngTemplateOutlet]=\"dayviewCategoryItemTemplate\"\n [ngTemplateOutletContext]=\"{category}\"\n >\n </ng-template>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{ allDayLabel }}</div>\n <div\n class=\"dayview-allday-content-wrapper dayview-allday-category-wrapper scroll-content\"\n >\n <table\n class=\"table table-fixed table-bordered dayview-allday-content-table\"\n >\n <tbody>\n <tr>\n @for (category of dayviewCategorySource; track\n category) {\n <td class=\"calendar-cell\">\n <div class=\"calendar-event-wrap\">\n @if (sliderIndex === currentViewIndex) {\n <ng-template\n [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n } @if (sliderIndex !== currentViewIndex\n ) {\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents: views[currentViewIndex].categorizedAllDayEventsMap.get(category)!, eventTemplate: dayviewAllDayEventTemplate}\"\n >\n </ng-template>\n }\n </div>\n </td>\n }\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n @if (sliderIndex === currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n [emitEvent]=\"preserveScrollPosition\"\n (onScroll)=\"setScrollPosition($event)\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{ hourColumnLabels[i] }}\n </td>\n @if (dayviewCategorySource?.size === 0) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n } @for (category of dayviewCategorySource; track\n category) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row, category)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: $safeNavigationMigration(row.eventsGroupByCategory?.get(category))!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } @if (sliderIndex !== currentViewIndex) {\n <init-position-scroll\n class=\"dayview-normal-event-container dayview-categorized-normal-event-container\"\n [initPosition]=\"initScrollPosition\"\n >\n <table\n class=\"table table-bordered table-fixed dayview-normal-event-table\"\n >\n <tbody>\n @for (row of views[sliderIndex].rows; track row; let i =\n $index) {\n <tr>\n <td class=\"calendar-hour-column text-center\">\n {{ hourColumnLabels[i] }}\n </td>\n @if (dayviewCategorySource?.size === 0) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: [], time: row.time }, hourParts, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n } @for (category of dayviewCategorySource; track\n category) {\n <td\n class=\"calendar-cell\"\n (click)=\"select(row, category)\"\n tappable\n >\n <ng-template\n [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm: { events: $safeNavigationMigration(row.eventsGroupByCategory?.get(category))!, time: row.time }, hourParts, category, eventTemplate: dayviewNormalEventTemplate}\"\n >\n </ng-template>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </init-position-scroll>\n } }\n </div>\n }\n </div>\n</div>\n", styles: [".dayview-slide-container .table-fixed{table-layout:fixed}.dayview-slide-container .table{width:100%;max-width:100%;background-color:transparent}.dayview-slide-container .table>thead>tr>th,.dayview-slide-container .table>tbody>tr>th,.dayview-slide-container .table>tfoot>tr>th,.dayview-slide-container .table>thead>tr>td,.dayview-slide-container .table>tbody>tr>td,.dayview-slide-container .table>tfoot>tr>td{padding:8px;line-height:20px;vertical-align:top}.dayview-slide-container .table>thead>tr>th{vertical-align:bottom}.dayview-slide-container .table>thead:first-child>tr:first-child>th,.dayview-slide-container .table>thead:first-child>tr:first-child>td{border-top:0}.dayview-slide-container .table>tbody+tbody{border-top:2px solid #ddd}.dayview-slide-container .table-bordered{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>tbody>tr>th,.dayview-slide-container .table-bordered>tfoot>tr>th,.dayview-slide-container .table-bordered>thead>tr>td,.dayview-slide-container .table-bordered>tbody>tr>td,.dayview-slide-container .table-bordered>tfoot>tr>td{border:1px solid #ddd}.dayview-slide-container .table-bordered>thead>tr>th,.dayview-slide-container .table-bordered>thead>tr>td{border-bottom-width:2px}.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>td,.dayview-slide-container .table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.calendar-hour-column{width:50px;white-space:nowrap}.calendar-event-wrap{position:relative;width:100%;height:100%}.calendar-event{position:absolute;padding:2px;cursor:pointer;z-index:10000}.dayview-swiper{height:100%}.calendar-cell{padding:0!important;height:37px}.dayview-slide-container{display:block!important}.dayview-category-header{position:relative;font-size:14px}.dayview-category-header-item{font-weight:400;height:37px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dayview-allday-label{float:left;height:100%;line-height:50px;text-align:center;width:50px;border-top:1px solid #ddd;border-left:1px solid #ddd}[dir=rtl] .dayview-allday-label{border-left:none;border-right:1px solid #ddd;float:right}.dayview-allday-content-wrapper{margin-left:50px;overflow:hidden;height:51px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:50px}.dayview-allday-category-wrapper{height:50px;margin-top:-1px}.dayview-allday-content-table{min-height:50px}.dayview-allday-table{height:50px;position:relative;border-bottom:1px solid #ddd;font-size:14px}.dayview-normal-event-container{margin-top:50px;overflow:hidden;inset:0;position:absolute;font-size:14px}.dayview-categorized-normal-event-container{margin-top:87px}.scroll-content{overflow-y:auto;overflow-x:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{display:none}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle}@media(max-width:750px){.dayview-allday-label,.calendar-hour-column{width:31px;font-size:12px}.dayview-slide-container .table>tbody>tr>td.calendar-hour-column{padding-left:0;padding-right:0;vertical-align:middle;line-height:12px}.dayview-allday-label{padding-top:4px;line-height:20px}.dayview-allday-content-wrapper{margin-left:31px}[dir=rtl] .dayview-allday-content-wrapper{margin-left:0;margin-right:31px}}\n"] }]
1946
+ }], ctorParameters: () => [{ type: CalendarService }, { type: i0.ElementRef }], propDecorators: { swiperElement: [{
1880
1947
  type: ViewChild,
1881
- args: ['dayViewSwiper']
1948
+ args: ["dayViewSwiper"]
1882
1949
  }], class: [{
1883
1950
  type: HostBinding,
1884
- args: ['class.dayview']
1951
+ args: ["class.dayview"]
1885
1952
  }], dayviewCategoryItemTemplate: [{
1886
1953
  type: Input
1887
1954
  }], dayviewAllDayEventTemplate: [{
@@ -1946,13 +2013,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
1946
2013
  type: Output
1947
2014
  }] } });
1948
2015
 
1949
- var Step;
1950
- (function (Step) {
1951
- Step[Step["QuarterHour"] = 15] = "QuarterHour";
1952
- Step[Step["HalfHour"] = 30] = "HalfHour";
1953
- Step[Step["Hour"] = 60] = "Hour";
1954
- })(Step || (Step = {}));
1955
-
1956
2016
  SwiperCore.use([IonicSlides]);
1957
2017
  class CalendarComponent {
1958
2018
  get currentDate() {
@@ -1966,25 +2026,23 @@ class CalendarComponent {
1966
2026
  this.calendarService.setCurrentDate(val, true);
1967
2027
  this.onCurrentDateChanged.emit(this._currentDate);
1968
2028
  }
1969
- constructor(calendarService, appLocale, ngZone) {
2029
+ constructor(calendarService, appLocale) {
1970
2030
  this.calendarService = calendarService;
1971
- this.appLocale = appLocale;
1972
- this.ngZone = ngZone;
1973
2031
  this.eventSource = [];
1974
- this.calendarMode = 'month';
1975
- this.formatDay = 'd';
1976
- this.formatDayHeader = 'EEE';
1977
- this.formatDayTitle = 'MMMM dd, yyyy';
1978
- this.formatWeekTitle = 'MMMM yyyy, \'Week\' w';
1979
- this.formatMonthTitle = 'MMMM yyyy';
1980
- this.formatWeekViewDayHeader = 'EEE d';
1981
- this.formatHourColumn = 'ha';
2032
+ this.calendarMode = "month";
2033
+ this.formatDay = "d";
2034
+ this.formatDayHeader = "EEE";
2035
+ this.formatDayTitle = "MMMM dd, yyyy";
2036
+ this.formatWeekTitle = "MMMM yyyy, 'Week' w";
2037
+ this.formatMonthTitle = "MMMM yyyy";
2038
+ this.formatWeekViewDayHeader = "EEE d";
2039
+ this.formatHourColumn = "ha";
1982
2040
  this.showEventDetail = true;
1983
2041
  this.startingDayMonth = 0;
1984
2042
  this.startingDayWeek = 0;
1985
- this.allDayLabel = 'all day';
1986
- this.noEventsLabel = 'No Events';
1987
- this.queryMode = 'local';
2043
+ this.allDayLabel = "all day";
2044
+ this.noEventsLabel = "No Events";
2045
+ this.queryMode = "local";
1988
2046
  this.step = Step.Hour;
1989
2047
  this.timeInterval = 60;
1990
2048
  this.autoSelect = true;
@@ -2011,12 +2069,7 @@ class CalendarComponent {
2011
2069
  }
2012
2070
  ngOnInit() {
2013
2071
  if (this.autoSelect) {
2014
- if (this.autoSelect.toString() === 'false') {
2015
- this.autoSelect = false;
2016
- }
2017
- else {
2018
- this.autoSelect = true;
2019
- }
2072
+ this.autoSelect = this.autoSelect.toString() !== "false";
2020
2073
  }
2021
2074
  this.hourSegments = 60 / this.timeInterval;
2022
2075
  this.hourParts = 60 / this.step;
@@ -2026,13 +2079,14 @@ class CalendarComponent {
2026
2079
  else {
2027
2080
  this.hourParts = this.hourParts / this.hourSegments;
2028
2081
  }
2029
- this.startHour = parseInt(this.startHour.toString());
2030
- this.endHour = parseInt(this.endHour.toString());
2082
+ this.startHour = Number.parseInt(this.startHour.toString());
2083
+ this.endHour = Number.parseInt(this.endHour.toString());
2031
2084
  this.calendarService.queryMode = this.queryMode;
2032
- this.currentDateChangedFromChildrenSubscription = this.calendarService.currentDateChangedFromChildren$.subscribe(currentDate => {
2033
- this._currentDate = currentDate;
2034
- this.onCurrentDateChanged.emit(currentDate);
2035
- });
2085
+ this.currentDateChangedFromChildrenSubscription =
2086
+ this.calendarService.currentDateChangedFromChildren$.subscribe((currentDate) => {
2087
+ this._currentDate = currentDate;
2088
+ this.onCurrentDateChanged.emit(currentDate);
2089
+ });
2036
2090
  }
2037
2091
  ngOnDestroy() {
2038
2092
  if (this.currentDateChangedFromChildrenSubscription) {
@@ -2055,28 +2109,31 @@ class CalendarComponent {
2055
2109
  titleChanged(title) {
2056
2110
  this.onTitleChanged.emit(title);
2057
2111
  }
2058
- loadEvents() {
2059
- this.calendarService.loadEvents();
2060
- }
2061
2112
  slideNext() {
2062
2113
  this.calendarService.slide(1);
2063
2114
  }
2064
2115
  slidePrev() {
2065
2116
  this.calendarService.slide(-1);
2066
2117
  }
2067
- update() {
2068
- this.calendarService.update();
2069
- }
2070
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarService }, { token: LOCALE_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
2071
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: CalendarComponent, isStandalone: false, selector: "calendar", inputs: { currentDate: "currentDate", eventSource: "eventSource", calendarMode: "calendarMode", formatDay: "formatDay", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatWeekTitle: "formatWeekTitle", formatMonthTitle: "formatMonthTitle", formatWeekViewDayHeader: "formatWeekViewDayHeader", formatHourColumn: "formatHourColumn", showEventDetail: "showEventDetail", startingDayMonth: "startingDayMonth", startingDayWeek: "startingDayWeek", allDayLabel: "allDayLabel", noEventsLabel: "noEventsLabel", queryMode: "queryMode", step: "step", timeInterval: "timeInterval", autoSelect: "autoSelect", markDisabled: "markDisabled", monthviewDisplayEventTemplate: "monthviewDisplayEventTemplate", monthviewInactiveDisplayEventTemplate: "monthviewInactiveDisplayEventTemplate", monthviewEventDetailTemplate: "monthviewEventDetailTemplate", weekviewHeaderTemplate: "weekviewHeaderTemplate", weekviewAllDayEventTemplate: "weekviewAllDayEventTemplate", weekviewNormalEventTemplate: "weekviewNormalEventTemplate", dayviewCategoryItemTemplate: "dayviewCategoryItemTemplate", dayviewAllDayEventTemplate: "dayviewAllDayEventTemplate", dayviewNormalEventTemplate: "dayviewNormalEventTemplate", weekviewAllDayEventSectionTemplate: "weekviewAllDayEventSectionTemplate", weekviewNormalEventSectionTemplate: "weekviewNormalEventSectionTemplate", dayviewAllDayEventSectionTemplate: "dayviewAllDayEventSectionTemplate", dayviewNormalEventSectionTemplate: "dayviewNormalEventSectionTemplate", weekviewInactiveAllDayEventSectionTemplate: "weekviewInactiveAllDayEventSectionTemplate", weekviewInactiveNormalEventSectionTemplate: "weekviewInactiveNormalEventSectionTemplate", dayviewInactiveAllDayEventSectionTemplate: "dayviewInactiveAllDayEventSectionTemplate", dayviewInactiveNormalEventSectionTemplate: "dayviewInactiveNormalEventSectionTemplate", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", locale: "locale", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", dayviewCategorySource: "dayviewCategorySource", dayviewShowCategoryView: "dayviewShowCategoryView" }, outputs: { onCurrentDateChanged: "onCurrentDateChanged", onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onDayHeaderSelected: "onDayHeaderSelected", onTitleChanged: "onTitleChanged" }, providers: [CalendarService], ngImport: i0, template: "<ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\r\n {{view.dates[row*7+col].label}}\r\n</ng-template>\r\n<ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\"\r\n let-noEventsLabel=\"noEventsLabel\">\r\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\r\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\r\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\r\n -\r\n {{event.endTime|date: 'HH:mm'}}\r\n </span>\r\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\r\n <span class=\"event-detail\"> | {{event.title}} </span>\r\n <span class=\"event-detail event-category-detail\" *ngIf=\"event.categoryId\">[{{event.categoryName}}]</span>\r\n </ion-item>\r\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\r\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\r\n </ion-item>\r\n </ion-list>\r\n</ng-template>\r\n<ng-template #defaultWeekviewHeaderTemplate let-viewDate=\"viewDate\">\r\n {{ viewDate.dayHeader }}\r\n</ng-template>\r\n<ng-template #defaultCategoryItemTemplate let-category=\"category\">\r\n {{ category }}\r\n</ng-template>\r\n<ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\r\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\r\n</ng-template>\r\n<ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\r\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\r\n</ng-template>\r\n<ng-template #defaultWeekViewAllDayEventSectionTemplate let-day=\"day\" let-eventTemplate=\"eventTemplate\">\r\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\r\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\r\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\r\n (click)=\"eventSelected(displayEvent.event)\"\r\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\r\n <ng-template [ngTemplateOutlet]=\"eventTemplate\" [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents=\"allDayEvents\"\r\n let-eventTemplate=\"eventTemplate\">\r\n <div *ngFor=\"let displayEvent of allDayEvents; let eventIndex=index\" class=\"calendar-event\" tappable\r\n (click)=\"eventSelected(displayEvent.event)\" [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\r\n <ng-template [ngTemplateOutlet]=\"eventTemplate\" [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultNormalEventSectionTemplate let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\">\r\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\r\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\r\n (click)=\"eventSelected(displayEvent.event)\"\r\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\r\n <ng-template [ngTemplateOutlet]=\"eventTemplate\" [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultInactiveAllDayEventSectionTemplate>\r\n</ng-template>\r\n<ng-template #defaultInactiveNormalEventSectionTemplate>\r\n</ng-template>\r\n\r\n<div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\r\n <monthview *ngSwitchCase=\"'month'\" [formatDay]=\"formatDay\" [formatDayHeader]=\"formatDayHeader\"\r\n [formatMonthTitle]=\"formatMonthTitle\" [startingDayMonth]=\"startingDayMonth\" [showEventDetail]=\"showEventDetail\"\r\n [noEventsLabel]=\"noEventsLabel\" [autoSelect]=\"autoSelect\" [eventSource]=\"eventSource\"\r\n [markDisabled]=\"markDisabled\"\r\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\r\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\r\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\r\n [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [lockSwipeToPrev]=\"lockSwipeToPrev\"\r\n [lockSwipeToNext]=\"lockSwipeToNext\" [lockSwipes]=\"lockSwipes\" [sliderOptions]=\"sliderOptions\"\r\n (onRangeChanged)=\"rangeChanged($event)\" (onEventSelected)=\"eventSelected($event)\"\r\n (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\">\r\n </monthview>\r\n <weekview *ngSwitchCase=\"'week'\" [formatWeekTitle]=\"formatWeekTitle\"\r\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\" [formatHourColumn]=\"formatHourColumn\"\r\n [startingDayWeek]=\"startingDayWeek\" [allDayLabel]=\"allDayLabel\" [hourParts]=\"hourParts\"\r\n [autoSelect]=\"autoSelect\" [hourSegments]=\"hourSegments\" [eventSource]=\"eventSource\"\r\n [markDisabled]=\"markDisabled\" [weekviewHeaderTemplate]=\"weekviewHeaderTemplate||defaultWeekviewHeaderTemplate\"\r\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\r\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\r\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\r\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\r\n [weekviewInactiveAllDayEventSectionTemplate]=\"weekviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\r\n [weekviewInactiveNormalEventSectionTemplate]=\"weekviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\r\n [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [scrollToHour]=\"scrollToHour\"\r\n [preserveScrollPosition]=\"preserveScrollPosition\" [lockSwipeToPrev]=\"lockSwipeToPrev\"\r\n [lockSwipeToNext]=\"lockSwipeToNext\" [lockSwipes]=\"lockSwipes\" [startHour]=\"startHour\" [endHour]=\"endHour\"\r\n [sliderOptions]=\"sliderOptions\" (onRangeChanged)=\"rangeChanged($event)\"\r\n (onEventSelected)=\"eventSelected($event)\" (onDayHeaderSelected)=\"daySelected($event)\"\r\n (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\">\r\n </weekview>\r\n <dayview *ngSwitchCase=\"'day'\" [formatDayTitle]=\"formatDayTitle\" [formatHourColumn]=\"formatHourColumn\"\r\n [allDayLabel]=\"allDayLabel\" [hourParts]=\"hourParts\" [hourSegments]=\"hourSegments\" [eventSource]=\"eventSource\"\r\n [markDisabled]=\"markDisabled\"\r\n [dayviewCategoryItemTemplate]=\"dayviewCategoryItemTemplate||defaultCategoryItemTemplate\"\r\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\r\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\r\n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\"\r\n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\r\n [dayviewInactiveAllDayEventSectionTemplate]=\"dayviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\r\n [dayviewInactiveNormalEventSectionTemplate]=\"dayviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\r\n [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [scrollToHour]=\"scrollToHour\"\r\n [preserveScrollPosition]=\"preserveScrollPosition\" [lockSwipeToPrev]=\"lockSwipeToPrev\"\r\n [lockSwipeToNext]=\"lockSwipeToNext\" [lockSwipes]=\"lockSwipes\" [startHour]=\"startHour\" [endHour]=\"endHour\"\r\n [sliderOptions]=\"sliderOptions\" (onRangeChanged)=\"rangeChanged($event)\"\r\n [dayviewCategorySource]=\"dayviewCategorySource\"\r\n [dayviewShowCategoryView]=\"dayviewShowCategoryView\"\r\n (onEventSelected)=\"eventSelected($event)\" (onTimeSelected)=\"timeSelected($event)\"\r\n (onTitleChanged)=\"titleChanged($event)\">\r\n </dayview>\r\n</div>", styles: [":host>div{height:100%}.event-detail-container{border-top:2px darkgrey solid}.no-events-label{font-weight:700;color:#a9a9a9;text-align:center}.event-detail{cursor:pointer;white-space:nowrap;text-overflow:ellipsis}.event-category-detail{margin-left:10px}.monthview-eventdetail-timecolumn{width:110px;overflow:hidden}.calendar-event-inner{overflow:hidden;background-color:#3a87ad;color:#fff;height:100%;width:100%;padding:2px;line-height:15px;text-align:initial}@media(max-width:750px){.calendar-event-inner{font-size:12px}}\n"], dependencies: [{ kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MonthViewComponent, selector: "monthview", inputs: ["monthviewDisplayEventTemplate", "monthviewInactiveDisplayEventTemplate", "monthviewEventDetailTemplate", "formatDay", "formatDayHeader", "formatMonthTitle", "eventSource", "startingDayMonth", "showEventDetail", "noEventsLabel", "autoSelect", "markDisabled", "locale", "dateFormatter", "dir", "lockSwipeToPrev", "lockSwipeToNext", "lockSwipes", "sliderOptions"], outputs: ["onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"] }, { kind: "component", type: WeekViewComponent, selector: "weekview", inputs: ["weekviewHeaderTemplate", "weekviewAllDayEventTemplate", "weekviewNormalEventTemplate", "weekviewAllDayEventSectionTemplate", "weekviewNormalEventSectionTemplate", "weekviewInactiveAllDayEventSectionTemplate", "weekviewInactiveNormalEventSectionTemplate", "formatWeekTitle", "formatWeekViewDayHeader", "formatHourColumn", "startingDayWeek", "allDayLabel", "hourParts", "eventSource", "autoSelect", "markDisabled", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipeToNext", "lockSwipes", "startHour", "endHour", "sliderOptions", "hourSegments"], outputs: ["onRangeChanged", "onEventSelected", "onTimeSelected", "onDayHeaderSelected", "onTitleChanged"] }, { kind: "component", type: DayViewComponent, selector: "dayview", inputs: ["dayviewCategoryItemTemplate", "dayviewAllDayEventTemplate", "dayviewNormalEventTemplate", "dayviewAllDayEventSectionTemplate", "dayviewNormalEventSectionTemplate", "dayviewInactiveAllDayEventSectionTemplate", "dayviewInactiveNormalEventSectionTemplate", "formatHourColumn", "formatDayTitle", "allDayLabel", "hourParts", "eventSource", "markDisabled", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipeToNext", "lockSwipes", "startHour", "endHour", "sliderOptions", "hourSegments", "dayviewCategorySource", "dayviewShowCategoryView"], outputs: ["onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
2118
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
2119
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: CalendarComponent, isStandalone: true, selector: "calendar", inputs: { currentDate: "currentDate", eventSource: "eventSource", calendarMode: "calendarMode", formatDay: "formatDay", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatWeekTitle: "formatWeekTitle", formatMonthTitle: "formatMonthTitle", formatWeekViewDayHeader: "formatWeekViewDayHeader", formatHourColumn: "formatHourColumn", showEventDetail: "showEventDetail", startingDayMonth: "startingDayMonth", startingDayWeek: "startingDayWeek", allDayLabel: "allDayLabel", noEventsLabel: "noEventsLabel", queryMode: "queryMode", step: "step", timeInterval: "timeInterval", autoSelect: "autoSelect", markDisabled: "markDisabled", monthviewDisplayEventTemplate: "monthviewDisplayEventTemplate", monthviewInactiveDisplayEventTemplate: "monthviewInactiveDisplayEventTemplate", monthviewEventDetailTemplate: "monthviewEventDetailTemplate", weekviewHeaderTemplate: "weekviewHeaderTemplate", weekviewAllDayEventTemplate: "weekviewAllDayEventTemplate", weekviewNormalEventTemplate: "weekviewNormalEventTemplate", dayviewCategoryItemTemplate: "dayviewCategoryItemTemplate", dayviewAllDayEventTemplate: "dayviewAllDayEventTemplate", dayviewNormalEventTemplate: "dayviewNormalEventTemplate", weekviewAllDayEventSectionTemplate: "weekviewAllDayEventSectionTemplate", weekviewNormalEventSectionTemplate: "weekviewNormalEventSectionTemplate", dayviewAllDayEventSectionTemplate: "dayviewAllDayEventSectionTemplate", dayviewNormalEventSectionTemplate: "dayviewNormalEventSectionTemplate", weekviewInactiveAllDayEventSectionTemplate: "weekviewInactiveAllDayEventSectionTemplate", weekviewInactiveNormalEventSectionTemplate: "weekviewInactiveNormalEventSectionTemplate", dayviewInactiveAllDayEventSectionTemplate: "dayviewInactiveAllDayEventSectionTemplate", dayviewInactiveNormalEventSectionTemplate: "dayviewInactiveNormalEventSectionTemplate", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipeToNext: "lockSwipeToNext", lockSwipes: "lockSwipes", locale: "locale", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", dayviewCategorySource: "dayviewCategorySource", dayviewShowCategoryView: "dayviewShowCategoryView" }, outputs: { onCurrentDateChanged: "onCurrentDateChanged", onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onDayHeaderSelected: "onDayHeaderSelected", onTitleChanged: "onTitleChanged" }, providers: [CalendarService], ngImport: i0, template: "<ng-template\n #monthviewDefaultDisplayEventTemplate\n let-view=\"view\"\n let-row=\"row\"\n let-col=\"col\"\n>\n {{view.dates[row*7+col].label}}\n</ng-template>\n<ng-template\n #monthviewDefaultEventDetailTemplate\n let-showEventDetail=\"showEventDetail\"\n let-selectedDate=\"selectedDate\"\n let-noEventsLabel=\"noEventsLabel\"\n>\n @if (showEventDetail) {\n <ion-list\n class=\"event-detail-container\"\n has-bouncing=\"false\"\n overflow-scroll=\"false\"\n >\n @for (event of selectedDate?.events; track event) {\n <ion-item (click)=\"eventSelected(event)\">\n @if (!event.allDay) {\n <span class=\"monthview-eventdetail-timecolumn\"\n >{{event.startTime|date: 'HH:mm'}} - {{event.endTime|date:\n 'HH:mm'}}\n </span>\n } @if (event.allDay) {\n <span class=\"monthview-eventdetail-timecolumn\"\n >{{allDayLabel}}</span\n >\n }\n <span class=\"event-detail\"> | {{event.title}} </span>\n @if (event.categoryId) {\n <span class=\"event-detail event-category-detail\"\n >[{{event.categoryName}}]</span\n >\n }\n </ion-item>\n } @if (selectedDate?.events.length==0) {\n <ion-item>\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n }\n </ion-list>\n }\n</ng-template>\n<ng-template #defaultWeekviewHeaderTemplate let-viewDate=\"viewDate\">\n {{ viewDate.dayHeader }}\n</ng-template>\n<ng-template #defaultCategoryItemTemplate let-category=\"category\">\n {{ category }}\n</ng-template>\n<ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n</ng-template>\n<ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n</ng-template>\n<ng-template\n #defaultWeekViewAllDayEventSectionTemplate\n let-day=\"day\"\n let-eventTemplate=\"eventTemplate\"\n>\n @if (day.events) {\n <div\n [ngClass]=\"{'calendar-event-wrap': day.events}\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\"\n >\n @for (displayEvent of day.events; track displayEvent) {\n <div\n class=\"calendar-event\"\n tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template\n #defaultDayViewAllDayEventSectionTemplate\n let-allDayEvents=\"allDayEvents\"\n let-eventTemplate=\"eventTemplate\"\n>\n @for (displayEvent of allDayEvents; track displayEvent; let eventIndex =\n $index) {\n <div\n class=\"calendar-event\"\n tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\n >\n </ng-template>\n </div>\n }\n</ng-template>\n<ng-template\n #defaultNormalEventSectionTemplate\n let-tm=\"tm\"\n let-hourParts=\"hourParts\"\n let-eventTemplate=\"eventTemplate\"\n>\n @if (tm.events) {\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\">\n @for (displayEvent of tm.events; track displayEvent) {\n <div\n class=\"calendar-event\"\n tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #defaultInactiveAllDayEventSectionTemplate> </ng-template>\n<ng-template #defaultInactiveNormalEventSectionTemplate> </ng-template>\n\n<div class=\"{{calendarMode}}view-container\">\n @switch (calendarMode) { @case ('month') {\n <monthview\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipeToNext]=\"lockSwipeToNext\"\n [lockSwipes]=\"lockSwipes\"\n [sliderOptions]=\"sliderOptions\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\"\n >\n </monthview>\n } @case ('week') {\n <weekview\n [formatWeekTitle]=\"formatWeekTitle\"\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n [formatHourColumn]=\"formatHourColumn\"\n [startingDayWeek]=\"startingDayWeek\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [autoSelect]=\"autoSelect\"\n [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewHeaderTemplate]=\"weekviewHeaderTemplate||defaultWeekviewHeaderTemplate\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [weekviewInactiveAllDayEventSectionTemplate]=\"weekviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\n [weekviewInactiveNormalEventSectionTemplate]=\"weekviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipeToNext]=\"lockSwipeToNext\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [sliderOptions]=\"sliderOptions\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onDayHeaderSelected)=\"daySelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\"\n >\n </weekview>\n } @case ('day') {\n <dayview\n [formatDayTitle]=\"formatDayTitle\"\n [formatHourColumn]=\"formatHourColumn\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewCategoryItemTemplate]=\"dayviewCategoryItemTemplate||defaultCategoryItemTemplate\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\"\n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [dayviewInactiveAllDayEventSectionTemplate]=\"dayviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\n [dayviewInactiveNormalEventSectionTemplate]=\"dayviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipeToNext]=\"lockSwipeToNext\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [sliderOptions]=\"sliderOptions\"\n (onRangeChanged)=\"rangeChanged($event)\"\n [dayviewCategorySource]=\"dayviewCategorySource\"\n [dayviewShowCategoryView]=\"dayviewShowCategoryView\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\"\n >\n </dayview>\n } }\n</div>\n", styles: [":host>div{height:100%}.event-detail-container{border-top:2px darkgrey solid}.no-events-label{font-weight:700;color:#a9a9a9;text-align:center}.event-detail{cursor:pointer;white-space:nowrap;text-overflow:ellipsis}.event-category-detail{margin-left:10px}.monthview-eventdetail-timecolumn{width:110px;overflow:hidden}.calendar-event-inner{overflow:hidden;background-color:#3a87ad;color:#fff;height:100%;width:100%;padding:2px;line-height:15px;text-align:initial}@media(max-width:750px){.calendar-event-inner{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MonthViewComponent, selector: "monthview", inputs: ["monthviewDisplayEventTemplate", "monthviewInactiveDisplayEventTemplate", "monthviewEventDetailTemplate", "formatDay", "formatDayHeader", "formatMonthTitle", "eventSource", "startingDayMonth", "showEventDetail", "noEventsLabel", "autoSelect", "markDisabled", "locale", "dateFormatter", "dir", "lockSwipeToPrev", "lockSwipeToNext", "lockSwipes", "sliderOptions"], outputs: ["onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"] }, { kind: "component", type: WeekViewComponent, selector: "weekview", inputs: ["weekviewHeaderTemplate", "weekviewAllDayEventTemplate", "weekviewNormalEventTemplate", "weekviewAllDayEventSectionTemplate", "weekviewNormalEventSectionTemplate", "weekviewInactiveAllDayEventSectionTemplate", "weekviewInactiveNormalEventSectionTemplate", "formatWeekTitle", "formatWeekViewDayHeader", "formatHourColumn", "startingDayWeek", "allDayLabel", "hourParts", "eventSource", "autoSelect", "markDisabled", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipeToNext", "lockSwipes", "startHour", "endHour", "sliderOptions", "hourSegments"], outputs: ["onRangeChanged", "onEventSelected", "onTimeSelected", "onDayHeaderSelected", "onTitleChanged"] }, { kind: "component", type: DayViewComponent, selector: "dayview", inputs: ["dayviewCategoryItemTemplate", "dayviewAllDayEventTemplate", "dayviewNormalEventTemplate", "dayviewAllDayEventSectionTemplate", "dayviewNormalEventSectionTemplate", "dayviewInactiveAllDayEventSectionTemplate", "dayviewInactiveNormalEventSectionTemplate", "formatHourColumn", "formatDayTitle", "allDayLabel", "hourParts", "eventSource", "markDisabled", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipeToNext", "lockSwipes", "startHour", "endHour", "sliderOptions", "hourSegments", "dayviewCategorySource", "dayviewShowCategoryView"], outputs: ["onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
2072
2120
  }
2073
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, decorators: [{
2121
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
2074
2122
  type: Component,
2075
- args: [{ selector: 'calendar', providers: [CalendarService], standalone: false, template: "<ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\r\n {{view.dates[row*7+col].label}}\r\n</ng-template>\r\n<ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\"\r\n let-noEventsLabel=\"noEventsLabel\">\r\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\r\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\r\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\r\n -\r\n {{event.endTime|date: 'HH:mm'}}\r\n </span>\r\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\r\n <span class=\"event-detail\"> | {{event.title}} </span>\r\n <span class=\"event-detail event-category-detail\" *ngIf=\"event.categoryId\">[{{event.categoryName}}]</span>\r\n </ion-item>\r\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\r\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\r\n </ion-item>\r\n </ion-list>\r\n</ng-template>\r\n<ng-template #defaultWeekviewHeaderTemplate let-viewDate=\"viewDate\">\r\n {{ viewDate.dayHeader }}\r\n</ng-template>\r\n<ng-template #defaultCategoryItemTemplate let-category=\"category\">\r\n {{ category }}\r\n</ng-template>\r\n<ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\r\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\r\n</ng-template>\r\n<ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\r\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\r\n</ng-template>\r\n<ng-template #defaultWeekViewAllDayEventSectionTemplate let-day=\"day\" let-eventTemplate=\"eventTemplate\">\r\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\r\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\r\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\r\n (click)=\"eventSelected(displayEvent.event)\"\r\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\r\n <ng-template [ngTemplateOutlet]=\"eventTemplate\" [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents=\"allDayEvents\"\r\n let-eventTemplate=\"eventTemplate\">\r\n <div *ngFor=\"let displayEvent of allDayEvents; let eventIndex=index\" class=\"calendar-event\" tappable\r\n (click)=\"eventSelected(displayEvent.event)\" [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\r\n <ng-template [ngTemplateOutlet]=\"eventTemplate\" [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultNormalEventSectionTemplate let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\">\r\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\r\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\r\n (click)=\"eventSelected(displayEvent.event)\"\r\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\r\n <ng-template [ngTemplateOutlet]=\"eventTemplate\" [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultInactiveAllDayEventSectionTemplate>\r\n</ng-template>\r\n<ng-template #defaultInactiveNormalEventSectionTemplate>\r\n</ng-template>\r\n\r\n<div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\r\n <monthview *ngSwitchCase=\"'month'\" [formatDay]=\"formatDay\" [formatDayHeader]=\"formatDayHeader\"\r\n [formatMonthTitle]=\"formatMonthTitle\" [startingDayMonth]=\"startingDayMonth\" [showEventDetail]=\"showEventDetail\"\r\n [noEventsLabel]=\"noEventsLabel\" [autoSelect]=\"autoSelect\" [eventSource]=\"eventSource\"\r\n [markDisabled]=\"markDisabled\"\r\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\r\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\r\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\r\n [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [lockSwipeToPrev]=\"lockSwipeToPrev\"\r\n [lockSwipeToNext]=\"lockSwipeToNext\" [lockSwipes]=\"lockSwipes\" [sliderOptions]=\"sliderOptions\"\r\n (onRangeChanged)=\"rangeChanged($event)\" (onEventSelected)=\"eventSelected($event)\"\r\n (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\">\r\n </monthview>\r\n <weekview *ngSwitchCase=\"'week'\" [formatWeekTitle]=\"formatWeekTitle\"\r\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\" [formatHourColumn]=\"formatHourColumn\"\r\n [startingDayWeek]=\"startingDayWeek\" [allDayLabel]=\"allDayLabel\" [hourParts]=\"hourParts\"\r\n [autoSelect]=\"autoSelect\" [hourSegments]=\"hourSegments\" [eventSource]=\"eventSource\"\r\n [markDisabled]=\"markDisabled\" [weekviewHeaderTemplate]=\"weekviewHeaderTemplate||defaultWeekviewHeaderTemplate\"\r\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\r\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\r\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\r\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\r\n [weekviewInactiveAllDayEventSectionTemplate]=\"weekviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\r\n [weekviewInactiveNormalEventSectionTemplate]=\"weekviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\r\n [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [scrollToHour]=\"scrollToHour\"\r\n [preserveScrollPosition]=\"preserveScrollPosition\" [lockSwipeToPrev]=\"lockSwipeToPrev\"\r\n [lockSwipeToNext]=\"lockSwipeToNext\" [lockSwipes]=\"lockSwipes\" [startHour]=\"startHour\" [endHour]=\"endHour\"\r\n [sliderOptions]=\"sliderOptions\" (onRangeChanged)=\"rangeChanged($event)\"\r\n (onEventSelected)=\"eventSelected($event)\" (onDayHeaderSelected)=\"daySelected($event)\"\r\n (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\">\r\n </weekview>\r\n <dayview *ngSwitchCase=\"'day'\" [formatDayTitle]=\"formatDayTitle\" [formatHourColumn]=\"formatHourColumn\"\r\n [allDayLabel]=\"allDayLabel\" [hourParts]=\"hourParts\" [hourSegments]=\"hourSegments\" [eventSource]=\"eventSource\"\r\n [markDisabled]=\"markDisabled\"\r\n [dayviewCategoryItemTemplate]=\"dayviewCategoryItemTemplate||defaultCategoryItemTemplate\"\r\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\r\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\r\n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\"\r\n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\r\n [dayviewInactiveAllDayEventSectionTemplate]=\"dayviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\r\n [dayviewInactiveNormalEventSectionTemplate]=\"dayviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\r\n [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [scrollToHour]=\"scrollToHour\"\r\n [preserveScrollPosition]=\"preserveScrollPosition\" [lockSwipeToPrev]=\"lockSwipeToPrev\"\r\n [lockSwipeToNext]=\"lockSwipeToNext\" [lockSwipes]=\"lockSwipes\" [startHour]=\"startHour\" [endHour]=\"endHour\"\r\n [sliderOptions]=\"sliderOptions\" (onRangeChanged)=\"rangeChanged($event)\"\r\n [dayviewCategorySource]=\"dayviewCategorySource\"\r\n [dayviewShowCategoryView]=\"dayviewShowCategoryView\"\r\n (onEventSelected)=\"eventSelected($event)\" (onTimeSelected)=\"timeSelected($event)\"\r\n (onTitleChanged)=\"titleChanged($event)\">\r\n </dayview>\r\n</div>", styles: [":host>div{height:100%}.event-detail-container{border-top:2px darkgrey solid}.no-events-label{font-weight:700;color:#a9a9a9;text-align:center}.event-detail{cursor:pointer;white-space:nowrap;text-overflow:ellipsis}.event-category-detail{margin-left:10px}.monthview-eventdetail-timecolumn{width:110px;overflow:hidden}.calendar-event-inner{overflow:hidden;background-color:#3a87ad;color:#fff;height:100%;width:100%;padding:2px;line-height:15px;text-align:initial}@media(max-width:750px){.calendar-event-inner{font-size:12px}}\n"] }]
2123
+ args: [{ selector: "calendar", providers: [CalendarService], imports: [
2124
+ IonicModule,
2125
+ NgClass,
2126
+ NgStyle,
2127
+ NgTemplateOutlet,
2128
+ MonthViewComponent,
2129
+ WeekViewComponent,
2130
+ DayViewComponent,
2131
+ DatePipe,
2132
+ ], template: "<ng-template\n #monthviewDefaultDisplayEventTemplate\n let-view=\"view\"\n let-row=\"row\"\n let-col=\"col\"\n>\n {{view.dates[row*7+col].label}}\n</ng-template>\n<ng-template\n #monthviewDefaultEventDetailTemplate\n let-showEventDetail=\"showEventDetail\"\n let-selectedDate=\"selectedDate\"\n let-noEventsLabel=\"noEventsLabel\"\n>\n @if (showEventDetail) {\n <ion-list\n class=\"event-detail-container\"\n has-bouncing=\"false\"\n overflow-scroll=\"false\"\n >\n @for (event of selectedDate?.events; track event) {\n <ion-item (click)=\"eventSelected(event)\">\n @if (!event.allDay) {\n <span class=\"monthview-eventdetail-timecolumn\"\n >{{event.startTime|date: 'HH:mm'}} - {{event.endTime|date:\n 'HH:mm'}}\n </span>\n } @if (event.allDay) {\n <span class=\"monthview-eventdetail-timecolumn\"\n >{{allDayLabel}}</span\n >\n }\n <span class=\"event-detail\"> | {{event.title}} </span>\n @if (event.categoryId) {\n <span class=\"event-detail event-category-detail\"\n >[{{event.categoryName}}]</span\n >\n }\n </ion-item>\n } @if (selectedDate?.events.length==0) {\n <ion-item>\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n }\n </ion-list>\n }\n</ng-template>\n<ng-template #defaultWeekviewHeaderTemplate let-viewDate=\"viewDate\">\n {{ viewDate.dayHeader }}\n</ng-template>\n<ng-template #defaultCategoryItemTemplate let-category=\"category\">\n {{ category }}\n</ng-template>\n<ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n</ng-template>\n<ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n</ng-template>\n<ng-template\n #defaultWeekViewAllDayEventSectionTemplate\n let-day=\"day\"\n let-eventTemplate=\"eventTemplate\"\n>\n @if (day.events) {\n <div\n [ngClass]=\"{'calendar-event-wrap': day.events}\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\"\n >\n @for (displayEvent of day.events; track displayEvent) {\n <div\n class=\"calendar-event\"\n tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template\n #defaultDayViewAllDayEventSectionTemplate\n let-allDayEvents=\"allDayEvents\"\n let-eventTemplate=\"eventTemplate\"\n>\n @for (displayEvent of allDayEvents; track displayEvent; let eventIndex =\n $index) {\n <div\n class=\"calendar-event\"\n tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\n >\n </ng-template>\n </div>\n }\n</ng-template>\n<ng-template\n #defaultNormalEventSectionTemplate\n let-tm=\"tm\"\n let-hourParts=\"hourParts\"\n let-eventTemplate=\"eventTemplate\"\n>\n @if (tm.events) {\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\">\n @for (displayEvent of tm.events; track displayEvent) {\n <div\n class=\"calendar-event\"\n tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #defaultInactiveAllDayEventSectionTemplate> </ng-template>\n<ng-template #defaultInactiveNormalEventSectionTemplate> </ng-template>\n\n<div class=\"{{calendarMode}}view-container\">\n @switch (calendarMode) { @case ('month') {\n <monthview\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipeToNext]=\"lockSwipeToNext\"\n [lockSwipes]=\"lockSwipes\"\n [sliderOptions]=\"sliderOptions\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\"\n >\n </monthview>\n } @case ('week') {\n <weekview\n [formatWeekTitle]=\"formatWeekTitle\"\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n [formatHourColumn]=\"formatHourColumn\"\n [startingDayWeek]=\"startingDayWeek\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [autoSelect]=\"autoSelect\"\n [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewHeaderTemplate]=\"weekviewHeaderTemplate||defaultWeekviewHeaderTemplate\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [weekviewInactiveAllDayEventSectionTemplate]=\"weekviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\n [weekviewInactiveNormalEventSectionTemplate]=\"weekviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipeToNext]=\"lockSwipeToNext\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [sliderOptions]=\"sliderOptions\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onDayHeaderSelected)=\"daySelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\"\n >\n </weekview>\n } @case ('day') {\n <dayview\n [formatDayTitle]=\"formatDayTitle\"\n [formatHourColumn]=\"formatHourColumn\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewCategoryItemTemplate]=\"dayviewCategoryItemTemplate||defaultCategoryItemTemplate\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\"\n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [dayviewInactiveAllDayEventSectionTemplate]=\"dayviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\n [dayviewInactiveNormalEventSectionTemplate]=\"dayviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipeToNext]=\"lockSwipeToNext\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [sliderOptions]=\"sliderOptions\"\n (onRangeChanged)=\"rangeChanged($event)\"\n [dayviewCategorySource]=\"dayviewCategorySource\"\n [dayviewShowCategoryView]=\"dayviewShowCategoryView\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\"\n >\n </dayview>\n } }\n</div>\n", styles: [":host>div{height:100%}.event-detail-container{border-top:2px darkgrey solid}.no-events-label{font-weight:700;color:#a9a9a9;text-align:center}.event-detail{cursor:pointer;white-space:nowrap;text-overflow:ellipsis}.event-category-detail{margin-left:10px}.monthview-eventdetail-timecolumn{width:110px;overflow:hidden}.calendar-event-inner{overflow:hidden;background-color:#3a87ad;color:#fff;height:100%;width:100%;padding:2px;line-height:15px;text-align:initial}@media(max-width:750px){.calendar-event-inner{font-size:12px}}\n"] }]
2076
2133
  }], ctorParameters: () => [{ type: CalendarService }, { type: undefined, decorators: [{
2077
2134
  type: Inject,
2078
2135
  args: [LOCALE_ID]
2079
- }] }, { type: i0.NgZone }], propDecorators: { currentDate: [{
2136
+ }] }], propDecorators: { currentDate: [{
2080
2137
  type: Input
2081
2138
  }], eventSource: [{
2082
2139
  type: Input
@@ -2190,25 +2247,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
2190
2247
  type: Output
2191
2248
  }] } });
2192
2249
 
2193
- class NgCalendarModule {
2194
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2195
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: NgCalendarModule, declarations: [MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositionScrollComponent], imports: [IonicModule, CommonModule], exports: [CalendarComponent] }); }
2196
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgCalendarModule, imports: [IonicModule, CommonModule] }); }
2197
- }
2198
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgCalendarModule, decorators: [{
2199
- type: NgModule,
2200
- args: [{
2201
- declarations: [
2202
- MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositionScrollComponent
2203
- ],
2204
- imports: [IonicModule, CommonModule],
2205
- exports: [CalendarComponent]
2206
- }]
2207
- }] });
2208
-
2209
2250
  /**
2210
2251
  * Generated bundle index. Do not edit.
2211
2252
  */
2212
2253
 
2213
- export { CalendarComponent, NgCalendarModule, Step };
2254
+ export { CalendarComponent, Step };
2214
2255
  //# sourceMappingURL=pieninck-ionic2-calendar.mjs.map