@progress/kendo-angular-scheduler 16.0.0-develop.2 → 16.0.0-develop.20

package/esm2020/views/multi-day/multi-day-view-renderer.component.mjs

@@ -23,12 +23,12 @@ 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";
-import * as i8 from "../day-time/day-time-view-item.component";
-import * as i9 from "../common/hint-container.component";
-import * as i10 from "../common/resize-hint.component";
-import * as i11 from "@angular/common";
+import * as i8 from "../common/hint-container.component";
+import * as i9 from "../common/resize-hint.component";
+import * as i10 from "@angular/common";
+import * as i11 from "../../navigation/focusable.directive";
 import * as i12 from "../day-time/event-slot.directive";
-import * as i13 from "../../navigation/focusable.directive";
+import * as i13 from "../day-time/day-time-view-item.component";
 import * as i14 from "../common/resource-iterator.pipe";
 /**
  * @hidden
@@ -241,77 +241,230 @@ export class MultiDayViewRendererComponent extends DayTimeViewComponent {
         return index + 1 < this.timeSlots.length && !this.timeSlots[index + 1].isMajor;
     }
 }
-MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i6.PDFService }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: { allDaySlot: "allDaySlot", name: "name", slotFill: "slotFill", allDaySlotTemplate: "allDaySlotTemplate", allDayEventTemplate: "allDayEventTemplate" }, providers: [
+MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i6.PDFService }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: { allDaySlot: "allDaySlot", name: "name", slotFill: "slotFill", allDaySlotTemplate: "allDaySlotTemplate", allDayEventTemplate: "allDayEventTemplate" }, providers: [
         DayTimeSlotService
     ], viewQueries: [{ propertyName: "headerHintContainer", first: true, predicate: ["headerHintContainer"], descendants: true }, { propertyName: "dayCells", predicate: ["allDayCell"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-scheduler-layout k-scheduler-flex-layout" role="presentation" [ngClass]="classNames">
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #timesHeader>
-                    <table class="k-scheduler-table" aria-hidden="true">
-                        <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
-                            <th></th>
-                        </tr>
-                        <tr>
-                            <th [style.height]="'auto'"></th>
-                        </tr>
-                        <tr *ngIf="allDaySlot && !verticalResources.length">
-                            <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
-                        </tr>
-                    </table>
-                </div>
-                <div class="k-scheduler-header k-state-default" #header>
-                    <div class="k-scheduler-header-wrap" #headerWrap>
-                        <table class="k-scheduler-table" aria-hidden="true">
-                            <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
-                                <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
-                                    class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
-                                    <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
-                                    <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
-                                </th>
-                            </tr>
-                            <tr>
-                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
-                                    <th *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex">
-                                        <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
-                                        <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
-                                    </th>
-                                </ng-container>
-                            </tr>
-                        </table>
-                        <div [style.position]="'relative'" *ngIf="allDaySlot && !verticalResources.length">
-                            <table class="k-scheduler-table k-scheduler-header-all-day k-user-select-none" aria-hidden="true">
-                                <tr>
-                                    <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
-                                        <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
-                                            daySlot
-                                            [start]="slot.start"
-                                            [end]="slot.end"
-                                            [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
-                                            [class.k-selected]="isSlotSelected({
-                                                start: toPlainDate(slot.start),
-                                                end: toPlainDate(slot.end),
-                                                isAllDay: true,
-                                                resources: resourcesByIndex(resourceIndex)
-                                            })"
-                                            [ngClass]="allDaySlotClass(slot, resourceIndex)">
-                                            <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
-                                                [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
-                                        </td>
+        <table class="k-scheduler-layout" role="presentation" [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 *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                                        <th class="k-scheduler-cell k-heading-cell"></th>
+                                    </tr>
+                                    <tr [style.height]="'auto'">
+                                        <th class="k-scheduler-cell k-heading-cell"></th>
+                                    </tr>
+                                    <tr *ngIf="allDaySlot && !verticalResources.length">
+                                        <th class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="k-scheduler-header" #header>
+                            <div class="k-scheduler-header-wrap" #headerWrap>
+                                <table class="k-scheduler-table" aria-hidden="true">
+                                    <tbody>
+                                        <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                            <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
+                                                class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                                <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
+                                                <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
+                                            </th>
+                                        </tr>
+                                        <tr class="k-scheduler-date-group">
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
+                                                <th *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
+                                                    <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
+                                                    <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                                </th>
+                                            </ng-container>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <div [style.position]="'relative'" *ngIf="allDaySlot && !verticalResources.length">
+                                    <table class="k-scheduler-table k-scheduler-header-all-day" aria-hidden="true">
+                                        <tbody>
+                                            <tr>
+                                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                                    <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                                        daySlot
+                                                        [start]="slot.start"
+                                                        [end]="slot.end"
+                                                        [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
+                                                        [class.k-selected]="isSlotSelected({
+                                                            start: toPlainDate(slot.start),
+                                                            end: toPlainDate(slot.end),
+                                                            isAllDay: true,
+                                                            resources: resourcesByIndex(resourceIndex)
+                                                        })"
+                                                        [ngClass]="allDaySlotClass(slot, resourceIndex)"
+                                                        class="k-scheduler-cell">
+                                                        <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                                            [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
+                                                    </td>
+                                                </ng-container>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                    <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                                        <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                            [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                            [ngStyle]="getEventStyles(item, itemResource, true)"
+                                            role="button"
+                                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                            [id]="item.elementId + '_' + itemResource.leafIdx"
+                                            dayTimeViewItem
+                                                [isAllDay]="true"
+                                                [editable]="editable"
+                                                [eventTemplate]="allDayEventTemplateRef"
+                                                [item]="item"
+                                                [index]="item.index"
+                                                [rangeIndex]="item.rangeIndex"
+                                                [resources]="itemResource.resources"
+                                                [resourceIndex]="itemResource.leafIdx">
+                                        </div>
                                     </ng-container>
-                                </tr>
+                                    <kendo-hint-container #headerHintContainer>
+                                        <ng-template>
+                                            <div *ngIf="dragHints.length && allDayDragHint"
+                                                class="k-event-drag-hint"
+                                                dayTimeViewItem
+                                                    [isAllDay]="true"
+                                                    [ngStyle]="dragHints[0].style"
+                                                    [ngClass]="dragHints[0].class"
+                                                    [dragHint]="true"
+                                                    [eventTemplate]="eventTemplateRef"
+                                                    [item]="dragHints[0].item"
+                                                    [resources]="dragHints[0].resources">
+                                            </div>
+
+                                            <div *ngIf="resizeHints.length && allDayResizeHint"
+                                                kendoResizeHint
+                                                    [hint]="resizeHints[0]"
+                                                    [ngClass]="resizeHints[0].class"
+                                                    [format]="allDayResizeHintFormat">
+                                            </div>
+                                        </ng-template>
+                                    </kendo-hint-container>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+                <tr class="k-scheduler-body">
+                    <td>
+                        <div class="k-scheduler-times" #times>
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                                    #currentTimeArrow class="k-current-time k-current-time-arrow-right">
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                                        <tr *ngIf="verticalResources.length">
+                                            <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                                <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-scheduler-cell k-slot-cell k-heading-cell">
+                                                    <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
+                                                    <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
+                                                        [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
+                                                </th>
+                                            </ng-container>
+                                            <th *ngIf="allDaySlot" class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                                        </tr>
+                                        <tr *ngFor="let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex">
+                                            <th *ngIf="slot.isMajor" [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }" class="k-scheduler-cell k-heading-cell">
+                                                <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ slot.start | kendoDate: 't' }}</ng-container>
+                                                <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                            </th>
+                                            <th *ngIf="!slot.isMajor" [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }" class="k-scheduler-cell k-heading-cell">
+                                                <ng-container *ngIf="minorTimeHeaderTemplateRef" [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
+                                                </ng-container>
+                                            </th>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <div
+                            class="k-scheduler-content" 
+                            #content
+                            role="group"
+                            tabindex="0"
+                            [attr.aria-owns]="matchOwned(items | async)">
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                                    #currentTimeMarker class="k-current-time">
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #contentTable role="presentation">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                                        <tr class="k-scheduler-header-all-day" *ngIf="allDaySlot && verticalResources.length">
+                                            <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                                daySlot
+                                                [start]="slot.start"
+                                                [end]="slot.end"
+                                                [class.k-selected]="isSlotSelected({
+                                                    start: toPlainDate(slot.start),
+                                                    end: toPlainDate(slot.end),
+                                                    isAllDay: true,
+                                                    resources: resourcesByIndex(verticalIndex)
+                                                })"
+                                                [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
+                                                <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                                    [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
+                                            </td>
+                                        </tr>
+                                        <tr *ngFor="let slot of timeSlots; index as index; trackBy: itemIndex" [class.k-middle-row]="isMiddleSlot(index)">
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                                <td *ngFor="let daySlot of daySlots; index as rangeIndex; trackBy: itemIndex"
+                                                    [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"
+                                                        [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"
+                                                >
+                                                    <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
+                                                        [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
+                                                    </ng-container>
+                                                </td>
+                                            </ng-container>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
                             </table>
-                            <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                            <ng-container *ngFor="let item of items | async; trackBy: itemIndex;">
                                 <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
-                                    [ngClass]="getEventClasses(item, itemResource.resources, true)"
-                                    [ngStyle]="getEventStyles(item, itemResource, true)"
+                                    [ngClass]="getEventClasses(item, itemResource.resources)"
+                                    [ngStyle]="getEventStyles(item, itemResource)"
                                     role="button"
                                     [kendoSchedulerFocusIndex]="itemResource.leafIdx"
                                     [id]="item.elementId + '_' + itemResource.leafIdx"
-                                     dayTimeViewItem
-                                        [isAllDay]="true"
+                                    dayTimeViewItem
                                         [editable]="editable"
-                                        [eventTemplate]="allDayEventTemplateRef"
+                                        [vertical]="true"
+                                        [eventTemplate]="eventTemplateRef"
                                         [item]="item"
                                         [index]="item.index"
                                         [rangeIndex]="item.rangeIndex"
@@ -319,189 +472,58 @@ MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                                         [resourceIndex]="itemResource.leafIdx">
                                 </div>
                             </ng-container>
-                            <kendo-hint-container #headerHintContainer>
+                            <ng-container *ngIf="verticalResources.length">
+                                <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                                    <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                        [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                        [ngStyle]="getEventStyles(item, itemResource, true)"
+                                        role="button"
+                                        [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                        [id]="item.elementId + '_' + itemResource.leafIdx"
+                                        dayTimeViewItem
+                                            [isAllDay]="true"
+                                            [editable]="editable"
+                                            [eventTemplate]="allDayEventTemplateRef"
+                                            [item]="item"
+                                            [index]="item.index"
+                                            [rangeIndex]="item.rangeIndex"
+                                            [resources]="itemResource.resources"
+                                            [resourceIndex]="itemResource.leafIdx">
+                                    </div>
+                                </ng-container>
+                            </ng-container>
+                            <kendo-hint-container #hintContainer>
                                 <ng-template>
-                                    <div *ngIf="dragHints.length && allDayDragHint"
+                                    <div *ngIf="dragHints.length && (!allDayDragHint || verticalResources.length)"
                                         class="k-event-drag-hint"
+                                        role="button"
                                         dayTimeViewItem
-                                            [isAllDay]="true"
+                                            [isAllDay]="allDayDragHint"
                                             [ngStyle]="dragHints[0].style"
                                             [ngClass]="dragHints[0].class"
                                             [dragHint]="true"
                                             [eventTemplate]="eventTemplateRef"
-                                            [item]="dragHints[0].item"
-                                            [resources]="dragHints[0].resources">
+                                            [resources]="dragHints[0].resources"
+                                            [item]="dragHints[0].item">
                                     </div>
 
-                                    <div *ngIf="resizeHints.length && allDayResizeHint"
-                                        kendoResizeHint
-                                            [hint]="resizeHints[0]"
-                                            [ngClass]="resizeHints[0].class"
-                                            [format]="allDayResizeHintFormat">
-                                    </div>
+                                    <ng-container *ngIf="resizeHints.length && (!allDayResizeHint || verticalResources.length)">
+                                        <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
+                                            kendoResizeHint
+                                                [hint]="hint"
+                                                [ngClass]="hint.class"
+                                                [format]="allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat">
+                                        </div>
+                                    </ng-container>
                                 </ng-template>
                             </kendo-hint-container>
                         </div>
-                    </div>
-                </div>
-            </div>
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #times>
-                    <ng-container *ngIf="showCurrentTime">
-                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
-                            #currentTimeArrow class="k-current-time k-current-time-arrow-right">
-                        </div>
-                    </ng-container>
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
-                            <tr *ngIf="verticalResources.length">
-                                <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
-                                    <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell">
-                                        <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
-                                        <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                            [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
-                                    </th>
-                                </ng-container>
-                                <th *ngIf="allDaySlot" class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
-                            </tr>
-                            <tr *ngFor="let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex">
-                                <th *ngIf="slot.isMajor" [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }">
-                                    <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ slot.start | kendoDate: 't' }}</ng-container>
-                                    <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
-                                </th>
-                                <th *ngIf="!slot.isMajor" [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }">
-                                    <ng-container *ngIf="minorTimeHeaderTemplateRef" [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
-                                    </ng-container>
-                                </th>
-                            </tr>
-                        </ng-container>
-                    </table>
-                </div>
-                <div
-                    class="k-scheduler-content k-user-select-none" 
-                    #content
-                    role="group"
-                    tabindex="0"
-                    [attr.aria-owns]="matchOwned(items | async)">
-                    <ng-container *ngIf="showCurrentTime">
-                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
-                            #currentTimeMarker class="k-current-time">
-                        </div>
-                    </ng-container>
-                    <table class="k-scheduler-table" #contentTable role="presentation">
-                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
-                            <tr class="k-scheduler-header-all-day" *ngIf="allDaySlot && verticalResources.length">
-                                <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
-                                    daySlot
-                                    [start]="slot.start"
-                                    [end]="slot.end"
-                                    [class.k-selected]="isSlotSelected({
-                                        start: toPlainDate(slot.start),
-                                        end: toPlainDate(slot.end),
-                                        isAllDay: true,
-                                        resources: resourcesByIndex(verticalIndex)
-                                    })"
-                                    [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
-                                    <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
-                                        [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
-                                </td>
-                            </tr>
-                            <tr *ngFor="let slot of timeSlots; index as index; trackBy: itemIndex" [class.k-middle-row]="isMiddleSlot(index)">
-                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
-                                    <td *ngFor="let daySlot of daySlots; index as rangeIndex; trackBy: itemIndex"
-                                        [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"
-                                            [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)
-                                            })"
-                                    >
-                                        <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
-                                        </ng-container>
-                                    </td>
-                                </ng-container>
-                            </tr>
-                        </ng-container>
-                    </table>
-                    <ng-container *ngFor="let item of items | async; trackBy: itemIndex;">
-                        <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
-                            [ngClass]="getEventClasses(item, itemResource.resources)"
-                            [ngStyle]="getEventStyles(item, itemResource)"
-                            role="button"
-                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
-                            [id]="item.elementId + '_' + itemResource.leafIdx"
-                            dayTimeViewItem
-                                [editable]="editable"
-                                [vertical]="true"
-                                [eventTemplate]="eventTemplateRef"
-                                [item]="item"
-                                [index]="item.index"
-                                [rangeIndex]="item.rangeIndex"
-                                [resources]="itemResource.resources"
-                                [resourceIndex]="itemResource.leafIdx">
-                        </div>
-                    </ng-container>
-                    <ng-container *ngIf="verticalResources.length">
-                        <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
-                            <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
-                                [ngClass]="getEventClasses(item, itemResource.resources, true)"
-                                [ngStyle]="getEventStyles(item, itemResource, true)"
-                                role="button"
-                                [kendoSchedulerFocusIndex]="itemResource.leafIdx"
-                                [id]="item.elementId + '_' + itemResource.leafIdx"
-                                dayTimeViewItem
-                                    [isAllDay]="true"
-                                    [editable]="editable"
-                                    [eventTemplate]="allDayEventTemplateRef"
-                                    [item]="item"
-                                    [index]="item.index"
-                                    [rangeIndex]="item.rangeIndex"
-                                    [resources]="itemResource.resources"
-                                    [resourceIndex]="itemResource.leafIdx">
-                            </div>
-                        </ng-container>
-                    </ng-container>
-                    <kendo-hint-container #hintContainer>
-                        <ng-template>
-                            <div *ngIf="dragHints.length && (!allDayDragHint || verticalResources.length)"
-                                class="k-event-drag-hint"
-                                role="button"
-                                dayTimeViewItem
-                                    [isAllDay]="allDayDragHint"
-                                    [ngStyle]="dragHints[0].style"
-                                    [ngClass]="dragHints[0].class"
-                                    [dragHint]="true"
-                                    [eventTemplate]="eventTemplateRef"
-                                    [resources]="dragHints[0].resources"
-                                    [item]="dragHints[0].item">
-                            </div>
-
-                            <ng-container *ngIf="resizeHints.length && (!allDayResizeHint || verticalResources.length)">
-                                <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
-                                    kendoResizeHint
-                                        [hint]="hint"
-                                        [ngClass]="hint.class"
-                                        [format]="allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat">
-                                </div>
-                            </ng-container>
-                        </ng-template>
-                    </kendo-hint-container>
-                </div>
-            </div>
-        </div>
-    `, isInline: true, components: [{ type: i8.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: i9.HintContainerComponent, selector: "kendo-hint-container" }, { type: i10.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { type: i12.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "kendoDate": i4.DatePipe, "async": i11.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiDayViewRendererComponent, decorators: [{
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    `, isInline: true, dependencies: [{ kind: "component", type: i8.HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: i9.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i11.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "directive", type: i12.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { kind: "directive", type: i12.DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { kind: "component", type: i13.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { kind: "pipe", type: i14.ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i4.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiDayViewRendererComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -510,73 +532,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         DayTimeSlotService
                     ],
                     template: `
-        <div class="k-scheduler-layout k-scheduler-flex-layout" role="presentation" [ngClass]="classNames">
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #timesHeader>
-                    <table class="k-scheduler-table" aria-hidden="true">
-                        <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
-                            <th></th>
-                        </tr>
-                        <tr>
-                            <th [style.height]="'auto'"></th>
-                        </tr>
-                        <tr *ngIf="allDaySlot && !verticalResources.length">
-                            <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
-                        </tr>
-                    </table>
-                </div>
-                <div class="k-scheduler-header k-state-default" #header>
-                    <div class="k-scheduler-header-wrap" #headerWrap>
-                        <table class="k-scheduler-table" aria-hidden="true">
-                            <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
-                                <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
-                                    class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
-                                    <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
-                                    <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
-                                </th>
-                            </tr>
-                            <tr>
-                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
-                                    <th *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex">
-                                        <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
-                                        <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
-                                    </th>
-                                </ng-container>
-                            </tr>
-                        </table>
-                        <div [style.position]="'relative'" *ngIf="allDaySlot && !verticalResources.length">
-                            <table class="k-scheduler-table k-scheduler-header-all-day k-user-select-none" aria-hidden="true">
-                                <tr>
-                                    <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
-                                        <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
-                                            daySlot
-                                            [start]="slot.start"
-                                            [end]="slot.end"
-                                            [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
-                                            [class.k-selected]="isSlotSelected({
-                                                start: toPlainDate(slot.start),
-                                                end: toPlainDate(slot.end),
-                                                isAllDay: true,
-                                                resources: resourcesByIndex(resourceIndex)
-                                            })"
-                                            [ngClass]="allDaySlotClass(slot, resourceIndex)">
-                                            <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
-                                                [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
-                                        </td>
+        <table class="k-scheduler-layout" role="presentation" [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 *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                                        <th class="k-scheduler-cell k-heading-cell"></th>
+                                    </tr>
+                                    <tr [style.height]="'auto'">
+                                        <th class="k-scheduler-cell k-heading-cell"></th>
+                                    </tr>
+                                    <tr *ngIf="allDaySlot && !verticalResources.length">
+                                        <th class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="k-scheduler-header" #header>
+                            <div class="k-scheduler-header-wrap" #headerWrap>
+                                <table class="k-scheduler-table" aria-hidden="true">
+                                    <tbody>
+                                        <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                            <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
+                                                class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                                <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
+                                                <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
+                                            </th>
+                                        </tr>
+                                        <tr class="k-scheduler-date-group">
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
+                                                <th *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
+                                                    <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
+                                                    <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                                </th>
+                                            </ng-container>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <div [style.position]="'relative'" *ngIf="allDaySlot && !verticalResources.length">
+                                    <table class="k-scheduler-table k-scheduler-header-all-day" aria-hidden="true">
+                                        <tbody>
+                                            <tr>
+                                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                                    <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                                        daySlot
+                                                        [start]="slot.start"
+                                                        [end]="slot.end"
+                                                        [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
+                                                        [class.k-selected]="isSlotSelected({
+                                                            start: toPlainDate(slot.start),
+                                                            end: toPlainDate(slot.end),
+                                                            isAllDay: true,
+                                                            resources: resourcesByIndex(resourceIndex)
+                                                        })"
+                                                        [ngClass]="allDaySlotClass(slot, resourceIndex)"
+                                                        class="k-scheduler-cell">
+                                                        <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                                            [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
+                                                    </td>
+                                                </ng-container>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                    <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                                        <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                            [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                            [ngStyle]="getEventStyles(item, itemResource, true)"
+                                            role="button"
+                                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                            [id]="item.elementId + '_' + itemResource.leafIdx"
+                                            dayTimeViewItem
+                                                [isAllDay]="true"
+                                                [editable]="editable"
+                                                [eventTemplate]="allDayEventTemplateRef"
+                                                [item]="item"
+                                                [index]="item.index"
+                                                [rangeIndex]="item.rangeIndex"
+                                                [resources]="itemResource.resources"
+                                                [resourceIndex]="itemResource.leafIdx">
+                                        </div>
                                     </ng-container>
-                                </tr>
+                                    <kendo-hint-container #headerHintContainer>
+                                        <ng-template>
+                                            <div *ngIf="dragHints.length && allDayDragHint"
+                                                class="k-event-drag-hint"
+                                                dayTimeViewItem
+                                                    [isAllDay]="true"
+                                                    [ngStyle]="dragHints[0].style"
+                                                    [ngClass]="dragHints[0].class"
+                                                    [dragHint]="true"
+                                                    [eventTemplate]="eventTemplateRef"
+                                                    [item]="dragHints[0].item"
+                                                    [resources]="dragHints[0].resources">
+                                            </div>
+
+                                            <div *ngIf="resizeHints.length && allDayResizeHint"
+                                                kendoResizeHint
+                                                    [hint]="resizeHints[0]"
+                                                    [ngClass]="resizeHints[0].class"
+                                                    [format]="allDayResizeHintFormat">
+                                            </div>
+                                        </ng-template>
+                                    </kendo-hint-container>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+                <tr class="k-scheduler-body">
+                    <td>
+                        <div class="k-scheduler-times" #times>
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                                    #currentTimeArrow class="k-current-time k-current-time-arrow-right">
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                                        <tr *ngIf="verticalResources.length">
+                                            <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                                <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-scheduler-cell k-slot-cell k-heading-cell">
+                                                    <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
+                                                    <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
+                                                        [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
+                                                </th>
+                                            </ng-container>
+                                            <th *ngIf="allDaySlot" class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                                        </tr>
+                                        <tr *ngFor="let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex">
+                                            <th *ngIf="slot.isMajor" [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }" class="k-scheduler-cell k-heading-cell">
+                                                <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ slot.start | kendoDate: 't' }}</ng-container>
+                                                <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                            </th>
+                                            <th *ngIf="!slot.isMajor" [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }" class="k-scheduler-cell k-heading-cell">
+                                                <ng-container *ngIf="minorTimeHeaderTemplateRef" [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
+                                                </ng-container>
+                                            </th>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <div
+                            class="k-scheduler-content" 
+                            #content
+                            role="group"
+                            tabindex="0"
+                            [attr.aria-owns]="matchOwned(items | async)">
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                                    #currentTimeMarker class="k-current-time">
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #contentTable role="presentation">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                                        <tr class="k-scheduler-header-all-day" *ngIf="allDaySlot && verticalResources.length">
+                                            <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                                daySlot
+                                                [start]="slot.start"
+                                                [end]="slot.end"
+                                                [class.k-selected]="isSlotSelected({
+                                                    start: toPlainDate(slot.start),
+                                                    end: toPlainDate(slot.end),
+                                                    isAllDay: true,
+                                                    resources: resourcesByIndex(verticalIndex)
+                                                })"
+                                                [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
+                                                <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                                    [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
+                                            </td>
+                                        </tr>
+                                        <tr *ngFor="let slot of timeSlots; index as index; trackBy: itemIndex" [class.k-middle-row]="isMiddleSlot(index)">
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                                <td *ngFor="let daySlot of daySlots; index as rangeIndex; trackBy: itemIndex"
+                                                    [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"
+                                                        [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"
+                                                >
+                                                    <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
+                                                        [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
+                                                    </ng-container>
+                                                </td>
+                                            </ng-container>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
                             </table>
-                            <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                            <ng-container *ngFor="let item of items | async; trackBy: itemIndex;">
                                 <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
-                                    [ngClass]="getEventClasses(item, itemResource.resources, true)"
-                                    [ngStyle]="getEventStyles(item, itemResource, true)"
+                                    [ngClass]="getEventClasses(item, itemResource.resources)"
+                                    [ngStyle]="getEventStyles(item, itemResource)"
                                     role="button"
                                     [kendoSchedulerFocusIndex]="itemResource.leafIdx"
                                     [id]="item.elementId + '_' + itemResource.leafIdx"
-                                     dayTimeViewItem
-                                        [isAllDay]="true"
+                                    dayTimeViewItem
                                         [editable]="editable"
-                                        [eventTemplate]="allDayEventTemplateRef"
+                                        [vertical]="true"
+                                        [eventTemplate]="eventTemplateRef"
                                         [item]="item"
                                         [index]="item.index"
                                         [rangeIndex]="item.rangeIndex"
@@ -584,187 +759,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                         [resourceIndex]="itemResource.leafIdx">
                                 </div>
                             </ng-container>
-                            <kendo-hint-container #headerHintContainer>
+                            <ng-container *ngIf="verticalResources.length">
+                                <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                                    <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                        [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                        [ngStyle]="getEventStyles(item, itemResource, true)"
+                                        role="button"
+                                        [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                        [id]="item.elementId + '_' + itemResource.leafIdx"
+                                        dayTimeViewItem
+                                            [isAllDay]="true"
+                                            [editable]="editable"
+                                            [eventTemplate]="allDayEventTemplateRef"
+                                            [item]="item"
+                                            [index]="item.index"
+                                            [rangeIndex]="item.rangeIndex"
+                                            [resources]="itemResource.resources"
+                                            [resourceIndex]="itemResource.leafIdx">
+                                    </div>
+                                </ng-container>
+                            </ng-container>
+                            <kendo-hint-container #hintContainer>
                                 <ng-template>
-                                    <div *ngIf="dragHints.length && allDayDragHint"
+                                    <div *ngIf="dragHints.length && (!allDayDragHint || verticalResources.length)"
                                         class="k-event-drag-hint"
+                                        role="button"
                                         dayTimeViewItem
-                                            [isAllDay]="true"
+                                            [isAllDay]="allDayDragHint"
                                             [ngStyle]="dragHints[0].style"
                                             [ngClass]="dragHints[0].class"
                                             [dragHint]="true"
                                             [eventTemplate]="eventTemplateRef"
-                                            [item]="dragHints[0].item"
-                                            [resources]="dragHints[0].resources">
+                                            [resources]="dragHints[0].resources"
+                                            [item]="dragHints[0].item">
                                     </div>
 
-                                    <div *ngIf="resizeHints.length && allDayResizeHint"
-                                        kendoResizeHint
-                                            [hint]="resizeHints[0]"
-                                            [ngClass]="resizeHints[0].class"
-                                            [format]="allDayResizeHintFormat">
-                                    </div>
+                                    <ng-container *ngIf="resizeHints.length && (!allDayResizeHint || verticalResources.length)">
+                                        <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
+                                            kendoResizeHint
+                                                [hint]="hint"
+                                                [ngClass]="hint.class"
+                                                [format]="allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat">
+                                        </div>
+                                    </ng-container>
                                 </ng-template>
                             </kendo-hint-container>
                         </div>
-                    </div>
-                </div>
-            </div>
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #times>
-                    <ng-container *ngIf="showCurrentTime">
-                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
-                            #currentTimeArrow class="k-current-time k-current-time-arrow-right">
-                        </div>
-                    </ng-container>
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
-                            <tr *ngIf="verticalResources.length">
-                                <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
-                                    <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell">
-                                        <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
-                                        <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                            [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
-                                    </th>
-                                </ng-container>
-                                <th *ngIf="allDaySlot" class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
-                            </tr>
-                            <tr *ngFor="let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex">
-                                <th *ngIf="slot.isMajor" [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }">
-                                    <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ slot.start | kendoDate: 't' }}</ng-container>
-                                    <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
-                                </th>
-                                <th *ngIf="!slot.isMajor" [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }">
-                                    <ng-container *ngIf="minorTimeHeaderTemplateRef" [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
-                                    </ng-container>
-                                </th>
-                            </tr>
-                        </ng-container>
-                    </table>
-                </div>
-                <div
-                    class="k-scheduler-content k-user-select-none" 
-                    #content
-                    role="group"
-                    tabindex="0"
-                    [attr.aria-owns]="matchOwned(items | async)">
-                    <ng-container *ngIf="showCurrentTime">
-                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
-                            #currentTimeMarker class="k-current-time">
-                        </div>
-                    </ng-container>
-                    <table class="k-scheduler-table" #contentTable role="presentation">
-                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
-                            <tr class="k-scheduler-header-all-day" *ngIf="allDaySlot && verticalResources.length">
-                                <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
-                                    daySlot
-                                    [start]="slot.start"
-                                    [end]="slot.end"
-                                    [class.k-selected]="isSlotSelected({
-                                        start: toPlainDate(slot.start),
-                                        end: toPlainDate(slot.end),
-                                        isAllDay: true,
-                                        resources: resourcesByIndex(verticalIndex)
-                                    })"
-                                    [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
-                                    <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
-                                        [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
-                                </td>
-                            </tr>
-                            <tr *ngFor="let slot of timeSlots; index as index; trackBy: itemIndex" [class.k-middle-row]="isMiddleSlot(index)">
-                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
-                                    <td *ngFor="let daySlot of daySlots; index as rangeIndex; trackBy: itemIndex"
-                                        [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"
-                                            [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)
-                                            })"
-                                    >
-                                        <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
-                                        </ng-container>
-                                    </td>
-                                </ng-container>
-                            </tr>
-                        </ng-container>
-                    </table>
-                    <ng-container *ngFor="let item of items | async; trackBy: itemIndex;">
-                        <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
-                            [ngClass]="getEventClasses(item, itemResource.resources)"
-                            [ngStyle]="getEventStyles(item, itemResource)"
-                            role="button"
-                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
-                            [id]="item.elementId + '_' + itemResource.leafIdx"
-                            dayTimeViewItem
-                                [editable]="editable"
-                                [vertical]="true"
-                                [eventTemplate]="eventTemplateRef"
-                                [item]="item"
-                                [index]="item.index"
-                                [rangeIndex]="item.rangeIndex"
-                                [resources]="itemResource.resources"
-                                [resourceIndex]="itemResource.leafIdx">
-                        </div>
-                    </ng-container>
-                    <ng-container *ngIf="verticalResources.length">
-                        <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
-                            <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
-                                [ngClass]="getEventClasses(item, itemResource.resources, true)"
-                                [ngStyle]="getEventStyles(item, itemResource, true)"
-                                role="button"
-                                [kendoSchedulerFocusIndex]="itemResource.leafIdx"
-                                [id]="item.elementId + '_' + itemResource.leafIdx"
-                                dayTimeViewItem
-                                    [isAllDay]="true"
-                                    [editable]="editable"
-                                    [eventTemplate]="allDayEventTemplateRef"
-                                    [item]="item"
-                                    [index]="item.index"
-                                    [rangeIndex]="item.rangeIndex"
-                                    [resources]="itemResource.resources"
-                                    [resourceIndex]="itemResource.leafIdx">
-                            </div>
-                        </ng-container>
-                    </ng-container>
-                    <kendo-hint-container #hintContainer>
-                        <ng-template>
-                            <div *ngIf="dragHints.length && (!allDayDragHint || verticalResources.length)"
-                                class="k-event-drag-hint"
-                                role="button"
-                                dayTimeViewItem
-                                    [isAllDay]="allDayDragHint"
-                                    [ngStyle]="dragHints[0].style"
-                                    [ngClass]="dragHints[0].class"
-                                    [dragHint]="true"
-                                    [eventTemplate]="eventTemplateRef"
-                                    [resources]="dragHints[0].resources"
-                                    [item]="dragHints[0].item">
-                            </div>
-
-                            <ng-container *ngIf="resizeHints.length && (!allDayResizeHint || verticalResources.length)">
-                                <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
-                                    kendoResizeHint
-                                        [hint]="hint"
-                                        [ngClass]="hint.class"
-                                        [format]="allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat">
-                                </div>
-                            </ng-container>
-                        </ng-template>
-                    </kendo-hint-container>
-                </div>
-            </div>
-        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i6.PDFService }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { allDaySlot: [{