@progress/kendo-angular-scheduler 16.0.0-develop.9 → 16.0.1-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 (120) hide show
  1. package/esm2020/data-binding.directive.mjs +3 -3
  2. package/esm2020/editing/date-time-picker.component.mjs +8 -4
  3. package/esm2020/editing/dialogs.service.mjs +3 -3
  4. package/esm2020/editing/edit-dialog-template.directive.mjs +3 -3
  5. package/esm2020/editing/edit-dialog.component.mjs +3 -3
  6. package/esm2020/editing/edit.service.mjs +3 -3
  7. package/esm2020/editing/local-data-changes.service.mjs +3 -3
  8. package/esm2020/editing/recurrence/end-rule-radio-button.directive.mjs +3 -3
  9. package/esm2020/editing/recurrence/localization/custom-messages.component.mjs +3 -3
  10. package/esm2020/editing/recurrence/localization/localized-messages.directive.mjs +3 -3
  11. package/esm2020/editing/recurrence/localization/messages.mjs +3 -3
  12. package/esm2020/editing/recurrence/localization/recurrence-localization.service.mjs +3 -3
  13. package/esm2020/editing/recurrence/recurrence-editor.component.mjs +3 -3
  14. package/esm2020/editing/recurrence/recurrence-end-rule-editor.component.mjs +6 -4
  15. package/esm2020/editing/recurrence/recurrence-frequency-editor.component.mjs +3 -3
  16. package/esm2020/editing/recurrence/recurrence-interval-editor.component.mjs +3 -3
  17. package/esm2020/editing/recurrence/recurrence-monthly-yearly-editor.component.mjs +3 -3
  18. package/esm2020/editing/recurrence/recurrence-weekday-rule-editor.component.mjs +3 -3
  19. package/esm2020/editing/recurrence/recurrence.service.mjs +3 -3
  20. package/esm2020/editing/recurrence/repeat-on-radio-button.directive.mjs +3 -3
  21. package/esm2020/editing/resource-editor-base.mjs +3 -3
  22. package/esm2020/editing/resource-multiple-editor.component.mjs +3 -3
  23. package/esm2020/editing/resource-single-editor.component.mjs +3 -3
  24. package/esm2020/editing/timezone-editor.component.mjs +3 -3
  25. package/esm2020/editing-directives/editing-directive-base.mjs +5 -4
  26. package/esm2020/editing-directives/reactive-editing.directive.mjs +7 -7
  27. package/esm2020/loading.component.mjs +3 -3
  28. package/esm2020/localization/custom-messages.component.mjs +3 -3
  29. package/esm2020/localization/localized-messages.directive.mjs +3 -3
  30. package/esm2020/localization/messages.mjs +3 -3
  31. package/esm2020/localization/scheduler-localization.service.mjs +3 -3
  32. package/esm2020/navigation/focus.service.mjs +3 -3
  33. package/esm2020/navigation/focusable.directive.mjs +3 -3
  34. package/esm2020/navigation/shortcuts.directive.mjs +3 -3
  35. package/esm2020/package-metadata.mjs +2 -2
  36. package/esm2020/pdf/pdf-command.directive.mjs +3 -3
  37. package/esm2020/pdf/pdf.component.mjs +4 -4
  38. package/esm2020/pdf/pdf.module.mjs +4 -4
  39. package/esm2020/pdf/pdf.service.mjs +3 -3
  40. package/esm2020/scheduler.component.mjs +3 -12
  41. package/esm2020/scheduler.module.mjs +4 -4
  42. package/esm2020/shared.module.mjs +4 -4
  43. package/esm2020/toolbar/navigation.component.mjs +4 -4
  44. package/esm2020/toolbar/toolbar-template.directive.mjs +3 -3
  45. package/esm2020/toolbar/toolbar.component.mjs +3 -3
  46. package/esm2020/toolbar/toolbar.module.mjs +4 -4
  47. package/esm2020/toolbar/toolbar.service.mjs +3 -3
  48. package/esm2020/toolbar/view-selector.component.mjs +3 -3
  49. package/esm2020/views/agenda/agenda-header-item.component.mjs +15 -3
  50. package/esm2020/views/agenda/agenda-header.component.mjs +13 -16
  51. package/esm2020/views/agenda/agenda-task-item.component.mjs +7 -3
  52. package/esm2020/views/agenda/agenda-view-internal.component.mjs +9 -9
  53. package/esm2020/views/agenda/agenda-view-list.component.mjs +10 -8
  54. package/esm2020/views/agenda/agenda-view.component.mjs +3 -3
  55. package/esm2020/views/agenda/agenda-view.module.mjs +4 -4
  56. package/esm2020/views/common/base-view.mjs +3 -3
  57. package/esm2020/views/common/configuration-view-base.mjs +3 -3
  58. package/esm2020/views/common/dom-events.service.mjs +3 -3
  59. package/esm2020/views/common/hint-container.component.mjs +3 -3
  60. package/esm2020/views/common/repeat.pipe.mjs +3 -3
  61. package/esm2020/views/common/resize-hint.component.mjs +3 -3
  62. package/esm2020/views/common/resource-iterator.pipe.mjs +3 -3
  63. package/esm2020/views/common/slot-selectable.directive.mjs +3 -3
  64. package/esm2020/views/common/view-footer.component.mjs +3 -3
  65. package/esm2020/views/common/views-shared.module.mjs +4 -4
  66. package/esm2020/views/common/work-hours-footer.directive.mjs +3 -3
  67. package/esm2020/views/day-time/day-time-view-base.mjs +3 -3
  68. package/esm2020/views/day-time/day-time-view-item.component.mjs +3 -3
  69. package/esm2020/views/day-time/day-time-view.component.mjs +3 -3
  70. package/esm2020/views/day-time/day-time.module.mjs +4 -4
  71. package/esm2020/views/day-time/event-slot.directive.mjs +6 -6
  72. package/esm2020/views/month/month-slot.component.mjs +3 -3
  73. package/esm2020/views/month/month-view-item.component.mjs +3 -3
  74. package/esm2020/views/month/month-view-renderer.component.mjs +297 -247
  75. package/esm2020/views/month/month-view.component.mjs +3 -3
  76. package/esm2020/views/month/month-view.module.mjs +4 -4
  77. package/esm2020/views/month/multi-week-view.component.mjs +3 -3
  78. package/esm2020/views/multi-day/day-view.component.mjs +3 -3
  79. package/esm2020/views/multi-day/multi-day-view-base.mjs +3 -3
  80. package/esm2020/views/multi-day/multi-day-view-renderer.component.mjs +505 -461
  81. package/esm2020/views/multi-day/multi-day-view.component.mjs +3 -3
  82. package/esm2020/views/multi-day/multi-day-view.module.mjs +4 -4
  83. package/esm2020/views/multi-day/week-view.component.mjs +3 -3
  84. package/esm2020/views/multi-day/work-week-view.component.mjs +3 -3
  85. package/esm2020/views/scheduler-view.directive.mjs +3 -3
  86. package/esm2020/views/templates/agenda-date-template.directive.mjs +3 -3
  87. package/esm2020/views/templates/agenda-time-template.directive.mjs +3 -3
  88. package/esm2020/views/templates/all-day-event-template.directive.mjs +3 -3
  89. package/esm2020/views/templates/all-day-slot-template.directive.mjs +3 -3
  90. package/esm2020/views/templates/date-header-template.directive.mjs +3 -3
  91. package/esm2020/views/templates/event-template.directive.mjs +3 -3
  92. package/esm2020/views/templates/group-header-template.directive.mjs +3 -3
  93. package/esm2020/views/templates/major-time-header-template.directive.mjs +3 -3
  94. package/esm2020/views/templates/minor-time-header-template.directive.mjs +3 -3
  95. package/esm2020/views/templates/month-day-slot-template.directive.mjs +3 -3
  96. package/esm2020/views/templates/multi-week-day-slot-template.directive.mjs +3 -3
  97. package/esm2020/views/templates/time-slot-template.directive.mjs +3 -3
  98. package/esm2020/views/timeline/timeline-base.mjs +3 -3
  99. package/esm2020/views/timeline/timeline-month-view.component.mjs +3 -3
  100. package/esm2020/views/timeline/timeline-multi-day-view.component.mjs +381 -330
  101. package/esm2020/views/timeline/timeline-view.component.mjs +3 -3
  102. package/esm2020/views/timeline/timeline-view.module.mjs +4 -4
  103. package/esm2020/views/timeline/timeline-week-view.component.mjs +3 -3
  104. package/esm2020/views/timeline/utils.mjs +3 -3
  105. package/esm2020/views/view-context.service.mjs +3 -3
  106. package/esm2020/views/view-items/base-slot.directive.mjs +3 -3
  107. package/esm2020/views/view-items/base-view-item.mjs +3 -3
  108. package/esm2020/views/view-state.service.mjs +3 -3
  109. package/esm2020/views/year/year-view-internal.component.mjs +4 -4
  110. package/esm2020/views/year/year-view.component.mjs +3 -3
  111. package/esm2020/views/year/year-view.module.mjs +4 -4
  112. package/events/edit-event-base.d.ts +4 -0
  113. package/fesm2015/progress-kendo-angular-scheduler.mjs +1572 -1413
  114. package/fesm2020/progress-kendo-angular-scheduler.mjs +1572 -1413
  115. package/package.json +13 -13
  116. package/schematics/ngAdd/index.js +5 -4
  117. package/views/agenda/agenda-header-item.component.d.ts +3 -1
  118. package/views/agenda/agenda-task-item.component.d.ts +1 -0
  119. package/views/month/month-view-renderer.component.d.ts +2 -0
  120. package/views/timeline/timeline-multi-day-view.component.d.ts +4 -0
package/esm2020/views/timeline/timeline-multi-day-view.component.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, Input, NgZone, ViewChildren, QueryList, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
5
+ import { Component, Input, NgZone, ViewChildren, ViewChild, QueryList, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
6
6
  import { IntlService } from '@progress/kendo-angular-intl';
7
7
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
8
  import { ViewContextService } from '../view-context.service';
@@ -12,7 +12,7 @@ import { createTasks } from './utils';
12
12
  import { toPx } from '../utils';
13
13
  import { DayTimeViewComponent } from '../day-time/day-time-view.component';
14
14
  import { PDFService } from '../../pdf/pdf.service';
15
- import { ScrollbarWidthService } from '@progress/kendo-angular-common';
15
+ import { ScrollbarWidthService, isDocumentAvailable } from '@progress/kendo-angular-common';
16
16
  import * as i0 from "@angular/core";
17
17
  import * as i1 from "@progress/kendo-angular-l10n";
18
18
  import * as i2 from "../view-context.service";
@@ -27,9 +27,8 @@ import * as i10 from "../common/hint-container.component";
27
27
  import * as i11 from "../common/resize-hint.component";
28
28
  import * as i12 from "@angular/common";
29
29
  import * as i13 from "../../navigation/focusable.directive";
30
- import * as i14 from "../common/repeat.pipe";
31
- import * as i15 from "../common/resource-iterator.pipe";
32
- import * as i16 from "./utils";
30
+ import * as i14 from "../common/resource-iterator.pipe";
31
+ import * as i15 from "./utils";
33
32
  /**
34
33
  * @hidden
35
34
  */
@@ -44,6 +43,11 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
44
43
  get classNames() {
45
44
  return `k-scheduler-${this.viewName}-view`;
46
45
  }
46
+ get contentWidthPercentage() {
47
+ const expectedWidth = this.columnWidth * this.slotsCount;
48
+ const percentage = (expectedWidth / this.contentWidth) * 100;
49
+ return Math.max(percentage, 100);
50
+ }
47
51
  ngOnChanges(changes) {
48
52
  if (changes.columnWidth) {
49
53
  this.changes.next(null);
@@ -51,9 +55,14 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
51
55
  super.ngOnChanges(changes);
52
56
  }
53
57
  reflow() {
58
+ if (!isDocumentAvailable()) {
59
+ return;
60
+ }
54
61
  const slotService = this.slotService;
55
62
  this.updateContentHeight();
56
63
  slotService.containerSize = this.content.nativeElement.scrollWidth;
64
+ this.contentWidth = this.content.nativeElement.getBoundingClientRect().width;
65
+ this.cdr.detectChanges();
57
66
  const verticalResourceRows = this.verticalResources.length ? this.verticalResourceRows.toArray() : [];
58
67
  slotService.layoutTimeline(this.eventHeight, verticalResourceRows);
59
68
  if (verticalResourceRows.length) {
@@ -98,6 +107,9 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
98
107
  }
99
108
  return result;
100
109
  }
110
+ handleScroll() {
111
+ this.headerWrap.nativeElement.scrollLeft = this.content.nativeElement.scrollLeft;
112
+ }
101
113
  createTasks(items, dateRange) {
102
114
  return createTasks(dateRange.start, dateRange.end, items);
103
115
  }
@@ -126,182 +138,200 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
126
138
  return this.headerWrap.nativeElement.querySelector('tr:last-child').offsetTop;
127
139
  }
128
140
  }
129
- TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.PDFService }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
130
- TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: { name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
141
+ TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.PDFService }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
142
+ TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: { name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
131
143
  DayTimeSlotService
132
- ], viewQueries: [{ propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
133
- <div class="k-scheduler-layout k-scheduler-flex-layout" [ngClass]="classNames">
134
- <div class="k-scheduler-pane">
135
- <div class="k-scheduler-times" #timesHeader>
136
- <table class="k-scheduler-table" aria-hidden="true">
137
- <tr><th [style.height]="'auto'"></th></tr>
138
- <tr><th class="k-slot-cell"></th></tr>
139
- <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
140
- <th></th>
141
- </tr>
142
- </table>
143
- </div>
144
- <div class="k-scheduler-header k-state-default" #header >
145
- <div class="k-scheduler-header-wrap" #headerWrap>
146
- <ng-container *ngIf="showCurrentTime">
147
- <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
148
- #currentTimeArrow class="k-current-time k-current-time-arrow-down">
149
- </div>
150
- </ng-container>
151
- <table class="k-scheduler-table" aria-hidden="true">
152
- <colgroup>
153
- <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
154
- </colgroup>
155
- <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
156
- <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
157
- class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
158
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
159
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
160
- [ngTemplateOutletContext]="{ resource: item }"></ng-container>
161
- </th>
162
- </tr>
163
- <tr>
164
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
165
- <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
166
- <th [attr.colspan]="timeSlots.length" class="k-slot-cell">
167
- <span *ngIf="!dateHeaderTemplateRef" class="k-link" [ngClass]="{ 'k-nav-day': numberOfDays > 1 }" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
168
- <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
144
+ ], viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
145
+ <table class="k-scheduler-layout" [ngClass]="classNames">
146
+ <tbody>
147
+ <tr class="k-scheduler-head">
148
+ <td>
149
+ <div class="k-scheduler-times" #timesHeader>
150
+ <table class="k-scheduler-table" aria-hidden="true">
151
+ <tbody>
152
+ <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
153
+ <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
154
+ <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
155
+ <th class="k-scheduler-cell k-heading-cell"></th>
156
+ </tr>
157
+ </tbody>
158
+ </table>
159
+ </div>
160
+ </td>
161
+ <td>
162
+ <div class="k-scheduler-header" #header >
163
+ <div class="k-scheduler-header-wrap" #headerWrap>
164
+ <ng-container *ngIf="showCurrentTime">
165
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
166
+ #currentTimeArrow class="k-current-time k-current-time-arrow-down">
167
+ </div>
168
+ </ng-container>
169
+ <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
170
+ <tbody>
171
+ <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
172
+ <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
173
+ class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
174
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
175
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
176
+ [ngTemplateOutletContext]="{ resource: item }"></ng-container>
169
177
  </th>
170
- </ng-container>
171
- </ng-container>
172
- </tr>
173
- <tr>
174
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
175
- <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
176
- <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
177
- <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)">
178
- <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
179
- <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
180
- </th>
181
- <th *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef" [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}">
182
- <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
178
+ </tr>
179
+ <tr class="k-scheduler-date-group">
180
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
181
+ <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
182
+ <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
183
+ <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
184
+ <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
185
+ </th>
186
+ </ng-container>
187
+ </ng-container>
188
+ </tr>
189
+ <tr>
190
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
191
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
192
+ <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
193
+ <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
194
+ <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
195
+ <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
196
+ </th>
197
+ <th
198
+ *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef"
199
+ [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
200
+ class="k-scheduler-cell k-heading-cell"
201
+ >
202
+ <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
203
+ </ng-container>
204
+ </th>
183
205
  </ng-container>
184
- </th>
206
+ </ng-container>
185
207
  </ng-container>
186
- </ng-container>
187
- </ng-container>
188
- </tr>
189
- </table>
208
+ </tr>
209
+ </tbody>
210
+ </table>
211
+ </div>
190
212
  </div>
191
- </div>
192
- </div>
193
- <div class="k-scheduler-pane">
194
- <div class="k-scheduler-times" #times>
195
- <table class="k-scheduler-table" #timesTable aria-hidden="true">
196
- <tr *ngIf="!verticalResources.length">
197
- <th rowspan="1" #titleCell>
198
- {{ allEventsMessage }}
199
- </th>
200
- </tr>
201
- <ng-container *ngIf="verticalResources.length">
202
- <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
203
- <tr #verticalResourceRows>
204
- <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
205
- <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell">
206
- <div>
207
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
208
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
209
- [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
210
- </div>
213
+ </td>
214
+ </tr>
215
+ <tr class="k-scheduler-body">
216
+ <td>
217
+ <div class="k-scheduler-times" #times>
218
+ <table class="k-scheduler-table" #timesTable aria-hidden="true">
219
+ <tbody>
220
+ <tr *ngIf="!verticalResources.length">
221
+ <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
222
+ {{ allEventsMessage }}
211
223
  </th>
224
+ </tr>
225
+ <ng-container *ngIf="verticalResources.length">
226
+ <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
227
+ <tr #verticalResourceRows>
228
+ <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
229
+ <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
230
+ <div>
231
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
232
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
233
+ [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
234
+ </div>
235
+ </th>
236
+ </ng-container>
237
+ </tr>
238
+ </ng-container>
212
239
  </ng-container>
213
- </tr>
214
- </ng-container>
215
- </ng-container>
216
- </table>
217
- </div>
218
- <div
219
- class="k-scheduler-content"
220
- #content
221
- role="group"
222
- tabindex="0"
223
- [attr.aria-owns]="matchOwned(items | async | sort)">
224
- <ng-container *ngIf="showCurrentTime">
225
- <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
226
- class="k-current-time" #currentTimeMarker>
240
+ </tbody>
241
+ </table>
227
242
  </div>
228
- </ng-container>
229
- <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
230
- <colgroup>
231
- <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
232
- </colgroup>
233
- <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
234
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
235
- <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
236
- <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
237
- [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
238
- timeSlot #timeSlot="timeSlot"
239
- [date]="daySlot.start"
240
- [invariantStart]="slot.start"
241
- [invariantEnd]="slot.end"
242
- [workDayStart]="workDayStartTime"
243
- [workDayEnd]="workDayEndTime"
244
- [workWeekStart]="workWeekStart"
245
- [workWeekEnd]="workWeekEnd"
246
- selectableSlot
247
- [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
248
- [class.k-selected]="isSlotSelected({
249
- start: toPlainDateTime(daySlot.start, slot.start),
250
- end: toPlainDateTime(daySlot.start, slot.end),
251
- isAllDay: false,
252
- resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
253
- })"
254
- >
255
- <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
256
- [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
243
+ </td>
244
+ <td>
245
+ <div
246
+ class="k-scheduler-content"
247
+ #content
248
+ role="group"
249
+ tabindex="0"
250
+ (scroll)="handleScroll()"
251
+ [attr.aria-owns]="matchOwned(items | async | sort)">
252
+ <ng-container *ngIf="showCurrentTime">
253
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
254
+ class="k-current-time" #currentTimeMarker>
255
+ </div>
256
+ </ng-container>
257
+ <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
258
+ <tbody>
259
+ <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
260
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
261
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
262
+ <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
263
+ [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
264
+ timeSlot #timeSlot="timeSlot"
265
+ [date]="daySlot.start"
266
+ [invariantStart]="slot.start"
267
+ [invariantEnd]="slot.end"
268
+ [workDayStart]="workDayStartTime"
269
+ [workDayEnd]="workDayEndTime"
270
+ [workWeekStart]="workWeekStart"
271
+ [workWeekEnd]="workWeekEnd"
272
+ selectableSlot
273
+ [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
274
+ [class.k-selected]="isSlotSelected({
275
+ start: toPlainDateTime(daySlot.start, slot.start),
276
+ end: toPlainDateTime(daySlot.start, slot.end),
277
+ isAllDay: false,
278
+ resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
279
+ })"
280
+ class="k-scheduler-cell"
281
+ >
282
+ <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
283
+ [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
284
+ </ng-container>
285
+ </td>
286
+ </ng-container>
257
287
  </ng-container>
258
- </td>
259
- </ng-container>
288
+ </tr>
289
+ </tbody>
290
+ </table>
291
+ <ng-container *ngFor="let item of items | async | sort; trackBy: itemIndex;">
292
+ <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
293
+ [ngClass]="getEventClasses(item, itemResource.resources)"
294
+ [ngStyle]="getEventStyles(item, itemResource)"
295
+ role="button"
296
+ [kendoSchedulerFocusIndex]="itemResource.leafIdx"
297
+ [id]="item.elementId + '_' + itemResource.leafIdx"
298
+ dayTimeViewItem
299
+ [editable]="editable"
300
+ [item]="item"
301
+ [index]="item.index"
302
+ [rangeIndex]="item.rangeIndex"
303
+ [eventTemplate]="eventTemplateRef"
304
+ [resources]="itemResource.resources"
305
+ [resourceIndex]="itemResource.leafIdx">
306
+ </div>
260
307
  </ng-container>
261
- </tr>
262
- </table>
263
- <ng-container *ngFor="let item of items | async | sort; trackBy: itemIndex;">
264
- <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
265
- [ngClass]="getEventClasses(item, itemResource.resources)"
266
- [ngStyle]="getEventStyles(item, itemResource)"
267
- role="button"
268
- [kendoSchedulerFocusIndex]="itemResource.leafIdx"
269
- [id]="item.elementId + '_' + itemResource.leafIdx"
270
- dayTimeViewItem
271
- [editable]="editable"
272
- [item]="item"
273
- [index]="item.index"
274
- [rangeIndex]="item.rangeIndex"
275
- [eventTemplate]="eventTemplateRef"
276
- [resources]="itemResource.resources"
277
- [resourceIndex]="itemResource.leafIdx">
308
+ <kendo-hint-container #hintContainer>
309
+ <ng-template>
310
+ <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
311
+ class="k-event-drag-hint"
312
+ dayTimeViewItem
313
+ [ngStyle]="hint.style"
314
+ [ngClass]="hint.class"
315
+ [dragHint]="true"
316
+ [eventTemplate]="eventTemplateRef"
317
+ [item]="hint.item"
318
+ [resources]="hint.resources">
319
+ </div>
320
+ <div *ngIf="resizeHints && resizeHints.length"
321
+ kendoResizeHint
322
+ [hint]="resizeHints[0]"
323
+ [ngClass]="resizeHints[0].class"
324
+ [format]="resizeHintFormat">
325
+ </div>
326
+ </ng-template>
327
+ </kendo-hint-container>
278
328
  </div>
279
- </ng-container>
280
- <kendo-hint-container #hintContainer>
281
- <ng-template>
282
- <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
283
- class="k-event-drag-hint"
284
- dayTimeViewItem
285
- [ngStyle]="hint.style"
286
- [ngClass]="hint.class"
287
- [dragHint]="true"
288
- [eventTemplate]="eventTemplateRef"
289
- [item]="hint.item"
290
- [resources]="hint.resources">
291
- </div>
292
- <div *ngIf="resizeHints && resizeHints.length"
293
- kendoResizeHint
294
- [hint]="resizeHints[0]"
295
- [ngClass]="resizeHints[0].class"
296
- [format]="resizeHintFormat">
297
- </div>
298
- </ng-template>
299
- </kendo-hint-container>
300
- </div>
301
- </div>
302
- </div>
303
- `, isInline: true, dependencies: [{ kind: "directive", type: i8.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { kind: "component", type: i9.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { kind: "component", type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: i11.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "pipe", type: i14.RepeatPipe, name: "repeat" }, { kind: "pipe", type: i15.ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i4.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i12.AsyncPipe, name: "async" }, { kind: "pipe", type: i16.SortPipe, name: "sort" }] });
304
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
329
+ </td>
330
+ </tr>
331
+ </tbody>
332
+ </table>
333
+ `, isInline: true, dependencies: [{ kind: "directive", type: i8.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { kind: "component", type: i9.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { kind: "component", type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: i11.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "pipe", type: i14.ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i4.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i12.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.SortPipe, name: "sort" }] });
334
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
305
335
  type: Component,
306
336
  args: [{
307
337
  // eslint-disable-next-line @angular-eslint/component-selector
@@ -310,176 +340,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
310
340
  DayTimeSlotService
311
341
  ],
312
342
  template: `
313
- <div class="k-scheduler-layout k-scheduler-flex-layout" [ngClass]="classNames">
314
- <div class="k-scheduler-pane">
315
- <div class="k-scheduler-times" #timesHeader>
316
- <table class="k-scheduler-table" aria-hidden="true">
317
- <tr><th [style.height]="'auto'"></th></tr>
318
- <tr><th class="k-slot-cell"></th></tr>
319
- <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
320
- <th></th>
321
- </tr>
322
- </table>
323
- </div>
324
- <div class="k-scheduler-header k-state-default" #header >
325
- <div class="k-scheduler-header-wrap" #headerWrap>
326
- <ng-container *ngIf="showCurrentTime">
327
- <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
328
- #currentTimeArrow class="k-current-time k-current-time-arrow-down">
329
- </div>
330
- </ng-container>
331
- <table class="k-scheduler-table" aria-hidden="true">
332
- <colgroup>
333
- <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
334
- </colgroup>
335
- <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
336
- <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
337
- class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
338
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
339
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
340
- [ngTemplateOutletContext]="{ resource: item }"></ng-container>
341
- </th>
342
- </tr>
343
- <tr>
344
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
345
- <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
346
- <th [attr.colspan]="timeSlots.length" class="k-slot-cell">
347
- <span *ngIf="!dateHeaderTemplateRef" class="k-link" [ngClass]="{ 'k-nav-day': numberOfDays > 1 }" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
348
- <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
343
+ <table class="k-scheduler-layout" [ngClass]="classNames">
344
+ <tbody>
345
+ <tr class="k-scheduler-head">
346
+ <td>
347
+ <div class="k-scheduler-times" #timesHeader>
348
+ <table class="k-scheduler-table" aria-hidden="true">
349
+ <tbody>
350
+ <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
351
+ <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
352
+ <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
353
+ <th class="k-scheduler-cell k-heading-cell"></th>
354
+ </tr>
355
+ </tbody>
356
+ </table>
357
+ </div>
358
+ </td>
359
+ <td>
360
+ <div class="k-scheduler-header" #header >
361
+ <div class="k-scheduler-header-wrap" #headerWrap>
362
+ <ng-container *ngIf="showCurrentTime">
363
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
364
+ #currentTimeArrow class="k-current-time k-current-time-arrow-down">
365
+ </div>
366
+ </ng-container>
367
+ <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
368
+ <tbody>
369
+ <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
370
+ <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
371
+ class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
372
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
373
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
374
+ [ngTemplateOutletContext]="{ resource: item }"></ng-container>
349
375
  </th>
350
- </ng-container>
351
- </ng-container>
352
- </tr>
353
- <tr>
354
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
355
- <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
356
- <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
357
- <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)">
358
- <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
359
- <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
360
- </th>
361
- <th *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef" [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}">
362
- <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
376
+ </tr>
377
+ <tr class="k-scheduler-date-group">
378
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
379
+ <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
380
+ <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
381
+ <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
382
+ <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
383
+ </th>
384
+ </ng-container>
385
+ </ng-container>
386
+ </tr>
387
+ <tr>
388
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
389
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
390
+ <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
391
+ <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
392
+ <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
393
+ <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
394
+ </th>
395
+ <th
396
+ *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef"
397
+ [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
398
+ class="k-scheduler-cell k-heading-cell"
399
+ >
400
+ <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
401
+ </ng-container>
402
+ </th>
363
403
  </ng-container>
364
- </th>
404
+ </ng-container>
365
405
  </ng-container>
366
- </ng-container>
367
- </ng-container>
368
- </tr>
369
- </table>
406
+ </tr>
407
+ </tbody>
408
+ </table>
409
+ </div>
370
410
  </div>
371
- </div>
372
- </div>
373
- <div class="k-scheduler-pane">
374
- <div class="k-scheduler-times" #times>
375
- <table class="k-scheduler-table" #timesTable aria-hidden="true">
376
- <tr *ngIf="!verticalResources.length">
377
- <th rowspan="1" #titleCell>
378
- {{ allEventsMessage }}
379
- </th>
380
- </tr>
381
- <ng-container *ngIf="verticalResources.length">
382
- <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
383
- <tr #verticalResourceRows>
384
- <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
385
- <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell">
386
- <div>
387
- <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
388
- <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
389
- [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
390
- </div>
411
+ </td>
412
+ </tr>
413
+ <tr class="k-scheduler-body">
414
+ <td>
415
+ <div class="k-scheduler-times" #times>
416
+ <table class="k-scheduler-table" #timesTable aria-hidden="true">
417
+ <tbody>
418
+ <tr *ngIf="!verticalResources.length">
419
+ <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
420
+ {{ allEventsMessage }}
391
421
  </th>
422
+ </tr>
423
+ <ng-container *ngIf="verticalResources.length">
424
+ <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
425
+ <tr #verticalResourceRows>
426
+ <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
427
+ <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
428
+ <div>
429
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
430
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
431
+ [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
432
+ </div>
433
+ </th>
434
+ </ng-container>
435
+ </tr>
436
+ </ng-container>
392
437
  </ng-container>
393
- </tr>
394
- </ng-container>
395
- </ng-container>
396
- </table>
397
- </div>
398
- <div
399
- class="k-scheduler-content"
400
- #content
401
- role="group"
402
- tabindex="0"
403
- [attr.aria-owns]="matchOwned(items | async | sort)">
404
- <ng-container *ngIf="showCurrentTime">
405
- <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
406
- class="k-current-time" #currentTimeMarker>
438
+ </tbody>
439
+ </table>
407
440
  </div>
408
- </ng-container>
409
- <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
410
- <colgroup>
411
- <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
412
- </colgroup>
413
- <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
414
- <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
415
- <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
416
- <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
417
- [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
418
- timeSlot #timeSlot="timeSlot"
419
- [date]="daySlot.start"
420
- [invariantStart]="slot.start"
421
- [invariantEnd]="slot.end"
422
- [workDayStart]="workDayStartTime"
423
- [workDayEnd]="workDayEndTime"
424
- [workWeekStart]="workWeekStart"
425
- [workWeekEnd]="workWeekEnd"
426
- selectableSlot
427
- [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
428
- [class.k-selected]="isSlotSelected({
429
- start: toPlainDateTime(daySlot.start, slot.start),
430
- end: toPlainDateTime(daySlot.start, slot.end),
431
- isAllDay: false,
432
- resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
433
- })"
434
- >
435
- <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
436
- [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
441
+ </td>
442
+ <td>
443
+ <div
444
+ class="k-scheduler-content"
445
+ #content
446
+ role="group"
447
+ tabindex="0"
448
+ (scroll)="handleScroll()"
449
+ [attr.aria-owns]="matchOwned(items | async | sort)">
450
+ <ng-container *ngIf="showCurrentTime">
451
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
452
+ class="k-current-time" #currentTimeMarker>
453
+ </div>
454
+ </ng-container>
455
+ <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
456
+ <tbody>
457
+ <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
458
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
459
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
460
+ <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
461
+ [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
462
+ timeSlot #timeSlot="timeSlot"
463
+ [date]="daySlot.start"
464
+ [invariantStart]="slot.start"
465
+ [invariantEnd]="slot.end"
466
+ [workDayStart]="workDayStartTime"
467
+ [workDayEnd]="workDayEndTime"
468
+ [workWeekStart]="workWeekStart"
469
+ [workWeekEnd]="workWeekEnd"
470
+ selectableSlot
471
+ [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
472
+ [class.k-selected]="isSlotSelected({
473
+ start: toPlainDateTime(daySlot.start, slot.start),
474
+ end: toPlainDateTime(daySlot.start, slot.end),
475
+ isAllDay: false,
476
+ resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
477
+ })"
478
+ class="k-scheduler-cell"
479
+ >
480
+ <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
481
+ [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
482
+ </ng-container>
483
+ </td>
484
+ </ng-container>
437
485
  </ng-container>
438
- </td>
439
- </ng-container>
486
+ </tr>
487
+ </tbody>
488
+ </table>
489
+ <ng-container *ngFor="let item of items | async | sort; trackBy: itemIndex;">
490
+ <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
491
+ [ngClass]="getEventClasses(item, itemResource.resources)"
492
+ [ngStyle]="getEventStyles(item, itemResource)"
493
+ role="button"
494
+ [kendoSchedulerFocusIndex]="itemResource.leafIdx"
495
+ [id]="item.elementId + '_' + itemResource.leafIdx"
496
+ dayTimeViewItem
497
+ [editable]="editable"
498
+ [item]="item"
499
+ [index]="item.index"
500
+ [rangeIndex]="item.rangeIndex"
501
+ [eventTemplate]="eventTemplateRef"
502
+ [resources]="itemResource.resources"
503
+ [resourceIndex]="itemResource.leafIdx">
504
+ </div>
440
505
  </ng-container>
441
- </tr>
442
- </table>
443
- <ng-container *ngFor="let item of items | async | sort; trackBy: itemIndex;">
444
- <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
445
- [ngClass]="getEventClasses(item, itemResource.resources)"
446
- [ngStyle]="getEventStyles(item, itemResource)"
447
- role="button"
448
- [kendoSchedulerFocusIndex]="itemResource.leafIdx"
449
- [id]="item.elementId + '_' + itemResource.leafIdx"
450
- dayTimeViewItem
451
- [editable]="editable"
452
- [item]="item"
453
- [index]="item.index"
454
- [rangeIndex]="item.rangeIndex"
455
- [eventTemplate]="eventTemplateRef"
456
- [resources]="itemResource.resources"
457
- [resourceIndex]="itemResource.leafIdx">
506
+ <kendo-hint-container #hintContainer>
507
+ <ng-template>
508
+ <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
509
+ class="k-event-drag-hint"
510
+ dayTimeViewItem
511
+ [ngStyle]="hint.style"
512
+ [ngClass]="hint.class"
513
+ [dragHint]="true"
514
+ [eventTemplate]="eventTemplateRef"
515
+ [item]="hint.item"
516
+ [resources]="hint.resources">
517
+ </div>
518
+ <div *ngIf="resizeHints && resizeHints.length"
519
+ kendoResizeHint
520
+ [hint]="resizeHints[0]"
521
+ [ngClass]="resizeHints[0].class"
522
+ [format]="resizeHintFormat">
523
+ </div>
524
+ </ng-template>
525
+ </kendo-hint-container>
458
526
  </div>
459
- </ng-container>
460
- <kendo-hint-container #hintContainer>
461
- <ng-template>
462
- <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
463
- class="k-event-drag-hint"
464
- dayTimeViewItem
465
- [ngStyle]="hint.style"
466
- [ngClass]="hint.class"
467
- [dragHint]="true"
468
- [eventTemplate]="eventTemplateRef"
469
- [item]="hint.item"
470
- [resources]="hint.resources">
471
- </div>
472
- <div *ngIf="resizeHints && resizeHints.length"
473
- kendoResizeHint
474
- [hint]="resizeHints[0]"
475
- [ngClass]="resizeHints[0].class"
476
- [format]="resizeHintFormat">
477
- </div>
478
- </ng-template>
479
- </kendo-hint-container>
480
- </div>
481
- </div>
482
- </div>
527
+ </td>
528
+ </tr>
529
+ </tbody>
530
+ </table>
483
531
  `
484
532
  }]
485
533
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.PDFService }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { name: [{
@@ -491,4 +539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
491
539
  }], verticalResourceRows: [{
492
540
  type: ViewChildren,
493
541
  args: ['verticalResourceRows']
542
+ }], headerTable: [{
543
+ type: ViewChild,
544
+ args: ['headerTable']
494
545
  }] } });