@progress/kendo-angular-scheduler 21.1.1-develop.1 → 21.2.0-develop.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 (37) hide show
  1. package/esm2022/editing/date-time-picker.component.mjs +59 -56
  2. package/esm2022/editing/edit-dialog.component.mjs +373 -359
  3. package/esm2022/editing/recurrence/recurrence-editor.component.mjs +262 -253
  4. package/esm2022/editing/recurrence/recurrence-frequency-editor.component.mjs +44 -41
  5. package/esm2022/editing/recurrence/recurrence-monthly-yearly-editor.component.mjs +190 -193
  6. package/esm2022/editing/recurrence/recurrence-weekday-rule-editor.component.mjs +44 -43
  7. package/esm2022/editing/resource-multiple-editor.component.mjs +49 -41
  8. package/esm2022/editing/resource-single-editor.component.mjs +35 -31
  9. package/esm2022/editing/timezone-editor.component.mjs +20 -17
  10. package/esm2022/package-metadata.mjs +2 -2
  11. package/esm2022/pdf/pdf-command.directive.mjs +27 -17
  12. package/esm2022/scheduler.component.mjs +631 -625
  13. package/esm2022/toolbar/toolbar.component.mjs +37 -37
  14. package/esm2022/toolbar/view-selector.component.mjs +42 -33
  15. package/esm2022/views/agenda/agenda-header-item.component.mjs +23 -19
  16. package/esm2022/views/agenda/agenda-header.component.mjs +28 -26
  17. package/esm2022/views/agenda/agenda-task-item.component.mjs +49 -29
  18. package/esm2022/views/agenda/agenda-view-list.component.mjs +117 -95
  19. package/esm2022/views/common/resize-hint.component.mjs +16 -9
  20. package/esm2022/views/common/view-footer.component.mjs +27 -25
  21. package/esm2022/views/day-time/day-time-view-item.component.mjs +125 -85
  22. package/esm2022/views/month/month-slot.component.mjs +39 -29
  23. package/esm2022/views/month/month-view-item.component.mjs +81 -61
  24. package/esm2022/views/month/month-view-renderer.component.mjs +349 -281
  25. package/esm2022/views/multi-day/day-view.component.mjs +72 -69
  26. package/esm2022/views/multi-day/multi-day-view-renderer.component.mjs +665 -515
  27. package/esm2022/views/multi-day/multi-day-view.component.mjs +76 -73
  28. package/esm2022/views/multi-day/week-view.component.mjs +78 -75
  29. package/esm2022/views/multi-day/work-week-view.component.mjs +80 -77
  30. package/esm2022/views/timeline/timeline-month-view.component.mjs +74 -71
  31. package/esm2022/views/timeline/timeline-multi-day-view.component.mjs +449 -359
  32. package/esm2022/views/timeline/timeline-view.component.mjs +68 -65
  33. package/esm2022/views/timeline/timeline-week-view.component.mjs +74 -71
  34. package/esm2022/views/year/year-view-internal.component.mjs +151 -131
  35. package/fesm2022/progress-kendo-angular-scheduler.mjs +4448 -3889
  36. package/package.json +15 -15
  37. package/schematics/ngAdd/index.js +7 -3
package/esm2022/views/month/month-view-renderer.component.mjs CHANGED
@@ -24,7 +24,7 @@ import { ResizeHintComponent } from '../common/resize-hint.component';
24
24
  import { HintContainerComponent } from '../common/hint-container.component';
25
25
  import { FocusableDirective } from '../../navigation/focusable.directive';
26
26
  import { MonthSlotComponent } from './month-slot.component';
27
- import { NgIf, NgFor, NgTemplateOutlet, NgClass, NgStyle, AsyncPipe } from '@angular/common';
27
+ import { NgTemplateOutlet, NgClass, NgStyle, AsyncPipe } from '@angular/common';
28
28
  import * as i0 from "@angular/core";
29
29
  import * as i1 from "../view-context.service";
30
30
  import * as i2 from "../view-state.service";
@@ -255,157 +255,191 @@ export class MonthViewRendererComponent extends BaseView {
255
255
  return weeks;
256
256
  }
257
257
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
258
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MonthViewRendererComponent, isStandalone: true, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
258
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MonthViewRendererComponent, isStandalone: true, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
259
259
  MonthSlotService
260
260
  ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
261
261
  <table class="k-scheduler-layout k-scheduler-monthview">
262
- <tbody>
263
- <tr class="k-scheduler-head">
264
- <td *ngIf="verticalResources.length">
265
- <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
266
- <table class="k-scheduler-table" aria-hidden="true">
267
- <tbody>
268
- <tr>
269
- <th class="k-scheduler-cell k-heading-cell"></th>
270
- </tr>
271
- </tbody>
272
- </table>
273
- </div>
274
- </td>
275
- <td>
276
- <div class="k-scheduler-header" #header>
277
- <div class="k-scheduler-header-wrap" #headerWrap>
278
- <!-- Days of the weeks titles -->
279
- <table class="k-scheduler-table" aria-hidden="true">
280
- <tbody>
281
- <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex">
282
- <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex"
283
- class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
284
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
285
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
286
- </th>
287
- </tr>
288
- <tr>
289
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex">
290
- <th *ngFor="let day of weeks[0]; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
291
- {{ day | kendoDate: 'EEEE' }}
292
- </th>
293
- </ng-container>
294
- </tr>
295
- </tbody>
296
- </table>
297
- </div>
298
- </div>
299
- </td>
300
- </tr>
301
- <tr class="k-scheduler-body">
302
- <td *ngIf="verticalResources.length">
303
- <div class="k-scheduler-times k-scheduler-resources" #times>
304
- <table class="k-scheduler-table" #timesTable aria-hidden="true">
305
- <tbody>
306
- <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
307
- <tr>
308
- <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex">
309
- <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
310
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
311
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
312
- [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
313
- </th>
314
- </ng-container>
315
- <th class="k-slot-cell k-heading-cell k-empty-slot">
316
- </th>
317
- </tr>
318
- <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
319
- <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
320
- </tr>
321
- </ng-container>
322
- </tbody>
323
- </table>
324
- </div>
325
- </td>
326
- <td>
327
- <div
328
- class="k-scheduler-content"
329
- tabindex="0"
330
- #content
331
- role="group"
332
- [attr.aria-owns]="matchOwned(items | async)"
333
- [style.overflowY]="'auto'">
334
- <!-- Main content -->
335
- <table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
336
- <tbody>
337
- <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
338
- <tr *ngFor="let week of weeks; let rangeIndex = index; trackBy: itemIndex">
339
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
340
- <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
341
- [monthSlot]="day"
342
- [eventHeight]="eventHeight"
343
- [eventsPerDay]="eventsPerDay"
344
- [adaptiveSlotHeight]="adaptiveSlotHeight"
345
- [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
346
- [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
347
- [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
348
- [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
349
- [title]="cellTitle(day)"
262
+ <tbody>
263
+ <tr class="k-scheduler-head">
264
+ @if (verticalResources.length) {
265
+ <td>
266
+ @if (verticalResources.length) {
267
+ <div class="k-scheduler-times" #timesHeader>
268
+ <table class="k-scheduler-table" aria-hidden="true">
269
+ <tbody>
270
+ <tr>
271
+ <th class="k-scheduler-cell k-heading-cell"></th>
272
+ </tr>
273
+ </tbody>
274
+ </table>
275
+ </div>
276
+ }
277
+ </td>
278
+ }
279
+ <td>
280
+ <div class="k-scheduler-header" #header>
281
+ <div class="k-scheduler-header-wrap" #headerWrap>
282
+ <!-- Days of the weeks titles -->
283
+ <table class="k-scheduler-table" aria-hidden="true">
284
+ <tbody>
285
+ @for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
286
+ <tr>
287
+ @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
288
+ <th
289
+ class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
290
+ @if (!groupHeaderTemplateRef) {
291
+ {{ getField(item, resource.textField) }}
292
+ }
293
+ @if (groupHeaderTemplateRef) {
294
+ <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
295
+ }
296
+ </th>
297
+ }
298
+ </tr>
299
+ }
300
+ <tr>
301
+ @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
302
+ @for (day of weeks[0]; track itemIndex($index, day)) {
303
+ <th class="k-scheduler-cell k-heading-cell">
304
+ {{ day | kendoDate: 'EEEE' }}
305
+ </th>
306
+ }
307
+ }
308
+ </tr>
309
+ </tbody>
310
+ </table>
311
+ </div>
312
+ </div>
313
+ </td>
314
+ </tr>
315
+ <tr class="k-scheduler-body">
316
+ @if (verticalResources.length) {
317
+ <td>
318
+ <div class="k-scheduler-times k-scheduler-resources" #times>
319
+ <table class="k-scheduler-table" #timesTable aria-hidden="true">
320
+ <tbody>
321
+ @for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
322
+ <tr>
323
+ @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
324
+ @if (verticalItem(leafIndex, resourceIndex)) {
325
+ <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
326
+ @if (!groupHeaderTemplateRef) {
327
+ {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
328
+ }
329
+ @if (groupHeaderTemplateRef) {
330
+ <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
331
+ [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
332
+ }
333
+ </th>
334
+ }
335
+ }
336
+ <th class="k-slot-cell k-heading-cell k-empty-slot">
337
+ </th>
338
+ </tr>
339
+ @for (index of (numberOfWeeks - 1) | repeat; track itemIndex($index, index)) {
340
+ <tr>
341
+ <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
342
+ </tr>
343
+ }
344
+ }
345
+ </tbody>
346
+ </table>
347
+ </div>
348
+ </td>
349
+ }
350
+ <td>
351
+ <div
352
+ class="k-scheduler-content"
353
+ tabindex="0"
354
+ #content
355
+ role="group"
356
+ [attr.aria-owns]="matchOwned(items | async)"
357
+ [style.overflowY]="'auto'">
358
+ <!-- Main content -->
359
+ <table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
360
+ <tbody>
361
+ @for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
362
+ @for (week of weeks; track itemIndex(rangeIndex, week); let rangeIndex = $index) {
363
+ <tr>
364
+ @for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
365
+ @for (day of week; track itemIndex(index, day); let index = $index) {
366
+ <td
367
+ [monthSlot]="day"
368
+ [eventHeight]="eventHeight"
369
+ [eventsPerDay]="eventsPerDay"
370
+ [adaptiveSlotHeight]="adaptiveSlotHeight"
371
+ [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
372
+ [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
373
+ [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
374
+ [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
375
+ [title]="cellTitle(day)"
350
376
  [class.k-selected]="isSlotSelected({
351
377
  start: toPlainDate(day),
352
378
  end: addDay(toPlainDate(day)),
353
379
  isAllDay: true,
354
380
  resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
355
381
  })"
356
- class="k-scheduler-cell"
357
- [class.k-other-month]="isDayInPreviousMonth(day) || isDayInNextMonth(day)"
358
- >
359
- </td>
360
- </ng-container>
361
- </tr>
362
- </ng-container>
363
- </tbody>
364
- </table>
365
- <ng-container *ngFor="let item of items | async; trackBy: itemIndex">
366
- <div *ngFor="let itemResource of item.resources; trackBy: itemIndex"
367
- [ngClass]="getEventClasses(item, itemResource.resources)"
368
- [ngStyle]="getEventStyles(item, itemResource)"
369
- role="button"
370
- [kendoSchedulerFocusIndex]="itemResource.leafIdx"
371
- [id]="item.elementId + '_' + itemResource.leafIdx"
372
- monthViewItem
373
- [editable]="editable"
374
- [item]="item"
375
- [index]="item.index"
376
- [rangeIndex]="item.rangeIndex"
377
- [eventTemplate]="eventTemplateRef"
378
- [resources]="itemResource.resources"
379
- [resourceIndex]="itemResource.leafIdx">
380
- </div>
381
- </ng-container>
382
- <kendo-hint-container #hintContainer>
383
- <ng-template>
384
- <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
385
- class="k-event-drag-hint"
386
- monthViewItem
387
- [ngStyle]="hint.style"
388
- [ngClass]="hint.class"
389
- [dragHint]="true"
390
- [eventTemplate]="eventTemplateRef"
391
- [item]="hint.item"
392
- [resources]="hint.resources">
393
- </div>
394
-
395
- <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
396
- kendoResizeHint
397
- [hint]="hint"
398
- [ngClass]="hint.class"
399
- [format]="resizeHintFormat">
400
- </div>
401
- </ng-template>
402
- </kendo-hint-container>
382
+ class="k-scheduler-cell"
383
+ [class.k-other-month]="isDayInPreviousMonth(day) || isDayInNextMonth(day)"
384
+ >
385
+ </td>
386
+ }
387
+ }
388
+ </tr>
389
+ }
390
+ }
391
+ </tbody>
392
+ </table>
393
+ @for (item of items | async; track itemIndex($index, item)) {
394
+ @for (itemResource of item.resources; track itemIndex($index, itemResource)) {
395
+ <div
396
+ [ngClass]="getEventClasses(item, itemResource.resources)"
397
+ [ngStyle]="getEventStyles(item, itemResource)"
398
+ role="button"
399
+ [kendoSchedulerFocusIndex]="itemResource.leafIdx"
400
+ [id]="item.elementId + '_' + itemResource.leafIdx"
401
+ monthViewItem
402
+ [editable]="editable"
403
+ [item]="item"
404
+ [index]="item.index"
405
+ [rangeIndex]="item.rangeIndex"
406
+ [eventTemplate]="eventTemplateRef"
407
+ [resources]="itemResource.resources"
408
+ [resourceIndex]="itemResource.leafIdx">
409
+ </div>
410
+ }
411
+ }
412
+ <kendo-hint-container #hintContainer>
413
+ <ng-template>
414
+ @for (hint of dragHints; track itemIndex($index, hint)) {
415
+ <div
416
+ class="k-event-drag-hint"
417
+ monthViewItem
418
+ [ngStyle]="hint.style"
419
+ [ngClass]="hint.class"
420
+ [dragHint]="true"
421
+ [eventTemplate]="eventTemplateRef"
422
+ [item]="hint.item"
423
+ [resources]="hint.resources">
424
+ </div>
425
+ }
426
+
427
+ @for (hint of resizeHints; track itemIndex($index, hint)) {
428
+ <div
429
+ kendoResizeHint
430
+ [hint]="hint"
431
+ [ngClass]="hint.class"
432
+ [format]="resizeHintFormat">
403
433
  </div>
404
- </td>
405
- </tr>
406
- </tbody>
434
+ }
435
+ </ng-template>
436
+ </kendo-hint-container>
437
+ </div>
438
+ </td>
439
+ </tr>
440
+ </tbody>
407
441
  </table>
408
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "eventsPerDay", "eventHeight", "adaptiveSlotHeight", "monthSlot"] }, { kind: "component", type: MonthViewItemComponent, selector: "[monthViewItem]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "pipe", type: RepeatPipe, name: "repeat" }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
442
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "eventsPerDay", "eventHeight", "adaptiveSlotHeight", "monthSlot"] }, { kind: "component", type: MonthViewItemComponent, selector: "[monthViewItem]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "pipe", type: RepeatPipe, name: "repeat" }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
409
443
  }
410
444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
411
445
  type: Component,
@@ -417,155 +451,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
417
451
  ],
418
452
  template: `
419
453
  <table class="k-scheduler-layout k-scheduler-monthview">
420
- <tbody>
421
- <tr class="k-scheduler-head">
422
- <td *ngIf="verticalResources.length">
423
- <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
424
- <table class="k-scheduler-table" aria-hidden="true">
425
- <tbody>
426
- <tr>
427
- <th class="k-scheduler-cell k-heading-cell"></th>
428
- </tr>
429
- </tbody>
430
- </table>
431
- </div>
432
- </td>
433
- <td>
434
- <div class="k-scheduler-header" #header>
435
- <div class="k-scheduler-header-wrap" #headerWrap>
436
- <!-- Days of the weeks titles -->
437
- <table class="k-scheduler-table" aria-hidden="true">
438
- <tbody>
439
- <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex">
440
- <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex"
441
- class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
442
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
443
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
444
- </th>
445
- </tr>
446
- <tr>
447
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex">
448
- <th *ngFor="let day of weeks[0]; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
449
- {{ day | kendoDate: 'EEEE' }}
450
- </th>
451
- </ng-container>
452
- </tr>
453
- </tbody>
454
- </table>
455
- </div>
456
- </div>
457
- </td>
458
- </tr>
459
- <tr class="k-scheduler-body">
460
- <td *ngIf="verticalResources.length">
461
- <div class="k-scheduler-times k-scheduler-resources" #times>
462
- <table class="k-scheduler-table" #timesTable aria-hidden="true">
463
- <tbody>
464
- <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
465
- <tr>
466
- <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex">
467
- <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
468
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
469
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
470
- [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
471
- </th>
472
- </ng-container>
473
- <th class="k-slot-cell k-heading-cell k-empty-slot">
474
- </th>
475
- </tr>
476
- <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
477
- <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
478
- </tr>
479
- </ng-container>
480
- </tbody>
481
- </table>
482
- </div>
483
- </td>
484
- <td>
485
- <div
486
- class="k-scheduler-content"
487
- tabindex="0"
488
- #content
489
- role="group"
490
- [attr.aria-owns]="matchOwned(items | async)"
491
- [style.overflowY]="'auto'">
492
- <!-- Main content -->
493
- <table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
494
- <tbody>
495
- <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
496
- <tr *ngFor="let week of weeks; let rangeIndex = index; trackBy: itemIndex">
497
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
498
- <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
499
- [monthSlot]="day"
500
- [eventHeight]="eventHeight"
501
- [eventsPerDay]="eventsPerDay"
502
- [adaptiveSlotHeight]="adaptiveSlotHeight"
503
- [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
504
- [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
505
- [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
506
- [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
507
- [title]="cellTitle(day)"
454
+ <tbody>
455
+ <tr class="k-scheduler-head">
456
+ @if (verticalResources.length) {
457
+ <td>
458
+ @if (verticalResources.length) {
459
+ <div class="k-scheduler-times" #timesHeader>
460
+ <table class="k-scheduler-table" aria-hidden="true">
461
+ <tbody>
462
+ <tr>
463
+ <th class="k-scheduler-cell k-heading-cell"></th>
464
+ </tr>
465
+ </tbody>
466
+ </table>
467
+ </div>
468
+ }
469
+ </td>
470
+ }
471
+ <td>
472
+ <div class="k-scheduler-header" #header>
473
+ <div class="k-scheduler-header-wrap" #headerWrap>
474
+ <!-- Days of the weeks titles -->
475
+ <table class="k-scheduler-table" aria-hidden="true">
476
+ <tbody>
477
+ @for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
478
+ <tr>
479
+ @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
480
+ <th
481
+ class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
482
+ @if (!groupHeaderTemplateRef) {
483
+ {{ getField(item, resource.textField) }}
484
+ }
485
+ @if (groupHeaderTemplateRef) {
486
+ <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
487
+ }
488
+ </th>
489
+ }
490
+ </tr>
491
+ }
492
+ <tr>
493
+ @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
494
+ @for (day of weeks[0]; track itemIndex($index, day)) {
495
+ <th class="k-scheduler-cell k-heading-cell">
496
+ {{ day | kendoDate: 'EEEE' }}
497
+ </th>
498
+ }
499
+ }
500
+ </tr>
501
+ </tbody>
502
+ </table>
503
+ </div>
504
+ </div>
505
+ </td>
506
+ </tr>
507
+ <tr class="k-scheduler-body">
508
+ @if (verticalResources.length) {
509
+ <td>
510
+ <div class="k-scheduler-times k-scheduler-resources" #times>
511
+ <table class="k-scheduler-table" #timesTable aria-hidden="true">
512
+ <tbody>
513
+ @for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
514
+ <tr>
515
+ @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
516
+ @if (verticalItem(leafIndex, resourceIndex)) {
517
+ <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
518
+ @if (!groupHeaderTemplateRef) {
519
+ {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
520
+ }
521
+ @if (groupHeaderTemplateRef) {
522
+ <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
523
+ [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
524
+ }
525
+ </th>
526
+ }
527
+ }
528
+ <th class="k-slot-cell k-heading-cell k-empty-slot">
529
+ </th>
530
+ </tr>
531
+ @for (index of (numberOfWeeks - 1) | repeat; track itemIndex($index, index)) {
532
+ <tr>
533
+ <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
534
+ </tr>
535
+ }
536
+ }
537
+ </tbody>
538
+ </table>
539
+ </div>
540
+ </td>
541
+ }
542
+ <td>
543
+ <div
544
+ class="k-scheduler-content"
545
+ tabindex="0"
546
+ #content
547
+ role="group"
548
+ [attr.aria-owns]="matchOwned(items | async)"
549
+ [style.overflowY]="'auto'">
550
+ <!-- Main content -->
551
+ <table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
552
+ <tbody>
553
+ @for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
554
+ @for (week of weeks; track itemIndex(rangeIndex, week); let rangeIndex = $index) {
555
+ <tr>
556
+ @for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
557
+ @for (day of week; track itemIndex(index, day); let index = $index) {
558
+ <td
559
+ [monthSlot]="day"
560
+ [eventHeight]="eventHeight"
561
+ [eventsPerDay]="eventsPerDay"
562
+ [adaptiveSlotHeight]="adaptiveSlotHeight"
563
+ [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
564
+ [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
565
+ [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
566
+ [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
567
+ [title]="cellTitle(day)"
508
568
  [class.k-selected]="isSlotSelected({
509
569
  start: toPlainDate(day),
510
570
  end: addDay(toPlainDate(day)),
511
571
  isAllDay: true,
512
572
  resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
513
573
  })"
514
- class="k-scheduler-cell"
515
- [class.k-other-month]="isDayInPreviousMonth(day) || isDayInNextMonth(day)"
516
- >
517
- </td>
518
- </ng-container>
519
- </tr>
520
- </ng-container>
521
- </tbody>
522
- </table>
523
- <ng-container *ngFor="let item of items | async; trackBy: itemIndex">
524
- <div *ngFor="let itemResource of item.resources; trackBy: itemIndex"
525
- [ngClass]="getEventClasses(item, itemResource.resources)"
526
- [ngStyle]="getEventStyles(item, itemResource)"
527
- role="button"
528
- [kendoSchedulerFocusIndex]="itemResource.leafIdx"
529
- [id]="item.elementId + '_' + itemResource.leafIdx"
530
- monthViewItem
531
- [editable]="editable"
532
- [item]="item"
533
- [index]="item.index"
534
- [rangeIndex]="item.rangeIndex"
535
- [eventTemplate]="eventTemplateRef"
536
- [resources]="itemResource.resources"
537
- [resourceIndex]="itemResource.leafIdx">
538
- </div>
539
- </ng-container>
540
- <kendo-hint-container #hintContainer>
541
- <ng-template>
542
- <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
543
- class="k-event-drag-hint"
544
- monthViewItem
545
- [ngStyle]="hint.style"
546
- [ngClass]="hint.class"
547
- [dragHint]="true"
548
- [eventTemplate]="eventTemplateRef"
549
- [item]="hint.item"
550
- [resources]="hint.resources">
551
- </div>
552
-
553
- <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
554
- kendoResizeHint
555
- [hint]="hint"
556
- [ngClass]="hint.class"
557
- [format]="resizeHintFormat">
558
- </div>
559
- </ng-template>
560
- </kendo-hint-container>
574
+ class="k-scheduler-cell"
575
+ [class.k-other-month]="isDayInPreviousMonth(day) || isDayInNextMonth(day)"
576
+ >
577
+ </td>
578
+ }
579
+ }
580
+ </tr>
581
+ }
582
+ }
583
+ </tbody>
584
+ </table>
585
+ @for (item of items | async; track itemIndex($index, item)) {
586
+ @for (itemResource of item.resources; track itemIndex($index, itemResource)) {
587
+ <div
588
+ [ngClass]="getEventClasses(item, itemResource.resources)"
589
+ [ngStyle]="getEventStyles(item, itemResource)"
590
+ role="button"
591
+ [kendoSchedulerFocusIndex]="itemResource.leafIdx"
592
+ [id]="item.elementId + '_' + itemResource.leafIdx"
593
+ monthViewItem
594
+ [editable]="editable"
595
+ [item]="item"
596
+ [index]="item.index"
597
+ [rangeIndex]="item.rangeIndex"
598
+ [eventTemplate]="eventTemplateRef"
599
+ [resources]="itemResource.resources"
600
+ [resourceIndex]="itemResource.leafIdx">
601
+ </div>
602
+ }
603
+ }
604
+ <kendo-hint-container #hintContainer>
605
+ <ng-template>
606
+ @for (hint of dragHints; track itemIndex($index, hint)) {
607
+ <div
608
+ class="k-event-drag-hint"
609
+ monthViewItem
610
+ [ngStyle]="hint.style"
611
+ [ngClass]="hint.class"
612
+ [dragHint]="true"
613
+ [eventTemplate]="eventTemplateRef"
614
+ [item]="hint.item"
615
+ [resources]="hint.resources">
616
+ </div>
617
+ }
618
+
619
+ @for (hint of resizeHints; track itemIndex($index, hint)) {
620
+ <div
621
+ kendoResizeHint
622
+ [hint]="hint"
623
+ [ngClass]="hint.class"
624
+ [format]="resizeHintFormat">
561
625
  </div>
562
- </td>
563
- </tr>
564
- </tbody>
626
+ }
627
+ </ng-template>
628
+ </kendo-hint-container>
629
+ </div>
630
+ </td>
631
+ </tr>
632
+ </tbody>
565
633
  </table>
566
- `,
634
+ `,
567
635
  standalone: true,
568
- imports: [NgIf, NgFor, NgTemplateOutlet, NgClass, MonthSlotComponent, MonthViewItemComponent, NgStyle, FocusableDirective, HintContainerComponent, ResizeHintComponent, RepeatPipe, ResourceIteratorPipe, DatePipe, AsyncPipe]
636
+ imports: [NgTemplateOutlet, NgClass, MonthSlotComponent, MonthViewItemComponent, NgStyle, FocusableDirective, HintContainerComponent, ResizeHintComponent, RepeatPipe, ResourceIteratorPipe, DatePipe, AsyncPipe]
569
637
  }]
570
638
  }], ctorParameters: () => [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.ScrollbarWidthService }], propDecorators: { monthDaySlotTemplate: [{
571
639
  type: Input