@progress/kendo-angular-scheduler 2.2.0-dev.202111260859 → 3.0.1-dev.202202071010

package/dist/es/views/common/base-view.js

@@ -10,17 +10,19 @@ import { Subscription, BehaviorSubject, combineLatest, fromEvent, merge } from '
 import { switchMap, take, map, filter, tap } from 'rxjs/operators';
 import { closestInScope, hasClasses, preventLockedScroll, scrollbarWidth, wheelDeltaY, hasScrollbar } from '../../common/dom-queries';
 import { groupResources, getField, setField, fromClick, fromDoubleClick } from '../../common/util';
-import { assignTasksResources, toPx, elementOffset, pointDistance, ignoreContentChild, resourceItemByValue, convertNgClassBindings } from '../utils';
+import { assignTasksResources, toPx, elementOffset, pointDistance, ignoreContentChild, resourceItemByValue, convertNgClassBindings, toUTCDateTime, dateWithTime, normaliseRangeStartAndEnd } from '../utils';
 import { BORDER_WIDTH } from '../constants';
 import Draggable from '@telerik/kendo-draggable';
 import { HintContainerComponent } from '../common/hint-container.component';
+import { slotDragEventName } from '../../types/slot-selection';
+import { SlotDragStartEvent } from '../../events/slot-drag-start-event';
 var SCROLL_CHANGE = 15;
 var MIN_DISTANCE = 60;
 var SCROLL_INTERVAL = 50;
 var MIN_MOVE_DISTANCE = 10;
 /** @hidden */
 var BaseView = /** @class */ (function () {
-    function BaseView(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) {
+    function BaseView(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, cdr) {
         this.viewContext = viewContext;
         this.viewState = viewState;
         this.intl = intl;
@@ -30,6 +32,7 @@ var BaseView = /** @class */ (function () {
         this.element = element;
         this.pdfService = pdfService;
         this.localization = localization;
+        this.cdr = cdr;
         this.items = new BehaviorSubject(null);
         this.horizontalResources = [];
         this.verticalResources = [];
@@ -43,8 +46,17 @@ var BaseView = /** @class */ (function () {
         this.spans = [];
         this.domEvents = [];
         this.resourcesCache = {};
+        /**
+         * The slot which is currently being dragged over while selecting a range of slots.
+         */
+        this.dragSelecting = null;
+        /**
+         * The slot where the drag-selecting originated. Used for flipping the start and end of the emitted range.
+         */
+        this.dragSelectOrigin = null;
         this.autoHeight = false;
         this.rtl = false;
+        this.isSlotSelected = function () { return false; };
         this.setSlotClass = this.setSlotClass.bind(this);
         this.setHintClass = this.setHintClass.bind(this);
         this.weekStart = intl.firstDay();
@@ -175,6 +187,20 @@ var BaseView = /** @class */ (function () {
         }
         return result;
     };
+    // Similar to https://tc39.es/proposal-temporal/docs/plaindate.html
+    // Stores a "plain date" in the UTC parts of a regular `Date`.
+    BaseView.prototype.toPlainDate = function (date) {
+        var result = toUTCDateTime(this.convertDate(date));
+        return result;
+    };
+    // Similar to https://tc39.es/proposal-temporal/docs/plaindatetime.html
+    // Stores a "plain date-time" in the UTC parts of a regular `Date`.
+    BaseView.prototype.toPlainDateTime = function (date, time) {
+        if (!date || !time) {
+            return null;
+        }
+        return this.toPlainDate(dateWithTime(date, time));
+    };
     BaseView.prototype.optionsChange = function (options) {
         this.schedulerEventTemplate = options.eventTemplate;
         this.schedulerGroupHeaderTemplate = options.groupHeaderTemplate;
@@ -182,6 +208,8 @@ var BaseView = /** @class */ (function () {
         this.max = options.max;
         this.editable = options.editable;
         this.timezone = options.timezone;
+        this.selectable = options.selectable;
+        this.isSlotSelected = options.isSlotSelected;
         if (!options.changes || anyChanged(['group', 'resources'], options.changes, false) ||
             options.group !== this.group || options.resources !== this.resources) {
             this.group = options.group;
@@ -208,6 +236,7 @@ var BaseView = /** @class */ (function () {
         this.toggleElement(true);
         this.reflow();
         this.viewState.notifyLayoutEnd();
+        this.viewState.emitEvent(slotDragEventName.refreshSlotSelection);
     };
     BaseView.prototype.assignResources = function () {
         assignTasksResources(this.tasks, {
@@ -249,16 +278,16 @@ var BaseView = /** @class */ (function () {
         });
     };
     BaseView.prototype.onPress = function (args) {
-        var resizable = this.editable && this.editable.resize !== false;
-        var draggable = this.editable && this.editable.drag !== false;
+        var editResizable = this.editable && this.editable.resize !== false;
+        var editDraggable = this.editable && this.editable.drag !== false;
         var target = args.originalEvent.target;
         if (hasClasses(target, 'k-resize-handle')) {
-            if (!resizable) {
+            if (!editResizable) {
                 return;
             }
             this.initResize(args);
         }
-        else if (draggable) {
+        else if (editDraggable) {
             var task = this.targetTask(target);
             if (task) {
                 if (!args.isTouch) {
@@ -268,6 +297,10 @@ var BaseView = /** @class */ (function () {
                 this.pressTarget = task;
             }
         }
+        var notDraggingEvent = !this.pressTarget;
+        if (notDraggingEvent && this.selectable) {
+            this.initDragSelect(args);
+        }
         this.dragArgs = args;
     };
     BaseView.prototype.onDrag = function (args) {
@@ -282,12 +315,15 @@ var BaseView = /** @class */ (function () {
                 args.originalEvent.preventDefault();
                 this.scrollContainer(this.drag, args);
             }
+            if (this.dragSelecting) {
+                this.dragSelect(args);
+            }
         }
         this.dragArgs = args;
     };
-    BaseView.prototype.onRelease = function () {
+    BaseView.prototype.onRelease = function (args) {
         clearInterval(this.scrollInterval);
-        var _a = this, resizing = _a.resizing, dragging = _a.dragging;
+        var _a = this, resizing = _a.resizing, dragging = _a.dragging, dragSelecting = _a.dragSelecting;
         if (resizing) {
             this.emitEvent('resizeEnd', {
                 event: resizing.task.event,
@@ -314,6 +350,20 @@ var BaseView = /** @class */ (function () {
             this.resizing = null;
             this.dragging = null;
         }
+        if (dragSelecting) {
+            var _b = normaliseRangeStartAndEnd(this.dragSelectOrigin, this.dragSelecting), start = _b.start, end = _b.end;
+            var range = {
+                start: this.convertDate(start),
+                end: this.convertDate(end),
+                isAllDay: this.dragSelecting.isDaySlot,
+                resources: this.resourcesByIndex(this.dragSelecting.id.resourceIndex),
+                originalEvent: args.originalEvent
+            };
+            this.viewState.notifySlotSelectionEnd(range);
+            this.dragSelectOrigin = null;
+            this.dragSelecting = null;
+            this.cdr.markForCheck();
+        }
         this.container = null;
         this.dragArgs = null;
         this.pressLocation = null;
@@ -465,6 +515,51 @@ var BaseView = /** @class */ (function () {
             this.updateHintContainer();
         }
     };
+    BaseView.prototype.initDragSelect = function (args) {
+        this.updateDragContainer(args);
+        if (!this.containerOffset) {
+            return;
+        }
+        var _a = this.coordinatesOffset(args.pageX, args.pageY), x = _a.x, y = _a.y;
+        var slot = this.slotByPosition(x, y, this.container);
+        if (!slot) {
+            return;
+        }
+        var range = {
+            start: this.convertDate(slot.start),
+            end: this.convertDate(slot.end),
+            isAllDay: slot.isDaySlot,
+            resources: this.resourcesByIndex(slot.id.resourceIndex),
+            originalEvent: args.originalEvent
+        };
+        var slotDragStartEvent = new SlotDragStartEvent(null, range);
+        this.viewState.notifySlotSelectionStart(slotDragStartEvent);
+        if (!slotDragStartEvent.isDefaultPrevented()) {
+            this.dragSelecting = slot;
+            this.dragSelectOrigin = slot;
+            this.cdr.markForCheck();
+        }
+    };
+    BaseView.prototype.dragSelect = function (args) {
+        var _a = this.coordinatesOffset(args.pageX, args.pageY), x = _a.x, y = _a.y;
+        var slot = this.slotByPosition(x, y, this.container);
+        if (!slot) {
+            return;
+        }
+        if (this.dragSelecting !== slot) {
+            this.dragSelecting = slot;
+            var _b = normaliseRangeStartAndEnd(this.dragSelectOrigin, this.dragSelecting), start = _b.start, end = _b.end;
+            var range = {
+                start: this.convertDate(start),
+                end: this.convertDate(end),
+                isAllDay: slot.isDaySlot,
+                resources: this.resourcesByIndex(slot.id.resourceIndex),
+                originalEvent: args.originalEvent
+            };
+            this.viewState.notifySlotSelectionDrag(range);
+            this.cdr.markForCheck();
+        }
+    };
     BaseView.prototype.dragHintClasses = function () {
         var hintClass = this.dragging.hintClass;
         var result = [];

package/dist/es/views/common/slot-selectable.directive.js

@@ -0,0 +1,117 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { intersects, isSameRange, resourcesMatch } from '../utils';
+import { SchedulerComponent } from '../../scheduler.component';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
+import { isChanged } from '@progress/kendo-angular-common';
+/**
+ * A directive which manages the in-memory selection state of the Scheduler slots
+ * ([see example]({% slug slotselection_scheduler %}#toc-built-in-directive)).
+ */
+var SlotSelectableDirective = /** @class */ (function () {
+    function SlotSelectableDirective(scheduler, cdr) {
+        var _this = this;
+        this.scheduler = scheduler;
+        this.cdr = cdr;
+        /**
+         * Fires when the currently selected slot range has changed through user interaction.
+         */
+        this.slotSelectionChange = new EventEmitter();
+        this.selectedRange = null;
+        this.slotSelectionChangeSource = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.scheduler.selectable = true;
+        this.subscriptions.add(this.slotSelectionChangeSource
+            .pipe(distinctUntilChanged(isSameRange)).subscribe(function (v) {
+            _this.slotSelectionChange.emit(v);
+        }));
+        var start$ = this.scheduler.slotDragStart;
+        var drag$ = this.scheduler.slotDrag;
+        var end$ = this.scheduler.slotDragEnd;
+        var startSource = start$.pipe(filter(function (e) { return !e.isDefaultPrevented(); }));
+        this.subscriptions.add(startSource.subscribe(function (e) { return _this.initDragSelect(e); }));
+        this.subscriptions.add(drag$.subscribe(function (e) { return _this.onDrag(e); }));
+        this.subscriptions.add(end$.subscribe(function () { return _this.onRelease(); }));
+    }
+    SlotSelectableDirective.prototype.ngOnInit = function () {
+        this.scheduler.isSlotSelected = this.isSlotSelected.bind(this);
+    };
+    SlotSelectableDirective.prototype.ngOnChanges = function (changes) {
+        if (isChanged("slotSelection", changes, false)) {
+            /**
+             * The default values for resources below are necessarry because this is not fixed yet: https://github.com/telerik/kendo-angular-scheduler/pull/338
+             */
+            var resources = this.scheduler.resources ? [this.scheduler.resources[0].data[0]] : [undefined];
+            this.selectedRange = Object.assign({}, { isAllDay: false, resources: resources }, changes.slotSelection.currentValue);
+            this.cdr.markForCheck();
+        }
+    };
+    SlotSelectableDirective.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
+    };
+    SlotSelectableDirective.prototype.isSlotSelected = function (_a) {
+        var start = _a.start, end = _a.end, isAllDay = _a.isAllDay, resources = _a.resources;
+        if (!start || !end || !this.selectedRange) {
+            return false;
+        }
+        var match = resourcesMatch(this.selectedRange.resources, resources);
+        if (!match) {
+            return false; // Limit selection to the grouped resource where the drag started.
+        }
+        return this.selectedRange && isAllDay === this.selectedRange.isAllDay && this.isInRange(start, end);
+    };
+    SlotSelectableDirective.prototype.initDragSelect = function (_a) {
+        var start = _a.start, end = _a.end, isAllDay = _a.isAllDay, resources = _a.resources;
+        this.selectionOriginResources = resources.slice();
+        this.selectedRange = { start: start, end: end, isAllDay: isAllDay, resources: resources.slice() };
+        this.cdr.markForCheck();
+    };
+    SlotSelectableDirective.prototype.onDrag = function (_a) {
+        var start = _a.start, end = _a.end, resources = _a.resources;
+        var match = resourcesMatch(this.selectionOriginResources, resources);
+        if (!match) {
+            return; // Don't change selection when dragging over a different grouped resource's cells.
+        }
+        this.selectedRange.start = start;
+        this.selectedRange.end = end;
+        this.cdr.markForCheck();
+    };
+    SlotSelectableDirective.prototype.onRelease = function () {
+        this.selectionOriginResources = null;
+        if (this.selectedRange) {
+            this.slotSelectionChangeSource.emit(this.selectedRange);
+        }
+    };
+    /**
+     * @hidden
+     * Checks if the selected range contains a local date range.
+     */
+    SlotSelectableDirective.prototype.isInRange = function (start, end) {
+        if (!this.selectedRange) {
+            return;
+        }
+        return intersects(start, end, this.selectedRange.start, this.selectedRange.end);
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], SlotSelectableDirective.prototype, "slotSelection", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], SlotSelectableDirective.prototype, "slotSelectionChange", void 0);
+    SlotSelectableDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoSchedulerSlotSelectable]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [SchedulerComponent,
+            ChangeDetectorRef])
+    ], SlotSelectableDirective);
+    return SlotSelectableDirective;
+}());
+export { SlotSelectableDirective };

package/dist/es/views/common/view-footer.component.js

@@ -42,7 +42,7 @@ var ViewFooterComponent = /** @class */ (function () {
         Component({
             // tslint:disable-next-line:component-selector
             selector: '[viewFooter]',
-            template: "\n        <button type=\"button\" class=\"k-button\" *ngFor=\"let item of items\" [ngClass]=\"item.cssClass\" (click)=\"onItemClick($event, item)\">\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"item.iconClass\"></span>\n            <span class=\"k-button-text\">{{ item.text }}</span>\n        </button>\n    "
+            template: "\n        <button type=\"button\" kendoButton *ngFor=\"let item of items\" [ngClass]=\"item.cssClass\" (click)=\"onItemClick($event, item)\">\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"item.iconClass\"></span>\n            <span class=\"k-button-text\">{{ item.text }}</span>\n        </button>\n    "
         })
     ], ViewFooterComponent);
     return ViewFooterComponent;

package/dist/es/views/common/views-shared.module.js

@@ -13,6 +13,7 @@ import { ResourceIteratorPipe } from './resource-iterator.pipe';
 import { HintContainerComponent } from './hint-container.component';
 import { ResizeHintComponent } from './resize-hint.component';
 import { SharedModule } from '../../shared.module';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
 var DECLARATIONS = [
     ViewFooterComponent,
     WorkHoursFooterDirective,
@@ -29,7 +30,7 @@ var ViewsSharedModule = /** @class */ (function () {
     }
     ViewsSharedModule = tslib_1.__decorate([
         NgModule({
-            imports: [CommonModule, IntlModule, SharedModule],
+            imports: [CommonModule, IntlModule, SharedModule, ButtonsModule],
             exports: [
                 DECLARATIONS,
                 IntlModule,

package/dist/es/views/day-time/day-time-view.component.js

@@ -25,7 +25,7 @@ var ɵ2 = getNextDate;
 var DayTimeViewComponent = /** @class */ (function (_super) {
     tslib_1.__extends(DayTimeViewComponent, _super);
     function DayTimeViewComponent(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) {
-        var _this = _super.call(this, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) || this;
+        var _this = _super.call(this, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector) || this;
         _this.changeDetector = changeDetector;
         _this.numberOfDays = 1;
         _this.startTime = '00:00';

package/dist/es/views/day-time/day-time.module.js

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '../../shared.module';
 import { TimeSlotDirective, DaySlotDirective } from './event-slot.directive';
 import { DayTimeViewItemComponent } from './day-time-view-item.component';
+import { ViewsSharedModule } from '../common/views-shared.module';
 var DIRECTIVES = [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent];
 /**
  * @hidden
@@ -17,7 +18,7 @@ var DayTimeModule = /** @class */ (function () {
     }
     DayTimeModule = tslib_1.__decorate([
         NgModule({
-            imports: [CommonModule, SharedModule],
+            imports: [CommonModule, SharedModule, ViewsSharedModule],
             exports: [
                 DIRECTIVES
             ],

package/dist/es/views/month/month-view-renderer.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef } from '@angular/core';
+import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { isChanged } from '@progress/kendo-angular-common';
 import { addDays, addMonths, firstDayInWeek, firstDayOfMonth, getDate, toLocalDate } from '@progress/kendo-date-math';
@@ -23,8 +23,8 @@ var WEEKS_COUNT = 6;
  */
 var MonthViewRendererComponent = /** @class */ (function (_super) {
     tslib_1.__extends(MonthViewRendererComponent, _super);
-    function MonthViewRendererComponent(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization) {
-        var _this = _super.call(this, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) || this;
+    function MonthViewRendererComponent(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector) {
+        var _this = _super.call(this, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector) || this;
         _this.resizeHintFormat = { skeleton: 'Md' };
         _this.weeks = [];
         return _this;
@@ -80,6 +80,9 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
     MonthViewRendererComponent.prototype.cellTitle = function (value) {
         return this.intl.formatDate(value, 'D');
     };
+    MonthViewRendererComponent.prototype.addDay = function (dayStart) {
+        return addDays(dayStart, 1);
+    };
     MonthViewRendererComponent.prototype.optionsChange = function (changes) {
         this.schedulerMonthDaySlotTemplate = changes.monthDaySlotTemplate;
         _super.prototype.optionsChange.call(this, changes);
@@ -194,7 +197,7 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
             providers: [
                 MonthSlotService
             ],
-            template: "\n        <div class=\"k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout\">\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #timesHeader *ngIf=\"verticalResources.length\">\n                    <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                        <tr>\n                            <th></th>\n                        </tr>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-header k-state-default\" #header>\n                    <div class=\"k-scheduler-header-wrap\" #headerWrap>\n                       <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                         <tr *ngFor=\"let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex\">\n                             <th *ngFor=\"let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex\"\n                                 class=\"k-slot-cell\" [attr.colspan]=\"horizontalColspan(resourceIndex)\">\n                                <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(item, resource.textField) }}</ng-container>\n                                <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                             </th>\n                         </tr>\n                         <tr>\n                             <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex\">\n                                 <th *ngFor=\"let day of weeks[0]; trackBy: itemIndex\">\n                                     {{ day | kendoDate: 'EEEE' }}\n                                 </th>\n                             </ng-container>\n                         </tr>\n                       </table>\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times k-scheduler-resources\" #times *ngIf=\"verticalResources.length\">\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex\">\n                            <tr>\n                                <ng-container *ngFor=\"let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex\">\n                                    <th *ngIf=\"verticalItem(leafIndex, resourceIndex)\" [attr.rowspan]=\"verticalRowspan(resourceIndex)\" class=\"k-slot-cell\" [ngClass]=\"{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }\">\n                                        <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>\n                                        <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ resource: verticalItem(leafIndex, resourceIndex) }\"></ng-container>\n                                    </th>\n                                </ng-container>\n                                <th class=\"k-slot-cell k-empty-slot\">\n                                </th>\n                            </tr>\n                            <tr *ngFor=\"let index of 5 | repeat; trackBy: itemIndex\">\n                                <th class=\"k-slot-cell k-empty-slot\"></th>\n                            </tr>\n                        </ng-container>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-content\" #content>\n                     <table class=\"k-scheduler-table\" #contentTable role=\"presentation\">\n                         <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex\">\n                             <tr *ngFor=\"let week of weeks;  let rangeIndex = index; trackBy: itemIndex\">\n                                <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex\">\n                                     <td *ngFor=\"let day of week; let index = index; trackBy: itemIndex\"\n                                         monthSlot\n                                         [ngClass]=\"daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)\"\n                                         [start]=\"day\"\n                                         [id]=\"{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }\"\n                                         [title]=\"cellTitle(day)\"\n                                         >\n                                        <span aria-hidden=\"true\" class=\"k-link k-nav-day\" *ngIf=\"!monthDaySlotTemplateRef\" >{{ day | kendoDate: 'dd' }}</span>\n                                        <ng-container *ngIf=\"monthDaySlotTemplateRef\" [ngTemplateOutlet]=\"monthDaySlotTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }\"></ng-container>\n                                     </td>\n                                </ng-container>\n                             </tr>\n                         </ng-container>\n                     </table>\n                     <ng-container *ngFor=\"let item of items | async; trackBy: itemIndex\">\n                         <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex\"\n                            [ngClass]=\"getEventClasses(item, itemResource.resources)\"\n                            [ngStyle]=\"getEventStyles(item, itemResource)\"\n                            [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                            monthViewItem\n                                [editable]=\"editable\"\n                                [item]=\"item\"\n                                [index]=\"item.index\"\n                                [rangeIndex]=\"item.rangeIndex\"\n                                [eventTemplate]=\"eventTemplateRef\"\n                                [resources]=\"itemResource.resources\"\n                                [resourceIndex]=\"itemResource.leafIdx\">\n                         </div>\n                     </ng-container>\n                     <kendo-hint-container #hintContainer>\n                        <ng-template>\n                            <div *ngFor=\"let hint of dragHints; trackBy: itemIndex;\"\n                                class=\"k-event-drag-hint\"\n                                monthViewItem\n                                    [ngStyle]=\"hint.style\"\n                                    [ngClass]=\"hint.class\"\n                                    [dragHint]=\"true\"\n                                    [eventTemplate]=\"eventTemplateRef\"\n                                    [item]=\"hint.item\"\n                                    [resources]=\"hint.resources\">\n                            </div>\n\n                            <div *ngFor=\"let hint of resizeHints; trackBy: itemIndex;\"\n                                kendoResizeHint\n                                    [hint]=\"hint\"\n                                    [ngClass]=\"hint.class\"\n                                    [format]=\"resizeHintFormat\">\n                            </div>\n                        </ng-template>\n                     </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout\">\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #timesHeader *ngIf=\"verticalResources.length\">\n                    <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                        <tr>\n                            <th></th>\n                        </tr>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-header k-state-default\" #header>\n                    <div class=\"k-scheduler-header-wrap\" #headerWrap>\n                       <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                         <tr *ngFor=\"let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex\">\n                             <th *ngFor=\"let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex\"\n                                 class=\"k-slot-cell\" [attr.colspan]=\"horizontalColspan(resourceIndex)\">\n                                <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(item, resource.textField) }}</ng-container>\n                                <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                             </th>\n                         </tr>\n                         <tr>\n                             <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex\">\n                                 <th *ngFor=\"let day of weeks[0]; trackBy: itemIndex\">\n                                     {{ day | kendoDate: 'EEEE' }}\n                                 </th>\n                             </ng-container>\n                         </tr>\n                       </table>\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times k-scheduler-resources\" #times *ngIf=\"verticalResources.length\">\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex\">\n                            <tr>\n                                <ng-container *ngFor=\"let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex\">\n                                    <th *ngIf=\"verticalItem(leafIndex, resourceIndex)\" [attr.rowspan]=\"verticalRowspan(resourceIndex)\" class=\"k-slot-cell\" [ngClass]=\"{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }\">\n                                        <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>\n                                        <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ resource: verticalItem(leafIndex, resourceIndex) }\"></ng-container>\n                                    </th>\n                                </ng-container>\n                                <th class=\"k-slot-cell k-empty-slot\">\n                                </th>\n                            </tr>\n                            <tr *ngFor=\"let index of 5 | repeat; trackBy: itemIndex\">\n                                <th class=\"k-slot-cell k-empty-slot\"></th>\n                            </tr>\n                        </ng-container>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-content\" #content>\n                     <table class=\"k-scheduler-table k-user-select-none\" #contentTable role=\"presentation\">\n                         <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex\">\n                             <tr *ngFor=\"let week of weeks;  let rangeIndex = index; trackBy: itemIndex\">\n                                <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex\">\n                                     <td *ngFor=\"let day of week; let index = index; trackBy: itemIndex\"\n                                         monthSlot\n                                         [ngClass]=\"daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)\"\n                                         [start]=\"day\"\n                                         [id]=\"{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }\"\n                                         [title]=\"cellTitle(day)\"\n                                         [class.k-state-selected]=\"isSlotSelected({\n                                             start: toPlainDate(day),\n                                             end: addDay(toPlainDate(day)),\n                                             isAllDay: true,\n                                             resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)\n                                         })\"\n                                        >\n                                        <span aria-hidden=\"true\" class=\"k-link k-nav-day\" *ngIf=\"!monthDaySlotTemplateRef\">{{ day | kendoDate: 'dd' }}</span>\n                                        <ng-container *ngIf=\"monthDaySlotTemplateRef\" [ngTemplateOutlet]=\"monthDaySlotTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }\"></ng-container>\n                                     </td>\n                                </ng-container>\n                             </tr>\n                         </ng-container>\n                     </table>\n                     <ng-container *ngFor=\"let item of items | async; trackBy: itemIndex\">\n                         <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex\"\n                            [ngClass]=\"getEventClasses(item, itemResource.resources)\"\n                            [ngStyle]=\"getEventStyles(item, itemResource)\"\n                            [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                            monthViewItem\n                                [editable]=\"editable\"\n                                [item]=\"item\"\n                                [index]=\"item.index\"\n                                [rangeIndex]=\"item.rangeIndex\"\n                                [eventTemplate]=\"eventTemplateRef\"\n                                [resources]=\"itemResource.resources\"\n                                [resourceIndex]=\"itemResource.leafIdx\">\n                         </div>\n                     </ng-container>\n                     <kendo-hint-container #hintContainer>\n                        <ng-template>\n                            <div *ngFor=\"let hint of dragHints; trackBy: itemIndex;\"\n                                class=\"k-event-drag-hint\"\n                                monthViewItem\n                                    [ngStyle]=\"hint.style\"\n                                    [ngClass]=\"hint.class\"\n                                    [dragHint]=\"true\"\n                                    [eventTemplate]=\"eventTemplateRef\"\n                                    [item]=\"hint.item\"\n                                    [resources]=\"hint.resources\">\n                            </div>\n\n                            <div *ngFor=\"let hint of resizeHints; trackBy: itemIndex;\"\n                                kendoResizeHint\n                                    [hint]=\"hint\"\n                                    [ngClass]=\"hint.class\"\n                                    [format]=\"resizeHintFormat\">\n                            </div>\n                        </ng-template>\n                     </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ViewContextService,
             ViewStateService,
@@ -204,7 +207,8 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
             ElementRef,
             Renderer2,
             PDFService,
-            LocalizationService])
+            LocalizationService,
+            ChangeDetectorRef])
     ], MonthViewRendererComponent);
     return MonthViewRendererComponent;
 }(BaseView));

package/dist/es/views/multi-day/multi-day-view-renderer.component.js

@@ -175,8 +175,8 @@ var MultiDayViewRendererComponent = /** @class */ (function (_super) {
         }
         _super.prototype.updateHintContainer.call(this);
     };
-    MultiDayViewRendererComponent.prototype.onRelease = function () {
-        _super.prototype.onRelease.call(this);
+    MultiDayViewRendererComponent.prototype.onRelease = function (args) {
+        _super.prototype.onRelease.call(this, args);
         this.dragContainers = null;
     };
     MultiDayViewRendererComponent.prototype.updateDragContainer = function (args) {
@@ -305,7 +305,7 @@ var MultiDayViewRendererComponent = /** @class */ (function (_super) {
             providers: [
                 DayTimeSlotService
             ],
-            template: "\n        <div class=\"k-scheduler-layout k-scheduler-flex-layout\" [ngClass]=\"classNames\">\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #timesHeader>\n                    <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                        <tr *ngFor=\"let resource of horizontalResources; trackBy: itemIndex;\">\n                            <th></th>\n                        </tr>\n                        <tr>\n                            <th>\u200B</th>\n                        </tr>\n                        <tr *ngIf=\"!verticalResources.length\">\n                            <th class=\"k-scheduler-times-all-day\" #allDayCell>{{ allDayMessage }}</th>\n                        </tr>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-header k-state-default\" #header>\n                    <div class=\"k-scheduler-header-wrap\" #headerWrap>\n                        <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                            <tr *ngFor=\"let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                <th *ngFor=\"let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;\"\n                                    class=\"k-slot-cell\" [attr.colspan]=\"horizontalColspan(resourceIndex)\">\n                                    <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(item, resource.textField) }}</ng-container>\n                                    <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                                </th>\n                            </tr>\n                            <tr>\n                                <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\">\n                                    <th *ngFor=\"let slot of daySlots; let index = index; trackBy: itemIndex\">\n                                        <span *ngIf=\"!dateHeaderTemplateRef\" class=\"k-link k-nav-day\" [attr.data-dayslot-index]=\"index\">{{ slot.start | kendoDate: dateFormat }}</span>\n                                        <ng-container *ngIf=\"dateHeaderTemplateRef\" [ngTemplateOutlet]=\"dateHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: slot.start }\"></ng-container>\n                                    </th>\n                                </ng-container>\n                            </tr>\n                        </table>\n                        <div style=\"position: relative;\" *ngIf=\"!verticalResources.length\">\n                            <table class=\"k-scheduler-table k-scheduler-header-all-day\" aria-hidden=\"true\">\n                                <tr>\n                                    <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;\">\n                                        <td *ngFor=\"let slot of daySlots; let index = index; trackBy: itemIndex\"\n                                            daySlot\n                                            [start]=\"slot.start\"\n                                            [end]=\"slot.end\"\n                                            [id]=\"{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }\"\n                                            [ngClass]=\"allDaySlotClass(slot, resourceIndex)\">\n                                            <ng-container *ngIf=\"allDaySlotTemplateRef\" [ngTemplateOutlet]=\"allDaySlotTemplateRef\"\n                                                [ngTemplateOutletContext]=\"{ date: slot.start, resources: resourcesByIndex(resourceIndex) }\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                </tr>\n                            </table>\n                            <ng-container *ngFor=\"let item of allDayItems | async; trackBy: itemIndex;\">\n                                <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                                    [ngClass]=\"getEventClasses(item, itemResource.resources, true)\"\n                                    [ngStyle]=\"getEventStyles(item, itemResource, true)\"\n                                    [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                                     dayTimeViewItem\n                                        [isAllDay]=\"true\"\n                                        [editable]=\"editable\"\n                                        [eventTemplate]=\"allDayEventTemplateRef\"\n                                        [item]=\"item\"\n                                        [index]=\"item.index\"\n                                        [rangeIndex]=\"item.rangeIndex\"\n                                        [resources]=\"itemResource.resources\"\n                                        [resourceIndex]=\"itemResource.leafIdx\">\n                                </div>\n                            </ng-container>\n                            <kendo-hint-container #headerHintContainer>\n                                <ng-template>\n                                    <div *ngIf=\"dragHints.length && allDayDragHint\"\n                                        class=\"k-event-drag-hint\"\n                                        dayTimeViewItem\n                                            [isAllDay]=\"true\"\n                                            [ngStyle]=\"dragHints[0].style\"\n                                            [ngClass]=\"dragHints[0].class\"\n                                            [dragHint]=\"true\"\n                                            [eventTemplate]=\"eventTemplateRef\"\n                                            [item]=\"dragHints[0].item\"\n                                            [resources]=\"dragHints[0].resources\">\n                                    </div>\n\n                                    <div *ngIf=\"resizeHints.length && allDayResizeHint\"\n                                        kendoResizeHint\n                                            [hint]=\"resizeHints[0]\"\n                                            [ngClass]=\"resizeHints[0].class\"\n                                            [format]=\"allDayResizeHintFormat\">\n                                    </div>\n                                </ng-template>\n                            </kendo-hint-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #times>\n                    <ng-container *ngIf=\"showCurrentTime\">\n                        <div *ngFor=\"let resource of verticalResources | resourceIterator; trackBy: itemIndex;\"\n                            #currentTimeArrow class=\"k-current-time k-current-time-arrow-right\">\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;\">\n                            <tr *ngIf=\"verticalResources.length\">\n                                <ng-container *ngFor=\"let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                    <th *ngIf=\"verticalItem(leafIndex, resourceIndex)\" [attr.rowspan]=\"verticalRowspan(resourceIndex)\" class=\"k-slot-cell\">\n                                        <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>\n                                        <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ resource: verticalItem(leafIndex, resourceIndex) }\"></ng-container>\n                                    </th>\n                                </ng-container>\n                                <th class=\"k-scheduler-times-all-day\" #allDayCell>{{ allDayMessage }}</th>\n                            </tr>\n                            <tr *ngFor=\"let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex\">\n                                <th *ngIf=\"slot.isMajor\" [ngClass]=\"{ 'k-slot-cell': slotDivisions === 1 }\">\n                                    <ng-container *ngIf=\"!majorTimeHeaderTemplateRef\">{{ slot.start | kendoDate: 't' }}</ng-container>\n                                    <ng-container *ngIf=\"majorTimeHeaderTemplateRef\" [ngTemplateOutlet]=\"majorTimeHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: slot.start }\"></ng-container>\n                                </th>\n                                <th *ngIf=\"!slot.isMajor\" [ngClass]=\"{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }\">\n                                    <ng-container *ngIf=\"minorTimeHeaderTemplateRef\" [ngTemplateOutlet]=\"minorTimeHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: slot.start }\">\n                                    </ng-container>\n                                </th>\n                            </tr>\n                        </ng-container>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-content\" #content>\n                    <ng-container *ngIf=\"showCurrentTime\">\n                        <div *ngFor=\"let resource of verticalResources | resourceIterator; trackBy: itemIndex;\"\n                            #currentTimeMarker class=\"k-current-time\">\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table\" #contentTable role=\"presentation\">\n                        <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;\">\n                            <tr class=\"k-scheduler-header-all-day\" *ngIf=\"verticalResources.length\">\n                                <td *ngFor=\"let slot of daySlots; let index = index; trackBy: itemIndex\"\n                                    daySlot\n                                    [start]=\"slot.start\"\n                                    [end]=\"slot.end\"\n                                    [id]=\"{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }\">\n                                    <ng-container *ngIf=\"allDaySlotTemplateRef\" [ngTemplateOutlet]=\"allDaySlotTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{ date: slot.start, resources: resourcesByIndex(verticalIndex) }\"></ng-container>\n                                </td>\n                            </tr>\n                            <tr *ngFor=\"let slot of timeSlots; index as index; trackBy: itemIndex\" [class.k-middle-row]=\"slot.isMajor\">\n                                <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;\">\n                                    <td *ngFor=\"let daySlot of daySlots; index as rangeIndex; trackBy: itemIndex\"\n                                        [ngClass]=\"timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)\"\n                                        timeSlot #timeSlot=\"timeSlot\"\n                                            [date]=\"daySlot.start\"\n                                            [invariantStart]=\"slot.start\"\n                                            [invariantEnd]=\"slot.end\"\n                                            [workDayStart]=\"workDayStartTime\"\n                                            [workDayEnd]=\"workDayEndTime\"\n                                            [workWeekStart]=\"workWeekStart\"\n                                            [workWeekEnd]=\"workWeekEnd\"\n                                            [id]=\"{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }\"\n                                    >\n                                        <ng-container *ngIf=\"timeSlotTemplateRef\" [ngTemplateOutlet]=\"timeSlotTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }\">\n                                        </ng-container>\n                                    </td>\n                                </ng-container>\n                            </tr>\n                        </ng-container>\n                    </table>\n                    <ng-container *ngFor=\"let item of items | async; trackBy: itemIndex;\">\n                        <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                            [ngClass]=\"getEventClasses(item, itemResource.resources)\"\n                            [ngStyle]=\"getEventStyles(item, itemResource)\"\n                            [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                            dayTimeViewItem\n                                [editable]=\"editable\"\n                                [vertical]=\"true\"\n                                [eventTemplate]=\"eventTemplateRef\"\n                                [item]=\"item\"\n                                [index]=\"item.index\"\n                                [rangeIndex]=\"item.rangeIndex\"\n                                [resources]=\"itemResource.resources\"\n                                [resourceIndex]=\"itemResource.leafIdx\">\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"verticalResources.length\">\n                        <ng-container *ngFor=\"let item of allDayItems | async; trackBy: itemIndex;\">\n                            <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                                [ngClass]=\"getEventClasses(item, itemResource.resources, true)\"\n                                [ngStyle]=\"getEventStyles(item, itemResource, true)\"\n                                [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                                dayTimeViewItem\n                                    [isAllDay]=\"true\"\n                                    [editable]=\"editable\"\n                                    [eventTemplate]=\"allDayEventTemplateRef\"\n                                    [item]=\"item\"\n                                    [index]=\"item.index\"\n                                    [rangeIndex]=\"item.rangeIndex\"\n                                    [resources]=\"itemResource.resources\"\n                                    [resourceIndex]=\"itemResource.leafIdx\">\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <kendo-hint-container #hintContainer>\n                        <ng-template>\n                            <div *ngIf=\"dragHints.length && (!allDayDragHint || verticalResources.length)\"\n                                class=\"k-event-drag-hint\"\n                                dayTimeViewItem\n                                    [isAllDay]=\"allDayDragHint\"\n                                    [ngStyle]=\"dragHints[0].style\"\n                                    [ngClass]=\"dragHints[0].class\"\n                                    [dragHint]=\"true\"\n                                    [eventTemplate]=\"eventTemplateRef\"\n                                    [resources]=\"dragHints[0].resources\"\n                                    [item]=\"dragHints[0].item\">\n                            </div>\n\n                            <ng-container *ngIf=\"resizeHints.length && (!allDayResizeHint || verticalResources.length)\">\n                                <div *ngFor=\"let hint of resizeHints; trackBy: itemIndex;\"\n                                    kendoResizeHint\n                                        [hint]=\"hint\"\n                                        [ngClass]=\"hint.class\"\n                                        [format]=\"allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat\">\n                                </div>\n                            </ng-container>\n                        </ng-template>\n                    </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-scheduler-layout k-scheduler-flex-layout\" [ngClass]=\"classNames\">\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #timesHeader>\n                    <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                        <tr *ngFor=\"let resource of horizontalResources; trackBy: itemIndex;\">\n                            <th></th>\n                        </tr>\n                        <tr>\n                            <th>\u200B</th>\n                        </tr>\n                        <tr *ngIf=\"!verticalResources.length\">\n                            <th class=\"k-scheduler-times-all-day\" #allDayCell>{{ allDayMessage }}</th>\n                        </tr>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-header k-state-default\" #header>\n                    <div class=\"k-scheduler-header-wrap\" #headerWrap>\n                        <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                            <tr *ngFor=\"let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                <th *ngFor=\"let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;\"\n                                    class=\"k-slot-cell\" [attr.colspan]=\"horizontalColspan(resourceIndex)\">\n                                    <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(item, resource.textField) }}</ng-container>\n                                    <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                                </th>\n                            </tr>\n                            <tr>\n                                <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\">\n                                    <th *ngFor=\"let slot of daySlots; let index = index; trackBy: itemIndex\">\n                                        <span *ngIf=\"!dateHeaderTemplateRef\" class=\"k-link k-nav-day\" [attr.data-dayslot-index]=\"index\">{{ slot.start | kendoDate: dateFormat }}</span>\n                                        <ng-container *ngIf=\"dateHeaderTemplateRef\" [ngTemplateOutlet]=\"dateHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: slot.start }\"></ng-container>\n                                    </th>\n                                </ng-container>\n                            </tr>\n                        </table>\n                        <div style=\"position: relative;\" *ngIf=\"!verticalResources.length\">\n                            <table class=\"k-scheduler-table k-scheduler-header-all-day k-user-select-none\" aria-hidden=\"true\">\n                                <tr>\n                                    <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;\">\n                                        <td *ngFor=\"let slot of daySlots; let index = index; trackBy: itemIndex\"\n                                            daySlot\n                                            [start]=\"slot.start\"\n                                            [end]=\"slot.end\"\n                                            [id]=\"{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }\"\n                                            [class.k-state-selected]=\"isSlotSelected({\n                                                start: toPlainDate(slot.start),\n                                                end: toPlainDate(slot.end),\n                                                isAllDay: true,\n                                                resources: resourcesByIndex(resourceIndex)\n                                            })\"\n                                            [ngClass]=\"allDaySlotClass(slot, resourceIndex)\">\n                                            <ng-container *ngIf=\"allDaySlotTemplateRef\" [ngTemplateOutlet]=\"allDaySlotTemplateRef\"\n                                                [ngTemplateOutletContext]=\"{ date: slot.start, resources: resourcesByIndex(resourceIndex) }\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                </tr>\n                            </table>\n                            <ng-container *ngFor=\"let item of allDayItems | async; trackBy: itemIndex;\">\n                                <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                                    [ngClass]=\"getEventClasses(item, itemResource.resources, true)\"\n                                    [ngStyle]=\"getEventStyles(item, itemResource, true)\"\n                                    [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                                     dayTimeViewItem\n                                        [isAllDay]=\"true\"\n                                        [editable]=\"editable\"\n                                        [eventTemplate]=\"allDayEventTemplateRef\"\n                                        [item]=\"item\"\n                                        [index]=\"item.index\"\n                                        [rangeIndex]=\"item.rangeIndex\"\n                                        [resources]=\"itemResource.resources\"\n                                        [resourceIndex]=\"itemResource.leafIdx\">\n                                </div>\n                            </ng-container>\n                            <kendo-hint-container #headerHintContainer>\n                                <ng-template>\n                                    <div *ngIf=\"dragHints.length && allDayDragHint\"\n                                        class=\"k-event-drag-hint\"\n                                        dayTimeViewItem\n                                            [isAllDay]=\"true\"\n                                            [ngStyle]=\"dragHints[0].style\"\n                                            [ngClass]=\"dragHints[0].class\"\n                                            [dragHint]=\"true\"\n                                            [eventTemplate]=\"eventTemplateRef\"\n                                            [item]=\"dragHints[0].item\"\n                                            [resources]=\"dragHints[0].resources\">\n                                    </div>\n\n                                    <div *ngIf=\"resizeHints.length && allDayResizeHint\"\n                                        kendoResizeHint\n                                            [hint]=\"resizeHints[0]\"\n                                            [ngClass]=\"resizeHints[0].class\"\n                                            [format]=\"allDayResizeHintFormat\">\n                                    </div>\n                                </ng-template>\n                            </kendo-hint-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #times>\n                    <ng-container *ngIf=\"showCurrentTime\">\n                        <div *ngFor=\"let resource of verticalResources | resourceIterator; trackBy: itemIndex;\"\n                            #currentTimeArrow class=\"k-current-time k-current-time-arrow-right\">\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;\">\n                            <tr *ngIf=\"verticalResources.length\">\n                                <ng-container *ngFor=\"let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                    <th *ngIf=\"verticalItem(leafIndex, resourceIndex)\" [attr.rowspan]=\"verticalRowspan(resourceIndex)\" class=\"k-slot-cell\">\n                                        <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>\n                                        <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ resource: verticalItem(leafIndex, resourceIndex) }\"></ng-container>\n                                    </th>\n                                </ng-container>\n                                <th class=\"k-scheduler-times-all-day\" #allDayCell>{{ allDayMessage }}</th>\n                            </tr>\n                            <tr *ngFor=\"let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex\">\n                                <th *ngIf=\"slot.isMajor\" [ngClass]=\"{ 'k-slot-cell': slotDivisions === 1 }\">\n                                    <ng-container *ngIf=\"!majorTimeHeaderTemplateRef\">{{ slot.start | kendoDate: 't' }}</ng-container>\n                                    <ng-container *ngIf=\"majorTimeHeaderTemplateRef\" [ngTemplateOutlet]=\"majorTimeHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: slot.start }\"></ng-container>\n                                </th>\n                                <th *ngIf=\"!slot.isMajor\" [ngClass]=\"{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }\">\n                                    <ng-container *ngIf=\"minorTimeHeaderTemplateRef\" [ngTemplateOutlet]=\"minorTimeHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: slot.start }\">\n                                    </ng-container>\n                                </th>\n                            </tr>\n                        </ng-container>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-content k-user-select-none\" #content>\n                    <ng-container *ngIf=\"showCurrentTime\">\n                        <div *ngFor=\"let resource of verticalResources | resourceIterator; trackBy: itemIndex;\"\n                            #currentTimeMarker class=\"k-current-time\">\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table\" #contentTable role=\"presentation\">\n                        <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;\">\n                            <tr class=\"k-scheduler-header-all-day\" *ngIf=\"verticalResources.length\">\n                                <td *ngFor=\"let slot of daySlots; let index = index; trackBy: itemIndex\"\n                                    daySlot\n                                    [start]=\"slot.start\"\n                                    [end]=\"slot.end\"\n                                    [class.k-state-selected]=\"isSlotSelected({\n                                        start: toPlainDate(slot.start),\n                                        end: toPlainDate(slot.end),\n                                        isAllDay: true,\n                                        resources: resourcesByIndex(verticalIndex)\n                                    })\"\n                                    [id]=\"{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }\">\n                                    <ng-container *ngIf=\"allDaySlotTemplateRef\" [ngTemplateOutlet]=\"allDaySlotTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{ date: slot.start, resources: resourcesByIndex(verticalIndex) }\"></ng-container>\n                                </td>\n                            </tr>\n                            <tr *ngFor=\"let slot of timeSlots; index as index; trackBy: itemIndex\" [class.k-middle-row]=\"slot.isMajor\">\n                                <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;\">\n                                    <td *ngFor=\"let daySlot of daySlots; index as rangeIndex; trackBy: itemIndex\"\n                                        [ngClass]=\"timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)\"\n                                        timeSlot #timeSlot=\"timeSlot\"\n                                            [date]=\"daySlot.start\"\n                                            [invariantStart]=\"slot.start\"\n                                            [invariantEnd]=\"slot.end\"\n                                            [workDayStart]=\"workDayStartTime\"\n                                            [workDayEnd]=\"workDayEndTime\"\n                                            [workWeekStart]=\"workWeekStart\"\n                                            [workWeekEnd]=\"workWeekEnd\"\n                                            [id]=\"{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }\"\n                                            [class.k-state-selected]=\"isSlotSelected({\n                                                start: toPlainDateTime(daySlot.start, slot.start),\n                                                end: toPlainDateTime(daySlot.start, slot.end),\n                                                isAllDay: false,\n                                                resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)\n                                            })\"\n                                    >\n                                        <ng-container *ngIf=\"timeSlotTemplateRef\" [ngTemplateOutlet]=\"timeSlotTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }\">\n                                        </ng-container>\n                                    </td>\n                                </ng-container>\n                            </tr>\n                        </ng-container>\n                    </table>\n                    <ng-container *ngFor=\"let item of items | async; trackBy: itemIndex;\">\n                        <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                            [ngClass]=\"getEventClasses(item, itemResource.resources)\"\n                            [ngStyle]=\"getEventStyles(item, itemResource)\"\n                            [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                            dayTimeViewItem\n                                [editable]=\"editable\"\n                                [vertical]=\"true\"\n                                [eventTemplate]=\"eventTemplateRef\"\n                                [item]=\"item\"\n                                [index]=\"item.index\"\n                                [rangeIndex]=\"item.rangeIndex\"\n                                [resources]=\"itemResource.resources\"\n                                [resourceIndex]=\"itemResource.leafIdx\">\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"verticalResources.length\">\n                        <ng-container *ngFor=\"let item of allDayItems | async; trackBy: itemIndex;\">\n                            <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                                [ngClass]=\"getEventClasses(item, itemResource.resources, true)\"\n                                [ngStyle]=\"getEventStyles(item, itemResource, true)\"\n                                [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                                dayTimeViewItem\n                                    [isAllDay]=\"true\"\n                                    [editable]=\"editable\"\n                                    [eventTemplate]=\"allDayEventTemplateRef\"\n                                    [item]=\"item\"\n                                    [index]=\"item.index\"\n                                    [rangeIndex]=\"item.rangeIndex\"\n                                    [resources]=\"itemResource.resources\"\n                                    [resourceIndex]=\"itemResource.leafIdx\">\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <kendo-hint-container #hintContainer>\n                        <ng-template>\n                            <div *ngIf=\"dragHints.length && (!allDayDragHint || verticalResources.length)\"\n                                class=\"k-event-drag-hint\"\n                                dayTimeViewItem\n                                    [isAllDay]=\"allDayDragHint\"\n                                    [ngStyle]=\"dragHints[0].style\"\n                                    [ngClass]=\"dragHints[0].class\"\n                                    [dragHint]=\"true\"\n                                    [eventTemplate]=\"eventTemplateRef\"\n                                    [resources]=\"dragHints[0].resources\"\n                                    [item]=\"dragHints[0].item\">\n                            </div>\n\n                            <ng-container *ngIf=\"resizeHints.length && (!allDayResizeHint || verticalResources.length)\">\n                                <div *ngFor=\"let hint of resizeHints; trackBy: itemIndex;\"\n                                    kendoResizeHint\n                                        [hint]=\"hint\"\n                                        [ngClass]=\"hint.class\"\n                                        [format]=\"allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat\">\n                                </div>\n                            </ng-container>\n                        </ng-template>\n                    </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             ViewContextService,