@progress/kendo-angular-scheduler 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/views/timeline/timeline-multi-day-view.component.mjs

@@ -1,649 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, Input, NgZone, ViewChildren, ViewChild, QueryList, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
-import { IntlService, DatePipe } from '@progress/kendo-angular-intl';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { ViewContextService } from '../view-context.service';
-import { ViewStateService } from '../view-state.service';
-import { DayTimeSlotService } from '../day-time/day-time-slot.service';
-import { createTasks, SortPipe } from './utils';
-import { toPx } from '../utils';
-import { DayTimeViewComponent } from '../day-time/day-time-view.component';
-import { PDFService } from '../../pdf/pdf.service';
-import { ScrollbarWidthService, anyChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { ResourceIteratorPipe } from '../common/resource-iterator.pipe';
-import { ResizeHintComponent } from '../common/resize-hint.component';
-import { HintContainerComponent } from '../common/hint-container.component';
-import { FocusableDirective } from '../../navigation/focusable.directive';
-import { DayTimeViewItemComponent } from '../day-time/day-time-view-item.component';
-import { TimeSlotDirective } from '../day-time/event-slot.directive';
-import { NgClass, NgTemplateOutlet, NgStyle, AsyncPipe } from '@angular/common';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "../view-context.service";
-import * as i3 from "../view-state.service";
-import * as i4 from "@progress/kendo-angular-intl";
-import * as i5 from "../day-time/day-time-slot.service";
-import * as i6 from "../../pdf/pdf.service";
-import * as i7 from "@progress/kendo-angular-common";
-/**
- * @hidden
- */
-export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
-    hiddenDays;
-    name = 'timeline';
-    columnWidth = 100;
-    viewName = 'timeline';
-    verticalResourceRows;
-    get classNames() {
-        return `k-scheduler-${this.viewName}-view`;
-    }
-    headerTable;
-    get contentWidthPercentage() {
-        const expectedWidth = this.columnWidth * this.slotsCount;
-        const percentage = (expectedWidth / this.contentWidth) * 100;
-        return Math.max(percentage, 100);
-    }
-    verticalTime = false;
-    contentWidth;
-    constructor(localization, changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, scrollBarWidthService) {
-        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, scrollBarWidthService);
-    }
-    ngOnChanges(changes) {
-        if (changes.columnWidth) {
-            this.changes.next(null);
-        }
-        if (changes.hiddenDays) {
-            this.slotService.hiddenDays = this.hiddenDays || [];
-        }
-        if (anyChanged(['hiddenDays', 'numberOfDays'], changes)) {
-            this.daySlots = this.createDaySlots();
-            this.viewState.notifyDateRange(this.dateRange(this.selectedDate));
-        }
-        super.ngOnChanges(changes);
-    }
-    reflow() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        const slotService = this.slotService;
-        this.updateContentHeight();
-        slotService.containerSize = this.content.nativeElement.scrollWidth;
-        this.contentWidth = this.content.nativeElement.getBoundingClientRect().width;
-        this.cdr.detectChanges();
-        const verticalResourceRows = this.verticalResources.length ? this.verticalResourceRows.toArray() : [];
-        slotService.layoutTimeline(this.eventHeight, verticalResourceRows);
-        if (verticalResourceRows.length) {
-            slotService.forEachGroup((group, index) => {
-                verticalResourceRows[index].nativeElement.style.height = `${group.timeRanges[0].slots[0].height}px`;
-            });
-        }
-        this.syncTables();
-    }
-    get allEventsMessage() {
-        return this.localization.get('allEvents');
-    }
-    get slotsCount() {
-        const resources = this.horizontalResources;
-        let result = this.daySlots.length * this.timeSlots.length;
-        for (let idx = 0; idx < resources.length; idx++) {
-            result *= (resources[idx].data || []).length || 1;
-        }
-        return result;
-    }
-    timeColspan(index) {
-        if (this.minorTimeHeaderTemplateRef) {
-            return 1;
-        }
-        const timeSlots = this.timeSlots.length;
-        const remainder = timeSlots % this.slotDivisions;
-        return remainder === 0 || (index < timeSlots - remainder) ? this.slotDivisions : 1;
-    }
-    horizontalColspan(resourceIndex) {
-        const resources = this.horizontalResources;
-        let result = this.daySlots.length * this.timeSlots.length;
-        for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
-            result *= (resources[idx].data || []).length || 1;
-        }
-        return result;
-    }
-    verticalRowspan(resourceIndex) {
-        const resources = this.verticalResources;
-        let result = 1;
-        for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
-            result *= (resources[idx].data || []).length || 1;
-        }
-        return result;
-    }
-    handleScroll() {
-        this.headerWrap.nativeElement.scrollLeft = this.content.nativeElement.scrollLeft;
-    }
-    createTasks(items, dateRange) {
-        return createTasks(dateRange.start, dateRange.end, items, this.hiddenDays || []);
-    }
-    onTasksChange() {
-        this.items.next(this.tasks);
-    }
-    dragRanges(slot) {
-        return this.slotService.dragRanges(slot, this.dragging.offset, true);
-    }
-    dragHintSize(firstSlot, lastSlot) {
-        return {
-            width: toPx(lastSlot.rect.left - firstSlot.rect.left + lastSlot.rect.width),
-            height: toPx(firstSlot.height)
-        };
-    }
-    updateResizeHints(ranges, start, end) {
-        const last = ranges[ranges.length - 1];
-        super.updateResizeHints([[ranges[0][0], last[last.length - 1]]], start, end);
-    }
-    pdfWidth() {
-        const contentWidth = this.content.nativeElement.scrollWidth;
-        const timesWidth = this.times.nativeElement.offsetWidth;
-        return contentWidth + timesWidth;
-    }
-    currentTimeArrowOffset() {
-        return this.headerWrap.nativeElement.querySelector('tr:last-child').offsetTop;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineMultiDayViewComponent, isStandalone: true, selector: "timeline-multi-day-view", inputs: { hiddenDays: "hiddenDays", name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
-            DayTimeSlotService
-        ], viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <table class="k-scheduler-layout" [ngClass]="classNames">
-          <tbody>
-            <tr class="k-scheduler-head">
-              <td>
-                <div class="k-scheduler-times" #timesHeader>
-                  <table class="k-scheduler-table" aria-hidden="true">
-                    <tbody>
-                      <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
-                      <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
-                      @for (resource of horizontalResources; track itemIndex($index, resource)) {
-                        <tr>
-                          <th class="k-scheduler-cell k-heading-cell"></th>
-                        </tr>
-                      }
-                    </tbody>
-                  </table>
-                </div>
-              </td>
-              <td>
-                <div class="k-scheduler-header" #header >
-                  <div class="k-scheduler-header-wrap" #headerWrap>
-                    @if (showCurrentTime) {
-                      @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                        <div
-                          #currentTimeArrow class="k-current-time k-current-time-arrow-down">
-                        </div>
-                      }
-                    }
-                    <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
-                      <tbody>
-                        @for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
-                          <tr>
-                            @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
-                              <th
-                                class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
-                                @if (!groupHeaderTemplateRef) {
-                                  {{ getField(item, resource.textField) }}
-                                }
-                                @if (groupHeaderTemplateRef) {
-                                  <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                  [ngTemplateOutletContext]="{ resource: item }"></ng-container>
-                                }
-                              </th>
-                            }
-                          </tr>
-                        }
-                        <tr class="k-scheduler-date-group">
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                            @for (daySlot of daySlots; track itemIndex(index, daySlot); let index = $index) {
-                              <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
-                                @if (!dateHeaderTemplateRef) {
-                                  <span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
-                                }
-                                @if (dateHeaderTemplateRef) {
-                                  <ng-container [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
-                                }
-                              </th>
-                            }
-                          }
-                        </tr>
-                        <tr>
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
-                            @for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
-                              @for (timeSlot of timeSlots; track itemIndex(index, timeSlot); let index = $index) {
-                                @if (timeSlot.isMajor) {
-                                  <th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
-                                    @if (!majorTimeHeaderTemplateRef) {
-                                      {{ timeSlot.start | kendoDate: 't' }}
-                                    }
-                                    @if (majorTimeHeaderTemplateRef) {
-                                      <ng-container [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
-                                    }
-                                  </th>
-                                }
-                                @if (!timeSlot.isMajor && minorTimeHeaderTemplateRef) {
-                                  <th
-                                    [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
-                                    class="k-scheduler-cell k-heading-cell"
-                                    >
-                                    <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
-                                    </ng-container>
-                                  </th>
-                                }
-                              }
-                            }
-                          }
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr class="k-scheduler-body">
-              <td>
-                <div class="k-scheduler-times" #times>
-                  <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                    <tbody>
-                      @if (!verticalResources.length) {
-                        <tr>
-                          <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
-                            {{ allEventsMessage }}
-                          </th>
-                        </tr>
-                      }
-                      @if (verticalResources.length) {
-                        @for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
-                          <tr #verticalResourceRows>
-                            @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
-                              @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
-                                  <div>
-                                    @if (!groupHeaderTemplateRef) {
-                                      {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
-                                    }
-                                    @if (groupHeaderTemplateRef) {
-                                      <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                      [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
-                                    }
-                                  </div>
-                                </th>
-                              }
-                            }
-                          </tr>
-                        }
-                      }
-                    </tbody>
-                  </table>
-                </div>
-              </td>
-              <td>
-                <div
-                  class="k-scheduler-content"
-                  #content
-                  role="group"
-                  tabindex="0"
-                  (scroll)="handleScroll()"
-                  [attr.aria-owns]="matchOwned(items | async | sort)">
-                  @if (showCurrentTime) {
-                    @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                      <div
-                        class="k-current-time" #currentTimeMarker>
-                      </div>
-                    }
-                  }
-                  <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
-                    <tbody>
-                      @for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
-                        <tr>
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
-                            @for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
-                              @for (slot of timeSlots; track itemIndex(index, slot); let index = $index) {
-                                <td
-                                  [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                  timeSlot #timeSlot="timeSlot"
-                                  [date]="daySlot.start"
-                                  [invariantStart]="slot.start"
-                                  [invariantEnd]="slot.end"
-                                  [workDayStart]="workDayStartTime"
-                                  [workDayEnd]="workDayEndTime"
-                                  [workWeekStart]="workWeekStart"
-                                  [workWeekEnd]="workWeekEnd"
-                                  selectableSlot
-                                  [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
-                                                        [class.k-selected]="isSlotSelected({
-                                                            start: toPlainDateTime(daySlot.start, slot.start),
-                                                            end: toPlainDateTime(daySlot.start, slot.end),
-                                                            isAllDay: false,
-                                                            resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
-                                                        })"
-                                  class="k-scheduler-cell"
-                                  >
-                                  @if (timeSlotTemplateRef) {
-                                    <ng-container [ngTemplateOutlet]="timeSlotTemplateRef"
-                                      [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
-                                    </ng-container>
-                                  }
-                                </td>
-                              }
-                            }
-                          }
-                        </tr>
-                      }
-                    </tbody>
-                  </table>
-                  @for (item of items | async | sort; track itemIndex($index, item)) {
-                    @for (itemResource of item.resources; track itemIndex($index, itemResource)) {
-                      <div
-                        [ngClass]="getEventClasses(item, itemResource.resources)"
-                        [ngStyle]="getEventStyles(item, itemResource)"
-                        role="button"
-                        [kendoSchedulerFocusIndex]="itemResource.leafIdx"
-                        [id]="item.elementId + '_' + itemResource.leafIdx"
-                        dayTimeViewItem
-                        [editable]="editable"
-                        [item]="item"
-                        [index]="item.index"
-                        [rangeIndex]="item.rangeIndex"
-                        [eventTemplate]="eventTemplateRef"
-                        [resources]="itemResource.resources"
-                        [resourceIndex]="itemResource.leafIdx">
-                      </div>
-                    }
-                  }
-                  <kendo-hint-container #hintContainer>
-                    <ng-template>
-                      @for (hint of dragHints; track itemIndex($index, hint)) {
-                        <div
-                          class="k-event-drag-hint"
-                          dayTimeViewItem
-                          [ngStyle]="hint.style"
-                          [ngClass]="hint.class"
-                          [dragHint]="true"
-                          [eventTemplate]="eventTemplateRef"
-                          [item]="hint.item"
-                          [resources]="hint.resources">
-                        </div>
-                      }
-                      @if (resizeHints && resizeHints.length) {
-                        <div
-                          kendoResizeHint
-                          [hint]="resizeHints[0]"
-                          [ngClass]="resizeHints[0].class"
-                          [format]="resizeHintFormat">
-                        </div>
-                      }
-                    </ng-template>
-                  </kendo-hint-container>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { kind: "component", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay", "name"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SortPipe, name: "sort" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'timeline-multi-day-view',
-                    providers: [
-                        DayTimeSlotService
-                    ],
-                    template: `
-        <table class="k-scheduler-layout" [ngClass]="classNames">
-          <tbody>
-            <tr class="k-scheduler-head">
-              <td>
-                <div class="k-scheduler-times" #timesHeader>
-                  <table class="k-scheduler-table" aria-hidden="true">
-                    <tbody>
-                      <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
-                      <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
-                      @for (resource of horizontalResources; track itemIndex($index, resource)) {
-                        <tr>
-                          <th class="k-scheduler-cell k-heading-cell"></th>
-                        </tr>
-                      }
-                    </tbody>
-                  </table>
-                </div>
-              </td>
-              <td>
-                <div class="k-scheduler-header" #header >
-                  <div class="k-scheduler-header-wrap" #headerWrap>
-                    @if (showCurrentTime) {
-                      @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                        <div
-                          #currentTimeArrow class="k-current-time k-current-time-arrow-down">
-                        </div>
-                      }
-                    }
-                    <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
-                      <tbody>
-                        @for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
-                          <tr>
-                            @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
-                              <th
-                                class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
-                                @if (!groupHeaderTemplateRef) {
-                                  {{ getField(item, resource.textField) }}
-                                }
-                                @if (groupHeaderTemplateRef) {
-                                  <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                  [ngTemplateOutletContext]="{ resource: item }"></ng-container>
-                                }
-                              </th>
-                            }
-                          </tr>
-                        }
-                        <tr class="k-scheduler-date-group">
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                            @for (daySlot of daySlots; track itemIndex(index, daySlot); let index = $index) {
-                              <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
-                                @if (!dateHeaderTemplateRef) {
-                                  <span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
-                                }
-                                @if (dateHeaderTemplateRef) {
-                                  <ng-container [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
-                                }
-                              </th>
-                            }
-                          }
-                        </tr>
-                        <tr>
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
-                            @for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
-                              @for (timeSlot of timeSlots; track itemIndex(index, timeSlot); let index = $index) {
-                                @if (timeSlot.isMajor) {
-                                  <th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
-                                    @if (!majorTimeHeaderTemplateRef) {
-                                      {{ timeSlot.start | kendoDate: 't' }}
-                                    }
-                                    @if (majorTimeHeaderTemplateRef) {
-                                      <ng-container [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
-                                    }
-                                  </th>
-                                }
-                                @if (!timeSlot.isMajor && minorTimeHeaderTemplateRef) {
-                                  <th
-                                    [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
-                                    class="k-scheduler-cell k-heading-cell"
-                                    >
-                                    <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
-                                    </ng-container>
-                                  </th>
-                                }
-                              }
-                            }
-                          }
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr class="k-scheduler-body">
-              <td>
-                <div class="k-scheduler-times" #times>
-                  <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                    <tbody>
-                      @if (!verticalResources.length) {
-                        <tr>
-                          <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
-                            {{ allEventsMessage }}
-                          </th>
-                        </tr>
-                      }
-                      @if (verticalResources.length) {
-                        @for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
-                          <tr #verticalResourceRows>
-                            @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
-                              @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
-                                  <div>
-                                    @if (!groupHeaderTemplateRef) {
-                                      {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
-                                    }
-                                    @if (groupHeaderTemplateRef) {
-                                      <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                      [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
-                                    }
-                                  </div>
-                                </th>
-                              }
-                            }
-                          </tr>
-                        }
-                      }
-                    </tbody>
-                  </table>
-                </div>
-              </td>
-              <td>
-                <div
-                  class="k-scheduler-content"
-                  #content
-                  role="group"
-                  tabindex="0"
-                  (scroll)="handleScroll()"
-                  [attr.aria-owns]="matchOwned(items | async | sort)">
-                  @if (showCurrentTime) {
-                    @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                      <div
-                        class="k-current-time" #currentTimeMarker>
-                      </div>
-                    }
-                  }
-                  <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
-                    <tbody>
-                      @for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
-                        <tr>
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
-                            @for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
-                              @for (slot of timeSlots; track itemIndex(index, slot); let index = $index) {
-                                <td
-                                  [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                  timeSlot #timeSlot="timeSlot"
-                                  [date]="daySlot.start"
-                                  [invariantStart]="slot.start"
-                                  [invariantEnd]="slot.end"
-                                  [workDayStart]="workDayStartTime"
-                                  [workDayEnd]="workDayEndTime"
-                                  [workWeekStart]="workWeekStart"
-                                  [workWeekEnd]="workWeekEnd"
-                                  selectableSlot
-                                  [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
-                                                        [class.k-selected]="isSlotSelected({
-                                                            start: toPlainDateTime(daySlot.start, slot.start),
-                                                            end: toPlainDateTime(daySlot.start, slot.end),
-                                                            isAllDay: false,
-                                                            resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
-                                                        })"
-                                  class="k-scheduler-cell"
-                                  >
-                                  @if (timeSlotTemplateRef) {
-                                    <ng-container [ngTemplateOutlet]="timeSlotTemplateRef"
-                                      [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
-                                    </ng-container>
-                                  }
-                                </td>
-                              }
-                            }
-                          }
-                        </tr>
-                      }
-                    </tbody>
-                  </table>
-                  @for (item of items | async | sort; track itemIndex($index, item)) {
-                    @for (itemResource of item.resources; track itemIndex($index, itemResource)) {
-                      <div
-                        [ngClass]="getEventClasses(item, itemResource.resources)"
-                        [ngStyle]="getEventStyles(item, itemResource)"
-                        role="button"
-                        [kendoSchedulerFocusIndex]="itemResource.leafIdx"
-                        [id]="item.elementId + '_' + itemResource.leafIdx"
-                        dayTimeViewItem
-                        [editable]="editable"
-                        [item]="item"
-                        [index]="item.index"
-                        [rangeIndex]="item.rangeIndex"
-                        [eventTemplate]="eventTemplateRef"
-                        [resources]="itemResource.resources"
-                        [resourceIndex]="itemResource.leafIdx">
-                      </div>
-                    }
-                  }
-                  <kendo-hint-container #hintContainer>
-                    <ng-template>
-                      @for (hint of dragHints; track itemIndex($index, hint)) {
-                        <div
-                          class="k-event-drag-hint"
-                          dayTimeViewItem
-                          [ngStyle]="hint.style"
-                          [ngClass]="hint.class"
-                          [dragHint]="true"
-                          [eventTemplate]="eventTemplateRef"
-                          [item]="hint.item"
-                          [resources]="hint.resources">
-                        </div>
-                      }
-                      @if (resizeHints && resizeHints.length) {
-                        <div
-                          kendoResizeHint
-                          [hint]="resizeHints[0]"
-                          [ngClass]="resizeHints[0].class"
-                          [format]="resizeHintFormat">
-                        </div>
-                      }
-                    </ng-template>
-                  </kendo-hint-container>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        `,
-                    standalone: true,
-                    imports: [NgClass, NgTemplateOutlet, NgStyle, TimeSlotDirective, DayTimeViewItemComponent, FocusableDirective, HintContainerComponent, ResizeHintComponent, ResourceIteratorPipe, DatePipe, AsyncPipe, SortPipe]
-                }]
-        }], ctorParameters: () => [{ 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: { hiddenDays: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], columnWidth: [{
-                type: Input
-            }], viewName: [{
-                type: Input
-            }], verticalResourceRows: [{
-                type: ViewChildren,
-                args: ['verticalResourceRows']
-            }], headerTable: [{
-                type: ViewChild,
-                args: ['headerTable']
-            }] } });