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

package/esm2020/views/month/month-view-renderer.component.mjs

@@ -5,7 +5,7 @@
 import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef, QueryList, ViewChildren } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { isChanged, isDocumentAvailable, ScrollbarWidthService } from '@progress/kendo-angular-common';
-import { addDays, getDate, toLocalDate } from '@progress/kendo-date-math';
+import { addDays, firstDayOfMonth, getDate, lastDayOfMonth, toLocalDate } from '@progress/kendo-date-math';
 import { ViewContextService } from '../view-context.service';
 import { ViewStateService } from '../view-state.service';
 import { closestInScope, hasClasses } from '../../common/dom-queries';
@@ -26,14 +26,14 @@ import * as i4 from "./month-slot.service";
 import * as i5 from "../../pdf/pdf.service";
 import * as i6 from "@progress/kendo-angular-l10n";
 import * as i7 from "@progress/kendo-angular-common";
-import * as i8 from "./month-slot.component";
-import * as i9 from "./month-view-item.component";
-import * as i10 from "../common/hint-container.component";
-import * as i11 from "../common/resize-hint.component";
-import * as i12 from "@angular/common";
-import * as i13 from "../../navigation/focusable.directive";
-import * as i14 from "../common/resource-iterator.pipe";
-import * as i15 from "../common/repeat.pipe";
+import * as i8 from "../common/hint-container.component";
+import * as i9 from "../common/resize-hint.component";
+import * as i10 from "@angular/common";
+import * as i11 from "../../navigation/focusable.directive";
+import * as i12 from "./month-view-item.component";
+import * as i13 from "./month-slot.component";
+import * as i14 from "../common/repeat.pipe";
+import * as i15 from "../common/resource-iterator.pipe";
 /**
  * @hidden
  */
@@ -106,6 +106,14 @@ export 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);
@@ -129,7 +137,7 @@ export class MonthViewRendererComponent extends BaseView {
         }
         this.slotService.layout(this.eventHeight);
         if (this.contentHeight === 'auto') {
-            content.style.overflow = '';
+            content.style.overflow = 'auto';
         }
         this.syncTables();
     }
@@ -223,135 +231,156 @@ export class MonthViewRendererComponent extends BaseView {
         return weeks;
     }
 }
-MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
+MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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>
-    `, isInline: true, components: [{ type: i8.MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "monthSlot"] }, { type: i9.MonthViewItemComponent, selector: "[monthViewItem]" }, { type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { type: i11.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "kendoDate": i3.DatePipe, "repeat": i15.RepeatPipe, "async": i12.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
+                                    <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: i8.HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: i9.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i11.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: i12.MonthViewItemComponent, selector: "[monthViewItem]" }, { kind: "component", type: i13.MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "monthSlot"] }, { kind: "pipe", type: i14.RepeatPipe, name: "repeat" }, { kind: "pipe", type: i15.ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: i3.DatePipe, name: "kendoDate" }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -360,129 +389,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         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: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { monthDaySlotTemplate: [{