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

package/fesm2015/progress-kendo-angular-scheduler.mjs

@@ -8,7 +8,7 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i7 from '@progress/kendo-angular-common';
 import { hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, shouldShowValidationUI, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule, guid, WatermarkModule } from '@progress/kendo-angular-common';
-import { isEqualDate, ZonedDate, toLocalDate, getDate, timezoneNames, Day, MS_PER_DAY as MS_PER_DAY$1, addDays, firstDayOfMonth, firstDayInWeek, addMonths, addWeeks, addYears } from '@progress/kendo-date-math';
+import { isEqualDate, ZonedDate, toLocalDate, getDate, timezoneNames, Day, MS_PER_DAY as MS_PER_DAY$1, addDays, firstDayOfMonth, lastDayOfMonth, firstDayInWeek, addMonths, addWeeks, addYears } from '@progress/kendo-date-math';
 import { auditTime, buffer, filter, map, debounceTime, take, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i3 from '@progress/kendo-angular-dateinputs';
@@ -50,8 +50,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715101277,
-    version: '16.0.0-develop.14',
+    publishDate: 1715176029,
+    version: '16.0.0-develop.15',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -7159,7 +7159,7 @@ class SchedulerComponent {
     }
 }
 SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SchedulerComponent, deps: [{ token: i0.ElementRef }, { token: ViewContextService }, { token: ViewStateService }, { token: EditService }, { token: DialogsService }, { token: i1$3.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: DomEventsService }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", allDaySlot: "allDaySlot", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport", schedulerResize: "schedulerResize" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", allDaySlot: "allDaySlot", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport", schedulerResize: "schedulerResize" }, host: { properties: { "class.k-scheduler": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
         EditService,
         DialogsService,
         DomEventsService,
@@ -7867,17 +7867,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ViewContextService }, { type: ViewStateService }, { type: EditService }, { type: DialogsService }, { type: i1$3.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: PDFService }, { type: i1$1.LocalizationService }, { type: DomEventsService }, { type: i0.Renderer2 }, { type: FocusService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-scheduler']
-            }, {
-                type: HostBinding,
-                args: ['class.k-floatwrap']
-            }, {
-                type: HostBinding,
-                args: ['class.k-pos-relative']
             }], ariaRole: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -8692,16 +8683,16 @@ class AgendaHeaderComponent {
     }
 }
 AgendaHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AgendaHeaderComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-AgendaHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaHeaderComponent, selector: "[kendoSchedulerAgendaHeader]", inputs: { resources: "resources" }, host: { properties: { "class.k-scheduler-header": "this.classes", "class.k-state-default": "this.classes" } }, ngImport: i0, template: `
+AgendaHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaHeaderComponent, selector: "[kendoSchedulerAgendaHeader]", inputs: { resources: "resources" }, host: { properties: { "class.k-scheduler-header": "this.classes" } }, ngImport: i0, template: `
         <div class="k-scheduler-header-wrap">
             <table class="k-scheduler-table" role="none">
                 <tbody role="rowgroup">
                     <tr role="row">
-                        <th *ngFor="let resource of resources" class="k-scheduler-groupcolumn" role="columnheader"></th>
-                        <th class="k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
-                        <th class="k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
-                        <th role="columnheader">{{ eventMessage }}</th>
-                    </tr>
+                        <th *ngFor="let resource of resources" class="k-scheduler-groupcolumn k-first" role="columnheader"></th>
+                        <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
+                        <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
+                        <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
+                    </tr>   
                 </tbody>
             </table>
         </div>
@@ -8717,11 +8708,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             <table class="k-scheduler-table" role="none">
                 <tbody role="rowgroup">
                     <tr role="row">
-                        <th *ngFor="let resource of resources" class="k-scheduler-groupcolumn" role="columnheader"></th>
-                        <th class="k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
-                        <th class="k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
-                        <th role="columnheader">{{ eventMessage }}</th>
-                    </tr>
+                        <th *ngFor="let resource of resources" class="k-scheduler-groupcolumn k-first" role="columnheader"></th>
+                        <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
+                        <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
+                        <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
+                    </tr>   
                 </tbody>
             </table>
         </div>
@@ -8730,9 +8721,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { classes: [{
                 type: HostBinding,
                 args: ["class.k-scheduler-header"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-state-default"]
             }], resources: [{
                 type: Input
             }] } });
@@ -8744,6 +8732,10 @@ class AgendaHeaderItemComponent {
     constructor() {
         this.classes = true;
         this.roleAttribute = "rowheader";
+        this.hasFirstClass = true;
+    }
+    get firstClass() {
+        return this.hasFirstClass;
     }
     get rowSpan() {
         return this.item.rowSpan;
@@ -8753,7 +8745,7 @@ class AgendaHeaderItemComponent {
     }
 }
 AgendaHeaderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AgendaHeaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AgendaHeaderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: { item: ["kendoSchedulerAgendaHeaderItem", "item"], agendaDateTemplate: "agendaDateTemplate" }, host: { properties: { "class.k-scheduler-datecolumn": "this.classes", "attr.role": "this.roleAttribute", "attr.rowspan": "this.rowSpan" } }, ngImport: i0, template: `
+AgendaHeaderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: { item: ["kendoSchedulerAgendaHeaderItem", "item"], agendaDateTemplate: "agendaDateTemplate", hasFirstClass: "hasFirstClass" }, host: { properties: { "class.k-scheduler-datecolumn": "this.classes", "class.k-scheduler-cell": "this.classes", "class.k-first": "this.firstClass", "attr.role": "this.roleAttribute", "attr.rowspan": "this.rowSpan" } }, ngImport: i0, template: `
         <ng-container *ngIf="!agendaDateTemplate">
             <strong class="k-scheduler-agendaday">{{itemDate | kendoDate: 'dd'}}</strong>
             <em class="k-scheduler-agendaweek">{{itemDate | kendoDate: 'EEEE'}}</em>
@@ -8783,6 +8775,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ["class.k-scheduler-datecolumn"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-scheduler-cell"]
+            }], firstClass: [{
+                type: HostBinding,
+                args: ["class.k-first"]
             }], roleAttribute: [{
                 type: HostBinding,
                 args: ["attr.role"]
@@ -8794,6 +8792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ["kendoSchedulerAgendaHeaderItem"]
             }], agendaDateTemplate: [{
                 type: Input
+            }], hasFirstClass: [{
+                type: Input
             }] } });
 
 /**
@@ -8806,6 +8806,7 @@ class AgendaTaskItemComponent {
         this.arrowRotateCWIcon = arrowRotateCwIcon;
         this.arrowsNoRepeatIcon = arrowsNoRepeatIcon;
         this.xIcon = xIcon;
+        this.cellClass = true;
     }
     get eventTitle() {
         const start = toLocalDate(this.item.start);
@@ -8830,7 +8831,7 @@ class AgendaTaskItemComponent {
     }
 }
 AgendaTaskItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AgendaTaskItemComponent, deps: [{ token: i1$1.LocalizationService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: { item: ["kendoSchedulerAgendaTaskItem", "item"], color: "color", eventTemplate: "eventTemplate", editable: "editable" }, host: { properties: { "attr.aria-label": "this.eventTitle" } }, ngImport: i0, template: `
+AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: { item: ["kendoSchedulerAgendaTaskItem", "item"], color: "color", eventTemplate: "eventTemplate", editable: "editable" }, host: { properties: { "class.k-scheduler-cell": "this.cellClass", "attr.aria-label": "this.eventTitle" } }, ngImport: i0, template: `
         <div class="k-task" [title]="item.title">
             <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
             <kendo-icon-wrapper *ngIf="isRecurrence" name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
@@ -8887,6 +8888,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], editable: [{
                 type: Input
+            }], cellClass: [{
+                type: HostBinding,
+                args: ["class.k-scheduler-cell"]
             }], eventTitle: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
@@ -8978,15 +8982,16 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 <ng-container *ngFor="let group of tasks; let groupIndex = index;">
                     <tr *ngFor="let item of group.tasks; let index = index; trackBy: trackByFn" role="row">
                         <ng-container *ngFor="let resource of group.resources; let resourceIndex = index">
-                            <td *ngIf="group.spans[resourceIndex] && index === 0" class="k-scheduler-groupcolumn" [attr.rowspan]="group.spans[resourceIndex]" role="rowheader">
+                            <td *ngIf="group.spans[resourceIndex] && index === 0" class="k-scheduler-groupcolumn k-first" [attr.rowspan]="group.spans[resourceIndex]" role="rowheader">
                                 {{ resource }}
                             </td>
                         </ng-container>
                         <td *ngIf="item.type === 'group'"
                             [kendoSchedulerAgendaHeaderItem]="item"
+                            [hasFirstClass]="!group.resources || group.resources.length === 0"
                             [agendaDateTemplate]="agendaDateTemplate">
                         </td>
-                        <td class="k-scheduler-timecolumn" role="gridcell">
+                        <td class="k-scheduler-timecolumn k-scheduler-cell" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
                                     *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
@@ -9019,7 +9024,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </ng-container>
             </tbody>
         </table>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: i5$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { kind: "component", type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: i5$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate", "hasFirstClass"] }, { kind: "component", type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AgendaListComponent, decorators: [{
             type: Component,
             args: [{
@@ -9031,15 +9036,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 <ng-container *ngFor="let group of tasks; let groupIndex = index;">
                     <tr *ngFor="let item of group.tasks; let index = index; trackBy: trackByFn" role="row">
                         <ng-container *ngFor="let resource of group.resources; let resourceIndex = index">
-                            <td *ngIf="group.spans[resourceIndex] && index === 0" class="k-scheduler-groupcolumn" [attr.rowspan]="group.spans[resourceIndex]" role="rowheader">
+                            <td *ngIf="group.spans[resourceIndex] && index === 0" class="k-scheduler-groupcolumn k-first" [attr.rowspan]="group.spans[resourceIndex]" role="rowheader">
                                 {{ resource }}
                             </td>
                         </ng-container>
                         <td *ngIf="item.type === 'group'"
                             [kendoSchedulerAgendaHeaderItem]="item"
+                            [hasFirstClass]="!group.resources || group.resources.length === 0"
                             [agendaDateTemplate]="agendaDateTemplate">
                         </td>
-                        <td class="k-scheduler-timecolumn" role="gridcell">
+                        <td class="k-scheduler-timecolumn k-scheduler-cell" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
                                     *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
@@ -9376,14 +9382,14 @@ class AgendaViewInternalComponent {
 }
 AgendaViewInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AgendaViewInternalComponent, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: PDFService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 AgendaViewInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AgendaViewInternalComponent, selector: "agenda-view-internal", inputs: { eventTemplate: "eventTemplate", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", agendaTimeTemplate: "agendaTimeTemplate", agendaDateTemplate: "agendaDateTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfDays: "numberOfDays" }, viewQueries: [{ propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true, read: ElementRef, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <table class="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda" role="grid">
+        <table class="k-scheduler-layout k-scheduler-agendaview" role="grid">
             <tbody role="none">
-                <tr>
+                <tr class="k-scheduler-head">
                     <td>
                         <div kendoSchedulerAgendaHeader [resources]="groupedResources" #headerWrap></div>
                     </td>
                 </tr>
-                <tr>
+                <tr class="k-scheduler-body">
                     <td>
                         <div kendoSchedulerAgendaList #content
                             [editable]="editable"
@@ -9406,14 +9412,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'agenda-view-internal',
                     template: `
-        <table class="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda" role="grid">
+        <table class="k-scheduler-layout k-scheduler-agendaview" role="grid">
             <tbody role="none">
-                <tr>
+                <tr class="k-scheduler-head">
                     <td>
                         <div kendoSchedulerAgendaHeader [resources]="groupedResources" #headerWrap></div>
                     </td>
                 </tr>
-                <tr>
+                <tr class="k-scheduler-body">
                     <td>
                         <div kendoSchedulerAgendaList #content
                             [editable]="editable"
@@ -11792,6 +11798,14 @@ class MonthViewRendererComponent extends BaseView {
     addDay(dayStart) {
         return addDays(dayStart, 1);
     }
+    isDayInPreviousMonth(day) {
+        const beginningOfMonth = new Date(firstDayOfMonth(this.selectedDate).setHours(0, 0, 0, 0));
+        return day < beginningOfMonth;
+    }
+    isDayInNextMonth(day) {
+        const endOfMonth = new Date(lastDayOfMonth(this.selectedDate).setHours(23, 59, 59, 59));
+        return day > endOfMonth;
+    }
     optionsChange(changes) {
         this.schedulerMonthDaySlotTemplate = changes[`${this.type}DaySlotTemplate`];
         super.optionsChange(changes);
@@ -11815,7 +11829,7 @@ class MonthViewRendererComponent extends BaseView {
         }
         this.slotService.layout(this.eventHeight);
         if (this.contentHeight === 'auto') {
-            content.style.overflow = '';
+            content.style.overflow = 'auto';
         }
         this.syncTables();
     }
@@ -11913,129 +11927,150 @@ MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0
 MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
         MonthSlotService
     ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
-                    <table class="k-scheduler-table" aria-hidden="true">
-                        <tr>
-                            <th></th>
-                        </tr>
-                    </table>
-                </div>
-                <div class="k-scheduler-header k-state-default" #header>
-                    <div class="k-scheduler-header-wrap" #headerWrap>
-                        <!-- Days of the weeks titles -->
-                       <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 day of weeks[0]; trackBy: itemIndex">
-                                     {{ day | kendoDate: 'EEEE' }}
-                                 </th>
-                             </ng-container>
-                         </tr>
-                       </table>
-                    </div>
-                </div>
-            </div>
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times k-scheduler-resources" #times *ngIf="verticalResources.length">
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
-                            <tr>
-                                <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" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
-                                        <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 class="k-slot-cell k-empty-slot">
-                                </th>
-                            </tr>
-                            <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
-                                <th class="k-slot-cell k-empty-slot"></th>
-                            </tr>
-                        </ng-container>
-                    </table>
-                </div>
-                <div 
-                    class="k-scheduler-content"
-                    tabindex="0"
-                    #content
-                    role="group"
-                    [attr.aria-owns]="matchOwned(items | async)">
-                    <!-- Main content -->
-                     <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
-                         <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
-                             <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
-                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
-                                     <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
-                                         [monthSlot]="day"
-                                         [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
-                                         [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
-                                         [title]="cellTitle(day)"
-                                         [class.k-selected]="isSlotSelected({
-                                             start: toPlainDate(day),
-                                             end: addDay(toPlainDate(day)),
-                                             isAllDay: true,
-                                             resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
-                                         })"
-                                        >
-                                    </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"
-                            monthViewItem
-                                [editable]="editable"
-                                [item]="item"
-                                [index]="item.index"
-                                [rangeIndex]="item.rangeIndex"
-                                [eventTemplate]="eventTemplateRef"
-                                [resources]="itemResource.resources"
-                                [resourceIndex]="itemResource.leafIdx">
-                         </div>
-                     </ng-container>
-                     <kendo-hint-container #hintContainer>
-                        <ng-template>
-                            <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
-                                class="k-event-drag-hint"
-                                monthViewItem
-                                    [ngStyle]="hint.style"
-                                    [ngClass]="hint.class"
-                                    [dragHint]="true"
-                                    [eventTemplate]="eventTemplateRef"
-                                    [item]="hint.item"
-                                    [resources]="hint.resources">
+        <table class="k-scheduler-layout k-scheduler-monthview">
+            <tbody>
+                <tr class="k-scheduler-head">
+                    <td *ngIf="verticalResources.length">
+                        <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
+                            <table class="k-scheduler-table" aria-hidden="true">
+                                <tbody>
+                                    <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>
+                                <!-- Days of the weeks titles -->
+                                <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>
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex">
+                                                <th *ngFor="let day of weeks[0]; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
+                                                    {{ day | kendoDate: 'EEEE' }}
+                                                </th>
+                                            </ng-container>
+                                        </tr>
+                                    </tbody>
+                                </table>
                             </div>
+                        </div>
+                    </td>
+                </tr>
+                <tr class="k-scheduler-body">
+                    <td *ngIf="verticalResources.length">
+                        <div class="k-scheduler-times k-scheduler-resources" #times>
+                            <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
+                                        <tr>
+                                            <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 k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
+                                                    <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 class="k-slot-cell k-heading-cell k-empty-slot">
+                                            </th>
+                                        </tr>
+                                        <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
+                                            <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <div 
+                            class="k-scheduler-content"
+                            tabindex="0"
+                            #content
+                            role="group"
+                            [attr.aria-owns]="matchOwned(items | async)"
+                            [style.overflowY]="'auto'">
+                            <!-- Main content -->
+                            <table class="k-scheduler-table" #contentTable role="presentation">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
+                                        <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
+                                                <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
+                                                    [monthSlot]="day"
+                                                    [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
+                                                    [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
+                                                    [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
+                                                    [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                                    [title]="cellTitle(day)"
+                                                    [class.k-selected]="isSlotSelected({
+                                                        start: toPlainDate(day),
+                                                        end: addDay(toPlainDate(day)),
+                                                        isAllDay: true,
+                                                        resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                                    })"
+                                                    class="k-scheduler-cell"
+                                                    [ngClass]="{'k-other-month': isDayInPreviousMonth(day) || isDayInNextMonth(day)}"
+                                                    >
+                                                </td>
+                                            </ng-container>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </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"
+                                    monthViewItem
+                                        [editable]="editable"
+                                        [item]="item"
+                                        [index]="item.index"
+                                        [rangeIndex]="item.rangeIndex"
+                                        [eventTemplate]="eventTemplateRef"
+                                        [resources]="itemResource.resources"
+                                        [resourceIndex]="itemResource.leafIdx">
+                                </div>
+                            </ng-container>
+                            <kendo-hint-container #hintContainer>
+                                <ng-template>
+                                    <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
+                                        class="k-event-drag-hint"
+                                        monthViewItem
+                                            [ngStyle]="hint.style"
+                                            [ngClass]="hint.class"
+                                            [dragHint]="true"
+                                            [eventTemplate]="eventTemplateRef"
+                                            [item]="hint.item"
+                                            [resources]="hint.resources">
+                                    </div>
 
-                            <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
-                                kendoResizeHint
-                                    [hint]="hint"
-                                    [ngClass]="hint.class"
-                                    [format]="resizeHintFormat">
-                            </div>
-                        </ng-template>
-                     </kendo-hint-container>
-                </div>
-            </div>
-        </div>
+                                    <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
+                                        kendoResizeHint
+                                            [hint]="hint"
+                                            [ngClass]="hint.class"
+                                            [format]="resizeHintFormat">
+                                    </div>
+                                </ng-template>
+                            </kendo-hint-container>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     `, isInline: true, dependencies: [{ kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: MonthViewItemComponent, selector: "[monthViewItem]" }, { kind: "component", type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "monthSlot"] }, { kind: "pipe", type: RepeatPipe, name: "repeat" }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i1$3.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
@@ -12046,129 +12081,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         MonthSlotService
                     ],
                     template: `
-        <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
-                    <table class="k-scheduler-table" aria-hidden="true">
-                        <tr>
-                            <th></th>
-                        </tr>
-                    </table>
-                </div>
-                <div class="k-scheduler-header k-state-default" #header>
-                    <div class="k-scheduler-header-wrap" #headerWrap>
-                        <!-- Days of the weeks titles -->
-                       <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 day of weeks[0]; trackBy: itemIndex">
-                                     {{ day | kendoDate: 'EEEE' }}
-                                 </th>
-                             </ng-container>
-                         </tr>
-                       </table>
-                    </div>
-                </div>
-            </div>
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times k-scheduler-resources" #times *ngIf="verticalResources.length">
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
-                            <tr>
-                                <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" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
-                                        <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 class="k-slot-cell k-empty-slot">
-                                </th>
-                            </tr>
-                            <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
-                                <th class="k-slot-cell k-empty-slot"></th>
-                            </tr>
-                        </ng-container>
-                    </table>
-                </div>
-                <div 
-                    class="k-scheduler-content"
-                    tabindex="0"
-                    #content
-                    role="group"
-                    [attr.aria-owns]="matchOwned(items | async)">
-                    <!-- Main content -->
-                     <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
-                         <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
-                             <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
-                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
-                                     <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
-                                         [monthSlot]="day"
-                                         [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
-                                         [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
-                                         [title]="cellTitle(day)"
-                                         [class.k-selected]="isSlotSelected({
-                                             start: toPlainDate(day),
-                                             end: addDay(toPlainDate(day)),
-                                             isAllDay: true,
-                                             resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
-                                         })"
-                                        >
-                                    </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"
-                            monthViewItem
-                                [editable]="editable"
-                                [item]="item"
-                                [index]="item.index"
-                                [rangeIndex]="item.rangeIndex"
-                                [eventTemplate]="eventTemplateRef"
-                                [resources]="itemResource.resources"
-                                [resourceIndex]="itemResource.leafIdx">
-                         </div>
-                     </ng-container>
-                     <kendo-hint-container #hintContainer>
-                        <ng-template>
-                            <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
-                                class="k-event-drag-hint"
-                                monthViewItem
-                                    [ngStyle]="hint.style"
-                                    [ngClass]="hint.class"
-                                    [dragHint]="true"
-                                    [eventTemplate]="eventTemplateRef"
-                                    [item]="hint.item"
-                                    [resources]="hint.resources">
+        <table class="k-scheduler-layout k-scheduler-monthview">
+            <tbody>
+                <tr class="k-scheduler-head">
+                    <td *ngIf="verticalResources.length">
+                        <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
+                            <table class="k-scheduler-table" aria-hidden="true">
+                                <tbody>
+                                    <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>
+                                <!-- Days of the weeks titles -->
+                                <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>
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex">
+                                                <th *ngFor="let day of weeks[0]; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
+                                                    {{ day | kendoDate: 'EEEE' }}
+                                                </th>
+                                            </ng-container>
+                                        </tr>
+                                    </tbody>
+                                </table>
                             </div>
+                        </div>
+                    </td>
+                </tr>
+                <tr class="k-scheduler-body">
+                    <td *ngIf="verticalResources.length">
+                        <div class="k-scheduler-times k-scheduler-resources" #times>
+                            <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
+                                        <tr>
+                                            <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 k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
+                                                    <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 class="k-slot-cell k-heading-cell k-empty-slot">
+                                            </th>
+                                        </tr>
+                                        <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
+                                            <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <div 
+                            class="k-scheduler-content"
+                            tabindex="0"
+                            #content
+                            role="group"
+                            [attr.aria-owns]="matchOwned(items | async)"
+                            [style.overflowY]="'auto'">
+                            <!-- Main content -->
+                            <table class="k-scheduler-table" #contentTable role="presentation">
+                                <tbody>
+                                    <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
+                                        <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
+                                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
+                                                <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
+                                                    [monthSlot]="day"
+                                                    [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
+                                                    [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
+                                                    [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
+                                                    [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                                    [title]="cellTitle(day)"
+                                                    [class.k-selected]="isSlotSelected({
+                                                        start: toPlainDate(day),
+                                                        end: addDay(toPlainDate(day)),
+                                                        isAllDay: true,
+                                                        resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                                    })"
+                                                    class="k-scheduler-cell"
+                                                    [ngClass]="{'k-other-month': isDayInPreviousMonth(day) || isDayInNextMonth(day)}"
+                                                    >
+                                                </td>
+                                            </ng-container>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </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"
+                                    monthViewItem
+                                        [editable]="editable"
+                                        [item]="item"
+                                        [index]="item.index"
+                                        [rangeIndex]="item.rangeIndex"
+                                        [eventTemplate]="eventTemplateRef"
+                                        [resources]="itemResource.resources"
+                                        [resourceIndex]="itemResource.leafIdx">
+                                </div>
+                            </ng-container>
+                            <kendo-hint-container #hintContainer>
+                                <ng-template>
+                                    <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
+                                        class="k-event-drag-hint"
+                                        monthViewItem
+                                            [ngStyle]="hint.style"
+                                            [ngClass]="hint.class"
+                                            [dragHint]="true"
+                                            [eventTemplate]="eventTemplateRef"
+                                            [item]="hint.item"
+                                            [resources]="hint.resources">
+                                    </div>
 
-                            <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
-                                kendoResizeHint
-                                    [hint]="hint"
-                                    [ngClass]="hint.class"
-                                    [format]="resizeHintFormat">
-                            </div>
-                        </ng-template>
-                     </kendo-hint-container>
-                </div>
-            </div>
-        </div>
+                                    <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
+                                        kendoResizeHint
+                                            [hint]="hint"
+                                            [ngClass]="hint.class"
+                                            [format]="resizeHintFormat">
+                                    </div>
+                                </ng-template>
+                            </kendo-hint-container>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     `
                 }]
         }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PDFService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { monthDaySlotTemplate: [{
@@ -14358,73 +14414,226 @@ MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.
 MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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>
+                                    <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>
-                                </tr>
+                                </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"
@@ -14432,187 +14641,56 @@ 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>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     `, isInline: true, dependencies: [{ kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "directive", type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { kind: "directive", type: DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { kind: "component", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i1$3.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiDayViewRendererComponent, decorators: [{
             type: Component,
@@ -14623,73 +14701,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         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>
-                            <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                        </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 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"
@@ -14697,187 +14928,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                                         [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$1.LocalizationService }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { allDaySlot: [{
@@ -15599,6 +15699,11 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
     get classNames() {
         return `k-scheduler-${this.viewName}-view`;
     }
+    get contentWidthPercentage() {
+        const expectedWidth = this.columnWidth * this.slotsCount;
+        const percentage = (expectedWidth / this.contentWidth) * 100;
+        return Math.max(percentage, 100);
+    }
     ngOnChanges(changes) {
         if (changes.columnWidth) {
             this.changes.next(null);
@@ -15609,6 +15714,8 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
         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) {
@@ -15653,6 +15760,9 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
         }
         return result;
     }
+    handleScroll() {
+        this.headerWrap.nativeElement.scrollLeft = this.content.nativeElement.scrollLeft;
+    }
     createTasks(items, dateRange) {
         return createTasks$3(dateRange.start, dateRange.end, items);
     }
@@ -15684,178 +15794,196 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
 TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: { name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
         DayTimeSlotService
-    ], viewQueries: [{ propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-scheduler-layout k-scheduler-flex-layout" [ngClass]="classNames">
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #timesHeader>
-                    <table class="k-scheduler-table" aria-hidden="true">
-                        <tr><th [style.height]="'auto'"></th></tr>
-                        <tr><th class="k-slot-cell"></th></tr>
-                        <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
-                            <th></th>
-                        </tr>
-                    </table>
-                </div>
-                <div class="k-scheduler-header k-state-default" #header >
-                    <div class="k-scheduler-header-wrap" #headerWrap>
-                        <ng-container *ngIf="showCurrentTime">
-                            <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
-                                #currentTimeArrow class="k-current-time k-current-time-arrow-down">
-                            </div>
-                        </ng-container>
-                        <table class="k-scheduler-table" aria-hidden="true">
-                            <colgroup>
-                                <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
-                            </colgroup>
-                            <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;">
-                                     <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
-                                        <th [attr.colspan]="timeSlots.length" class="k-slot-cell">
-                                             <span *ngIf="!dateHeaderTemplateRef" class="k-link" [ngClass]="{ 'k-nav-day': numberOfDays > 1 }" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
-                                             <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
+    ], 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>
+                                    <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                                        <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>
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                                    #currentTimeArrow class="k-current-time k-current-time-arrow-down">
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
+                                <tbody>
+                                    <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 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>
-                                    </ng-container>
-                                </ng-container>
-                            </tr>
-                            <tr>
-                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
-                                    <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
-                                        <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
-                                            <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)">
-                                                <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
-                                                <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
-                                            </th>
-                                            <th *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef" [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}">
-                                                <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
+                                    </tr>
+                                    <tr class="k-scheduler-date-group">
+                                        <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
+                                            <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
+                                                <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
+                                                    <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
+                                                    <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
+                                                </th>
+                                            </ng-container>
+                                        </ng-container>
+                                    </tr>
+                                    <tr>
+                                        <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                            <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                                <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
+                                                    <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
+                                                        <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
+                                                        <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
+                                                    </th>
+                                                    <th
+                                                        *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef"
+                                                        [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>
                                                 </ng-container>
-                                            </th>
+                                            </ng-container>
                                         </ng-container>
-                                    </ng-container>
-                                </ng-container>
-                            </tr>
-                        </table>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                </div>
-            </div>
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #times>
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                        <tr *ngIf="!verticalResources.length">
-                            <th rowspan="1" #titleCell>
-                                {{ allEventsMessage }}
-                            </th>
-                        </tr>
-                        <ng-container *ngIf="verticalResources.length">
-                            <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
-                                <tr #verticalResourceRows>
-                                    <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">
-                                            <div>
-                                                <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>
-                                            </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>
+                                    <tr *ngIf="!verticalResources.length">
+                                        <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
+                                            {{ allEventsMessage }}
                                         </th>
+                                    </tr>
+                                    <ng-container *ngIf="verticalResources.length">
+                                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                                            <tr #verticalResourceRows>
+                                                <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 k-scheduler-cell k-heading-cell">
+                                                        <div>
+                                                            <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>
+                                                        </div>
+                                                    </th>
+                                                </ng-container>
+                                            </tr>
+                                        </ng-container>
                                     </ng-container>
-                                </tr>
-                            </ng-container>
-                        </ng-container>
-                    </table>
-                </div>
-                <div
-                    class="k-scheduler-content"
-                    #content
-                    role="group"
-                    tabindex="0"
-                    [attr.aria-owns]="matchOwned(items | async | sort)">
-                    <ng-container *ngIf="showCurrentTime">
-                        <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
-                            class="k-current-time" #currentTimeMarker>
+                                </tbody>
+                            </table>
                         </div>
-                    </ng-container>
-                    <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
-                        <colgroup>
-                            <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
-                        </colgroup>
-                        <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
-                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
-                                <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
-                                    <td *ngFor="let slot of timeSlots; let index = index; 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"
-                                            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)
-                                            })"
-                                    >
-                                        <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
+                    </td>
+                    <td>
+                        <div
+                            class="k-scheduler-content"
+                            #content
+                            role="group"
+                            tabindex="0"
+                            (scroll)="handleScroll()"
+                            [attr.aria-owns]="matchOwned(items | async | sort)">
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                                    class="k-current-time" #currentTimeMarker>
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
+                                <tbody>
+                                    <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                                        <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                            <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                                <td *ngFor="let slot of timeSlots; let index = index; 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"
+                                                        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"
+                                                >
+                                                    <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
+                                                        [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
+                                                    </ng-container>
+                                                </td>
+                                            </ng-container>
                                         </ng-container>
-                                    </td>
-                                </ng-container>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            <ng-container *ngFor="let item of items | async | sort; 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"
+                                        [item]="item"
+                                        [index]="item.index"
+                                        [rangeIndex]="item.rangeIndex"
+                                        [eventTemplate]="eventTemplateRef"
+                                        [resources]="itemResource.resources"
+                                        [resourceIndex]="itemResource.leafIdx">
+                                </div>
                             </ng-container>
-                        </tr>
-                    </table>
-                    <ng-container *ngFor="let item of items | async | sort; 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"
-                                [item]="item"
-                                [index]="item.index"
-                                [rangeIndex]="item.rangeIndex"
-                                [eventTemplate]="eventTemplateRef"
-                                [resources]="itemResource.resources"
-                                [resourceIndex]="itemResource.leafIdx">
+                            <kendo-hint-container #hintContainer>
+                                <ng-template>
+                                    <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
+                                        class="k-event-drag-hint"
+                                        dayTimeViewItem
+                                            [ngStyle]="hint.style"
+                                            [ngClass]="hint.class"
+                                            [dragHint]="true"
+                                            [eventTemplate]="eventTemplateRef"
+                                            [item]="hint.item"
+                                            [resources]="hint.resources">
+                                    </div>
+                                    <div *ngIf="resizeHints && resizeHints.length"
+                                        kendoResizeHint
+                                        [hint]="resizeHints[0]"
+                                        [ngClass]="resizeHints[0].class"
+                                        [format]="resizeHintFormat">
+                                    </div>
+                                </ng-template>
+                            </kendo-hint-container>
                         </div>
-                    </ng-container>
-                    <kendo-hint-container #hintContainer>
-                        <ng-template>
-                            <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
-                                class="k-event-drag-hint"
-                                dayTimeViewItem
-                                    [ngStyle]="hint.style"
-                                    [ngClass]="hint.class"
-                                    [dragHint]="true"
-                                    [eventTemplate]="eventTemplateRef"
-                                    [item]="hint.item"
-                                    [resources]="hint.resources">
-                            </div>
-                            <div *ngIf="resizeHints && resizeHints.length"
-                                kendoResizeHint
-                                [hint]="resizeHints[0]"
-                                [ngClass]="resizeHints[0].class"
-                                [format]="resizeHintFormat">
-                            </div>
-                        </ng-template>
-                    </kendo-hint-container>
-                </div>
-            </div>
-        </div>
-    `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "pipe", type: RepeatPipe, name: "repeat" }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i1$3.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SortPipe, name: "sort" }] });
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i1$3.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SortPipe, name: "sort" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -15865,176 +15993,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         DayTimeSlotService
                     ],
                     template: `
-        <div class="k-scheduler-layout k-scheduler-flex-layout" [ngClass]="classNames">
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #timesHeader>
-                    <table class="k-scheduler-table" aria-hidden="true">
-                        <tr><th [style.height]="'auto'"></th></tr>
-                        <tr><th class="k-slot-cell"></th></tr>
-                        <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
-                            <th></th>
-                        </tr>
-                    </table>
-                </div>
-                <div class="k-scheduler-header k-state-default" #header >
-                    <div class="k-scheduler-header-wrap" #headerWrap>
-                        <ng-container *ngIf="showCurrentTime">
-                            <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
-                                #currentTimeArrow class="k-current-time k-current-time-arrow-down">
-                            </div>
-                        </ng-container>
-                        <table class="k-scheduler-table" aria-hidden="true">
-                            <colgroup>
-                                <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
-                            </colgroup>
-                            <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;">
-                                     <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
-                                        <th [attr.colspan]="timeSlots.length" class="k-slot-cell">
-                                             <span *ngIf="!dateHeaderTemplateRef" class="k-link" [ngClass]="{ 'k-nav-day': numberOfDays > 1 }" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
-                                             <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
+        <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>
+                                    <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                                        <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>
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                                    #currentTimeArrow class="k-current-time k-current-time-arrow-down">
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
+                                <tbody>
+                                    <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 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>
-                                    </ng-container>
-                                </ng-container>
-                            </tr>
-                            <tr>
-                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
-                                    <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
-                                        <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
-                                            <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)">
-                                                <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
-                                                <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
-                                            </th>
-                                            <th *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef" [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}">
-                                                <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
+                                    </tr>
+                                    <tr class="k-scheduler-date-group">
+                                        <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
+                                            <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
+                                                <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
+                                                    <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
+                                                    <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
+                                                </th>
+                                            </ng-container>
+                                        </ng-container>
+                                    </tr>
+                                    <tr>
+                                        <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                            <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                                <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
+                                                    <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
+                                                        <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ timeSlot.start | kendoDate: 't' }}</ng-container>
+                                                        <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
+                                                    </th>
+                                                    <th
+                                                        *ngIf="!timeSlot.isMajor && minorTimeHeaderTemplateRef"
+                                                        [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>
                                                 </ng-container>
-                                            </th>
+                                            </ng-container>
                                         </ng-container>
-                                    </ng-container>
-                                </ng-container>
-                            </tr>
-                        </table>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                </div>
-            </div>
-            <div class="k-scheduler-pane">
-                <div class="k-scheduler-times" #times>
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                        <tr *ngIf="!verticalResources.length">
-                            <th rowspan="1" #titleCell>
-                                {{ allEventsMessage }}
-                            </th>
-                        </tr>
-                        <ng-container *ngIf="verticalResources.length">
-                            <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
-                                <tr #verticalResourceRows>
-                                    <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">
-                                            <div>
-                                                <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>
-                                            </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>
+                                    <tr *ngIf="!verticalResources.length">
+                                        <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
+                                            {{ allEventsMessage }}
                                         </th>
+                                    </tr>
+                                    <ng-container *ngIf="verticalResources.length">
+                                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                                            <tr #verticalResourceRows>
+                                                <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 k-scheduler-cell k-heading-cell">
+                                                        <div>
+                                                            <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>
+                                                        </div>
+                                                    </th>
+                                                </ng-container>
+                                            </tr>
+                                        </ng-container>
                                     </ng-container>
-                                </tr>
-                            </ng-container>
-                        </ng-container>
-                    </table>
-                </div>
-                <div
-                    class="k-scheduler-content"
-                    #content
-                    role="group"
-                    tabindex="0"
-                    [attr.aria-owns]="matchOwned(items | async | sort)">
-                    <ng-container *ngIf="showCurrentTime">
-                        <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
-                            class="k-current-time" #currentTimeMarker>
+                                </tbody>
+                            </table>
                         </div>
-                    </ng-container>
-                    <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
-                        <colgroup>
-                            <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
-                        </colgroup>
-                        <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
-                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
-                                <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
-                                    <td *ngFor="let slot of timeSlots; let index = index; 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"
-                                            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)
-                                            })"
-                                    >
-                                        <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
+                    </td>
+                    <td>
+                        <div
+                            class="k-scheduler-content"
+                            #content
+                            role="group"
+                            tabindex="0"
+                            (scroll)="handleScroll()"
+                            [attr.aria-owns]="matchOwned(items | async | sort)">
+                            <ng-container *ngIf="showCurrentTime">
+                                <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                                    class="k-current-time" #currentTimeMarker>
+                                </div>
+                            </ng-container>
+                            <table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
+                                <tbody>
+                                    <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                                        <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                            <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                                <td *ngFor="let slot of timeSlots; let index = index; 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"
+                                                        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"
+                                                >
+                                                    <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
+                                                        [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
+                                                    </ng-container>
+                                                </td>
+                                            </ng-container>
                                         </ng-container>
-                                    </td>
-                                </ng-container>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            <ng-container *ngFor="let item of items | async | sort; 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"
+                                        [item]="item"
+                                        [index]="item.index"
+                                        [rangeIndex]="item.rangeIndex"
+                                        [eventTemplate]="eventTemplateRef"
+                                        [resources]="itemResource.resources"
+                                        [resourceIndex]="itemResource.leafIdx">
+                                </div>
                             </ng-container>
-                        </tr>
-                    </table>
-                    <ng-container *ngFor="let item of items | async | sort; 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"
-                                [item]="item"
-                                [index]="item.index"
-                                [rangeIndex]="item.rangeIndex"
-                                [eventTemplate]="eventTemplateRef"
-                                [resources]="itemResource.resources"
-                                [resourceIndex]="itemResource.leafIdx">
+                            <kendo-hint-container #hintContainer>
+                                <ng-template>
+                                    <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
+                                        class="k-event-drag-hint"
+                                        dayTimeViewItem
+                                            [ngStyle]="hint.style"
+                                            [ngClass]="hint.class"
+                                            [dragHint]="true"
+                                            [eventTemplate]="eventTemplateRef"
+                                            [item]="hint.item"
+                                            [resources]="hint.resources">
+                                    </div>
+                                    <div *ngIf="resizeHints && resizeHints.length"
+                                        kendoResizeHint
+                                        [hint]="resizeHints[0]"
+                                        [ngClass]="resizeHints[0].class"
+                                        [format]="resizeHintFormat">
+                                    </div>
+                                </ng-template>
+                            </kendo-hint-container>
                         </div>
-                    </ng-container>
-                    <kendo-hint-container #hintContainer>
-                        <ng-template>
-                            <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
-                                class="k-event-drag-hint"
-                                dayTimeViewItem
-                                    [ngStyle]="hint.style"
-                                    [ngClass]="hint.class"
-                                    [dragHint]="true"
-                                    [eventTemplate]="eventTemplateRef"
-                                    [item]="hint.item"
-                                    [resources]="hint.resources">
-                            </div>
-                            <div *ngIf="resizeHints && resizeHints.length"
-                                kendoResizeHint
-                                [hint]="resizeHints[0]"
-                                [ngClass]="resizeHints[0].class"
-                                [format]="resizeHintFormat">
-                            </div>
-                        </ng-template>
-                    </kendo-hint-container>
-                </div>
-            </div>
-        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { name: [{
@@ -16046,6 +16192,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], verticalResourceRows: [{
                 type: ViewChildren,
                 args: ['verticalResourceRows']
+            }], headerTable: [{
+                type: ViewChild,
+                args: ['headerTable']
             }] } });
 
 const COLUMN_WIDTH = 'columnWidth';
@@ -17718,7 +17867,7 @@ YearViewInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                 {{ localization.get('yearViewNoEvents') }}
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: i3.MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]" }, { kind: "component", type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "directive", type: i12.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: i3.MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]" }, { kind: "component", type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "directive", type: i12.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: YearViewInternalComponent, decorators: [{
             type: Component,
             args: [{
@@ -18522,7 +18671,7 @@ class PDFComponent {
             const container = this.container = createDiv();
             container.style.top = container.style.left = '-10000px';
             container.style.position = 'absolute';
-            const wrapper = createDiv('k-widget k-scheduler k-floatwrap');
+            const wrapper = createDiv('k-scheduler');
             wrapper.style.position = 'relative';
             wrapper.appendChild(args.element);
             container.appendChild(wrapper);