@progress/kendo-angular-scheduler 16.0.0-develop.14 → 16.0.0-develop.15

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 (20) hide show
  1. package/esm2020/package-metadata.mjs +2 -2
  2. package/esm2020/pdf/pdf.component.mjs +1 -1
  3. package/esm2020/scheduler.component.mjs +1 -10
  4. package/esm2020/views/agenda/agenda-header-item.component.mjs +13 -1
  5. package/esm2020/views/agenda/agenda-header.component.mjs +11 -14
  6. package/esm2020/views/agenda/agenda-task-item.component.mjs +5 -1
  7. package/esm2020/views/agenda/agenda-view-internal.component.mjs +6 -6
  8. package/esm2020/views/agenda/agenda-view-list.component.mjs +7 -5
  9. package/esm2020/views/month/month-view-renderer.component.mjs +294 -244
  10. package/esm2020/views/multi-day/multi-day-view-renderer.component.mjs +502 -458
  11. package/esm2020/views/timeline/timeline-multi-day-view.component.mjs +374 -326
  12. package/esm2020/views/year/year-view-internal.component.mjs +1 -1
  13. package/fesm2015/progress-kendo-angular-scheduler.mjs +1214 -1065
  14. package/fesm2020/progress-kendo-angular-scheduler.mjs +1214 -1065
  15. package/package.json +13 -13
  16. package/schematics/ngAdd/index.js +2 -2
  17. package/views/agenda/agenda-header-item.component.d.ts +3 -1
  18. package/views/agenda/agenda-task-item.component.d.ts +1 -0
  19. package/views/month/month-view-renderer.component.d.ts +2 -0
  20. 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';
@@ -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);
@@ -54,6 +58,8 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
54
58
  const slotService = this.slotService;
55
59
  this.updateContentHeight();
56
60
  slotService.containerSize = this.content.nativeElement.scrollWidth;
61
+ this.contentWidth = this.content.nativeElement.getBoundingClientRect().width;
62
+ this.cdr.detectChanges();
57
63
  const verticalResourceRows = this.verticalResources.length ? this.verticalResourceRows.toArray() : [];
58
64
  slotService.layoutTimeline(this.eventHeight, verticalResourceRows);
59
65
  if (verticalResourceRows.length) {
@@ -98,6 +104,9 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
98
104
  }
99
105
  return result;
100
106
  }
107
+ handleScroll() {
108
+ this.headerWrap.nativeElement.scrollLeft = this.content.nativeElement.scrollLeft;
109
+ }
101
110
  createTasks(items, dateRange) {
102
111
  return createTasks(dateRange.start, dateRange.end, items);
103
112
  }
@@ -129,178 +138,196 @@ export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
129
138
  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
139
  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: [
131
140
  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>
141
+ ], viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
142
+ <table class="k-scheduler-layout" [ngClass]="classNames">
143
+ <tbody>
144
+ <tr class="k-scheduler-head">
145
+ <td>
146
+ <div class="k-scheduler-times" #timesHeader>
147
+ <table class="k-scheduler-table" aria-hidden="true">
148
+ <tbody>
149
+ <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
150
+ <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
151
+ <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
152
+ <th class="k-scheduler-cell k-heading-cell"></th>
153
+ </tr>
154
+ </tbody>
155
+ </table>
156
+ </div>
157
+ </td>
158
+ <td>
159
+ <div class="k-scheduler-header" #header >
160
+ <div class="k-scheduler-header-wrap" #headerWrap>
161
+ <ng-container *ngIf="showCurrentTime">
162
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
163
+ #currentTimeArrow class="k-current-time k-current-time-arrow-down">
164
+ </div>
165
+ </ng-container>
166
+ <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
167
+ <tbody>
168
+ <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
169
+ <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
170
+ class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
171
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
172
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
173
+ [ngTemplateOutletContext]="{ resource: item }"></ng-container>
169
174
  </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 }">
175
+ </tr>
176
+ <tr class="k-scheduler-date-group">
177
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
178
+ <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
179
+ <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
180
+ <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
181
+ <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
182
+ </th>
183
+ </ng-container>
184
+ </ng-container>
185
+ </tr>
186
+ <tr>
187
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
188
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
189
+ <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
190
+ <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
191
+ <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
192
+ <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
193
+ </th>
194
+ <th
195
+ *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef"
196
+ [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
197
+ class="k-scheduler-cell k-heading-cell"
198
+ >
199
+ <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
200
+ </ng-container>
201
+ </th>
183
202
  </ng-container>
184
- </th>
203
+ </ng-container>
185
204
  </ng-container>
186
- </ng-container>
187
- </ng-container>
188
- </tr>
189
- </table>
205
+ </tr>
206
+ </tbody>
207
+ </table>
208
+ </div>
190
209
  </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>
210
+ </td>
211
+ </tr>
212
+ <tr class="k-scheduler-body">
213
+ <td>
214
+ <div class="k-scheduler-times" #times>
215
+ <table class="k-scheduler-table" #timesTable aria-hidden="true">
216
+ <tbody>
217
+ <tr *ngIf="!verticalResources.length">
218
+ <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
219
+ {{ allEventsMessage }}
211
220
  </th>
221
+ </tr>
222
+ <ng-container *ngIf="verticalResources.length">
223
+ <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
224
+ <tr #verticalResourceRows>
225
+ <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
226
+ <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
227
+ <div>
228
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
229
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
230
+ [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
231
+ </div>
232
+ </th>
233
+ </ng-container>
234
+ </tr>
235
+ </ng-container>
212
236
  </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>
237
+ </tbody>
238
+ </table>
227
239
  </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 ) }">
240
+ </td>
241
+ <td>
242
+ <div
243
+ class="k-scheduler-content"
244
+ #content
245
+ role="group"
246
+ tabindex="0"
247
+ (scroll)="handleScroll()"
248
+ [attr.aria-owns]="matchOwned(items | async | sort)">
249
+ <ng-container *ngIf="showCurrentTime">
250
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
251
+ class="k-current-time" #currentTimeMarker>
252
+ </div>
253
+ </ng-container>
254
+ <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
255
+ <tbody>
256
+ <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
257
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
258
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
259
+ <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
260
+ [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
261
+ timeSlot #timeSlot="timeSlot"
262
+ [date]="daySlot.start"
263
+ [invariantStart]="slot.start"
264
+ [invariantEnd]="slot.end"
265
+ [workDayStart]="workDayStartTime"
266
+ [workDayEnd]="workDayEndTime"
267
+ [workWeekStart]="workWeekStart"
268
+ [workWeekEnd]="workWeekEnd"
269
+ selectableSlot
270
+ [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
271
+ [class.k-selected]="isSlotSelected({
272
+ start: toPlainDateTime(daySlot.start, slot.start),
273
+ end: toPlainDateTime(daySlot.start, slot.end),
274
+ isAllDay: false,
275
+ resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
276
+ })"
277
+ class="k-scheduler-cell"
278
+ >
279
+ <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
280
+ [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
281
+ </ng-container>
282
+ </td>
283
+ </ng-container>
257
284
  </ng-container>
258
- </td>
259
- </ng-container>
285
+ </tr>
286
+ </tbody>
287
+ </table>
288
+ <ng-container *ngFor="let item of items | async | sort; trackBy: itemIndex;">
289
+ <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
290
+ [ngClass]="getEventClasses(item, itemResource.resources)"
291
+ [ngStyle]="getEventStyles(item, itemResource)"
292
+ role="button"
293
+ [kendoSchedulerFocusIndex]="itemResource.leafIdx"
294
+ [id]="item.elementId + '_' + itemResource.leafIdx"
295
+ dayTimeViewItem
296
+ [editable]="editable"
297
+ [item]="item"
298
+ [index]="item.index"
299
+ [rangeIndex]="item.rangeIndex"
300
+ [eventTemplate]="eventTemplateRef"
301
+ [resources]="itemResource.resources"
302
+ [resourceIndex]="itemResource.leafIdx">
303
+ </div>
260
304
  </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">
305
+ <kendo-hint-container #hintContainer>
306
+ <ng-template>
307
+ <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
308
+ class="k-event-drag-hint"
309
+ dayTimeViewItem
310
+ [ngStyle]="hint.style"
311
+ [ngClass]="hint.class"
312
+ [dragHint]="true"
313
+ [eventTemplate]="eventTemplateRef"
314
+ [item]="hint.item"
315
+ [resources]="hint.resources">
316
+ </div>
317
+ <div *ngIf="resizeHints && resizeHints.length"
318
+ kendoResizeHint
319
+ [hint]="resizeHints[0]"
320
+ [ngClass]="resizeHints[0].class"
321
+ [format]="resizeHintFormat">
322
+ </div>
323
+ </ng-template>
324
+ </kendo-hint-container>
278
325
  </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" }] });
326
+ </td>
327
+ </tr>
328
+ </tbody>
329
+ </table>
330
+ `, 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" }] });
304
331
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
305
332
  type: Component,
306
333
  args: [{
@@ -310,176 +337,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
310
337
  DayTimeSlotService
311
338
  ],
312
339
  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>
340
+ <table class="k-scheduler-layout" [ngClass]="classNames">
341
+ <tbody>
342
+ <tr class="k-scheduler-head">
343
+ <td>
344
+ <div class="k-scheduler-times" #timesHeader>
345
+ <table class="k-scheduler-table" aria-hidden="true">
346
+ <tbody>
347
+ <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
348
+ <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
349
+ <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
350
+ <th class="k-scheduler-cell k-heading-cell"></th>
351
+ </tr>
352
+ </tbody>
353
+ </table>
354
+ </div>
355
+ </td>
356
+ <td>
357
+ <div class="k-scheduler-header" #header >
358
+ <div class="k-scheduler-header-wrap" #headerWrap>
359
+ <ng-container *ngIf="showCurrentTime">
360
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
361
+ #currentTimeArrow class="k-current-time k-current-time-arrow-down">
362
+ </div>
363
+ </ng-container>
364
+ <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
365
+ <tbody>
366
+ <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
367
+ <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
368
+ class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
369
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
370
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
371
+ [ngTemplateOutletContext]="{ resource: item }"></ng-container>
349
372
  </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 }">
373
+ </tr>
374
+ <tr class="k-scheduler-date-group">
375
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
376
+ <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
377
+ <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
378
+ <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
379
+ <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
380
+ </th>
381
+ </ng-container>
382
+ </ng-container>
383
+ </tr>
384
+ <tr>
385
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
386
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
387
+ <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
388
+ <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
389
+ <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
390
+ <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
391
+ </th>
392
+ <th
393
+ *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef"
394
+ [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
395
+ class="k-scheduler-cell k-heading-cell"
396
+ >
397
+ <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
398
+ </ng-container>
399
+ </th>
363
400
  </ng-container>
364
- </th>
401
+ </ng-container>
365
402
  </ng-container>
366
- </ng-container>
367
- </ng-container>
368
- </tr>
369
- </table>
403
+ </tr>
404
+ </tbody>
405
+ </table>
406
+ </div>
370
407
  </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>
408
+ </td>
409
+ </tr>
410
+ <tr class="k-scheduler-body">
411
+ <td>
412
+ <div class="k-scheduler-times" #times>
413
+ <table class="k-scheduler-table" #timesTable aria-hidden="true">
414
+ <tbody>
415
+ <tr *ngIf="!verticalResources.length">
416
+ <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
417
+ {{ allEventsMessage }}
391
418
  </th>
419
+ </tr>
420
+ <ng-container *ngIf="verticalResources.length">
421
+ <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
422
+ <tr #verticalResourceRows>
423
+ <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
424
+ <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
425
+ <div>
426
+ <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
427
+ <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
428
+ [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
429
+ </div>
430
+ </th>
431
+ </ng-container>
432
+ </tr>
433
+ </ng-container>
392
434
  </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>
435
+ </tbody>
436
+ </table>
407
437
  </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 ) }">
438
+ </td>
439
+ <td>
440
+ <div
441
+ class="k-scheduler-content"
442
+ #content
443
+ role="group"
444
+ tabindex="0"
445
+ (scroll)="handleScroll()"
446
+ [attr.aria-owns]="matchOwned(items | async | sort)">
447
+ <ng-container *ngIf="showCurrentTime">
448
+ <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
449
+ class="k-current-time" #currentTimeMarker>
450
+ </div>
451
+ </ng-container>
452
+ <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
453
+ <tbody>
454
+ <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
455
+ <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
456
+ <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
457
+ <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
458
+ [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
459
+ timeSlot #timeSlot="timeSlot"
460
+ [date]="daySlot.start"
461
+ [invariantStart]="slot.start"
462
+ [invariantEnd]="slot.end"
463
+ [workDayStart]="workDayStartTime"
464
+ [workDayEnd]="workDayEndTime"
465
+ [workWeekStart]="workWeekStart"
466
+ [workWeekEnd]="workWeekEnd"
467
+ selectableSlot
468
+ [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
469
+ [class.k-selected]="isSlotSelected({
470
+ start: toPlainDateTime(daySlot.start, slot.start),
471
+ end: toPlainDateTime(daySlot.start, slot.end),
472
+ isAllDay: false,
473
+ resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
474
+ })"
475
+ class="k-scheduler-cell"
476
+ >
477
+ <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
478
+ [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
479
+ </ng-container>
480
+ </td>
481
+ </ng-container>
437
482
  </ng-container>
438
- </td>
439
- </ng-container>
483
+ </tr>
484
+ </tbody>
485
+ </table>
486
+ <ng-container *ngFor="let item of items | async | sort; trackBy: itemIndex;">
487
+ <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
488
+ [ngClass]="getEventClasses(item, itemResource.resources)"
489
+ [ngStyle]="getEventStyles(item, itemResource)"
490
+ role="button"
491
+ [kendoSchedulerFocusIndex]="itemResource.leafIdx"
492
+ [id]="item.elementId + '_' + itemResource.leafIdx"
493
+ dayTimeViewItem
494
+ [editable]="editable"
495
+ [item]="item"
496
+ [index]="item.index"
497
+ [rangeIndex]="item.rangeIndex"
498
+ [eventTemplate]="eventTemplateRef"
499
+ [resources]="itemResource.resources"
500
+ [resourceIndex]="itemResource.leafIdx">
501
+ </div>
440
502
  </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">
503
+ <kendo-hint-container #hintContainer>
504
+ <ng-template>
505
+ <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
506
+ class="k-event-drag-hint"
507
+ dayTimeViewItem
508
+ [ngStyle]="hint.style"
509
+ [ngClass]="hint.class"
510
+ [dragHint]="true"
511
+ [eventTemplate]="eventTemplateRef"
512
+ [item]="hint.item"
513
+ [resources]="hint.resources">
514
+ </div>
515
+ <div *ngIf="resizeHints && resizeHints.length"
516
+ kendoResizeHint
517
+ [hint]="resizeHints[0]"
518
+ [ngClass]="resizeHints[0].class"
519
+ [format]="resizeHintFormat">
520
+ </div>
521
+ </ng-template>
522
+ </kendo-hint-container>
458
523
  </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>
524
+ </td>
525
+ </tr>
526
+ </tbody>
527
+ </table>
483
528
  `
484
529
  }]
485
530
  }], 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 +536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
491
536
  }], verticalResourceRows: [{
492
537
  type: ViewChildren,
493
538
  args: ['verticalResourceRows']
539
+ }], headerTable: [{
540
+ type: ViewChild,
541
+ args: ['headerTable']
494
542
  }] } });