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

package/dist/fesm5/index.js

@@ -6,14 +6,14 @@ import { __extends, __decorate, __param, __metadata, __assign, __generator } fro
 import { Directive, Optional, TemplateRef, Injectable, NgZone, EventEmitter, Input, Renderer2, ElementRef, ChangeDetectorRef, Inject, isDevMode, HostBinding, Component, Output, ContentChild, ContentChildren, QueryList, ViewChild, ViewContainerRef, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, NgModule, LOCALE_ID, Pipe, ViewChildren, HostListener } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, RTL, MessageService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { hasObservers, isDocumentAvailable, isChanged, anyChanged, ResizeSensorComponent, EventsModule, guid, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
-import { getDate, Day, ZonedDate, isEqualDate, toLocalDate, MS_PER_DAY, addDays, firstDayOfMonth, addMonths, firstDayInWeek, timezoneNames } from '@progress/kendo-date-math';
+import { isEqualDate, getDate, Day, ZonedDate, toLocalDate, MS_PER_DAY, addDays, firstDayOfMonth, addMonths, firstDayInWeek, timezoneNames } from '@progress/kendo-date-math';
 import { validatePackage } from '@progress/kendo-licensing';
 import { PreventableEvent, CalendarComponent, CalendarModule, DatePickerComponent, DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { Subject, BehaviorSubject, fromEvent, Subscription, Observable, combineLatest, merge } from 'rxjs';
-import { buffer, filter, map, auditTime, debounceTime, take, switchMap, tap } from 'rxjs/operators';
+import { buffer, filter, map, auditTime, debounceTime, take, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
 import { FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { DialogCloseResult, DialogService, DialogModule } from '@progress/kendo-angular-dialog';
-import { IntlService, formatDate, IntlModule, CldrIntlService, parseDate } from '@progress/kendo-angular-intl';
+import { formatDate, IntlService, IntlModule, CldrIntlService, parseDate } from '@progress/kendo-angular-intl';
 import { CommonModule } from '@angular/common';
 import { parseRule, expand, serializeRule } from '@progress/kendo-recurrence';
 import { ButtonsModule, Button } from '@progress/kendo-angular-buttons';
@@ -21,7 +21,7 @@ import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { orderBy, groupBy } from '@progress/kendo-data-query';
 import Draggable from '@telerik/kendo-draggable';
 import { MultiSelectComponent, DropDownListComponent, ComboBoxComponent, DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import { NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
+import { CheckBoxModule, TextAreaModule, NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import { drawDOM, exportPDF } from '@progress/kendo-drawing';
 import { saveAs } from '@progress/kendo-file-saver';
 
@@ -32,7 +32,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637916885,
+    publishDate: 1644228429,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -363,6 +363,49 @@ var AddEvent = /** @class */ (function (_super) {
     return AddEvent;
 }(PreventableEvent$1));
 
+/**
+ * Arguments for the `slotDragStart` event.
+ * The event is preventable and if prevented, subsequent `slotDrag`, `slotDragEnd`, and `slotSelectionChange` will not be fired.
+ */
+var SlotDragStartEvent = /** @class */ (function (_super) {
+    __extends(SlotDragStartEvent, _super);
+    /**
+     * @hidden
+     */
+    function SlotDragStartEvent(sender, args) {
+        var _this = _super.call(this) || this;
+        _this.sender = sender;
+        Object.assign(_this, args);
+        return _this;
+    }
+    return SlotDragStartEvent;
+}(PreventableEvent$1));
+
+/**
+ * Arguments for the `slotDrag` event.
+ */
+var SlotDragEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function SlotDragEvent(sender, args) {
+        this.sender = sender;
+        Object.assign(this, args);
+    }
+    return SlotDragEvent;
+}());
+
+/**
+ * Arguments for the `slotDragEnd` event.
+ */
+var SlotDragEndEvent = /** @class */ (function (_super) {
+    __extends(SlotDragEndEvent, _super);
+    function SlotDragEndEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SlotDragEndEvent;
+}(SlotDragEvent));
+
 /**
  * Represents the toolbar template of the Scheduler. To define a toolbar
  * template, nest an `<ng-template kendoSchedulerToolbarTemplate>` tag
@@ -439,6 +482,25 @@ var SchedulerView = /** @class */ (function () {
     return SchedulerView;
 }());
 
+/**
+ * The arguments for the [`isSlotSelected`]({% slug api_scheduler_schedulercomponent %}#toc-isslotselected) callback.
+ */
+var IsSlotSelectedArgs = /** @class */ (function () {
+    function IsSlotSelectedArgs() {
+    }
+    return IsSlotSelectedArgs;
+}());
+/**
+ * @hidden
+ */
+var slotDragEventName;
+(function (slotDragEventName) {
+    slotDragEventName["initDragSelect"] = "initDragSelect";
+    slotDragEventName["dragSelect"] = "dragSelect";
+    slotDragEventName["refreshSlotSelection"] = "refreshSlotSelection";
+    slotDragEventName["dragSelectRelease"] = "dragSelectRelease";
+})(slotDragEventName || (slotDragEventName = {}));
+
 /**
  * Represents the template which renders the date header in the **Agenda** view.
  * To define the date template, nest an `<ng-template>` tag with the `kendoSchedulerAgendaDateTemplate`
@@ -867,12 +929,18 @@ var ViewStateService = /** @class */ (function () {
         this.viewEventSource = new Subject();
         this.layoutEndSource = new Subject();
         this.optionsChangeSource = new Subject();
+        this.slotSelectionStartSource = new Subject();
+        this.slotSelectionStartDragSource = new Subject();
+        this.slotSelectionStartEndSource = new Subject();
         this.dateRange = this.dateRangeSource.asObservable();
         this.nextDate = this.nextDateSource.asObservable();
         this.navigate = this.navigateSource.asObservable();
         this.viewEvent = this.viewEventSource.asObservable();
         this.layoutEnd = this.layoutEndSource.asObservable();
         this.optionsChange = this.optionsChangeSource.asObservable();
+        this.slotSelectionStart = this.slotSelectionStartSource.asObservable();
+        this.slotSelectionDrag = this.slotSelectionStartDragSource.asObservable();
+        this.slotSelectionEnd = this.slotSelectionStartEndSource.asObservable();
     }
     /**
      * Publishes the date that will be displayed by the Scheduler
@@ -916,6 +984,18 @@ var ViewStateService = /** @class */ (function () {
             args: args
         });
     };
+    /** @hidden */
+    ViewStateService.prototype.notifySlotSelectionStart = function (selection) {
+        this.slotSelectionStartSource.next(selection);
+    };
+    /** @hidden */
+    ViewStateService.prototype.notifySlotSelectionDrag = function (selection) {
+        this.slotSelectionStartDragSource.next(selection);
+    };
+    /** @hidden */
+    ViewStateService.prototype.notifySlotSelectionEnd = function (selection) {
+        this.slotSelectionStartEndSource.next(selection);
+    };
     ViewStateService = __decorate([
         Injectable(),
         __metadata("design:paramtypes", [])
@@ -1860,1398 +1940,1516 @@ function rtlScrollPosition(element, position) {
     return result;
 }
 
-var todayDate = function () { return getDate(new Date()); };
-var DAYS_IN_WEEK = 7;
+/** @hidden */
+var intersects = function (startTime, endTime, periodStart, periodEnd) {
+    return (startTime < periodStart && endTime > periodEnd) ||
+        (periodStart <= startTime && startTime < periodEnd) ||
+        (periodStart < endTime && endTime <= periodEnd && startTime < endTime);
+};
+/** @hidden */
+var dateInRange = function (date, start, end) { return start.getTime() <= date.getTime() && date.getTime() <= end.getTime(); };
+/** @hidden */
+var roundAllDayEnd = function (_a) {
+    var start = _a.start, end = _a.end;
+    var startDate = start.stripTime();
+    var endDate = end.stripTime();
+    return endDate.getTime() !== end.getTime() || startDate.getTime() === endDate.getTime() ? endDate.addDays(1) : endDate;
+};
+/** @hidden */
+function toInvariantTime(date) {
+    var staticDate = new Date(1980, 0, 1, 0, 0, 0);
+    if (date) {
+        staticDate.setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+    }
+    return staticDate;
+}
 /**
- * Represents the [Kendo UI Scheduler component for Angular]({% slug overview_scheduler %}).
- *
- * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-scheduler style="height: 600px">
- *            <kendo-scheduler-day-view>
- *            </kendo-scheduler-day-view>
- *            <kendo-scheduler-week-view>
- *            </kendo-scheduler-week-view>
- *        </kendo-scheduler>
- *    `
- * })
- * class AppComponent {}
- * ```
+ * @hidden
+ * TODO Move to date-math
  */
-var SchedulerComponent = /** @class */ (function () {
-    function SchedulerComponent(wrapper, viewContext, viewState, editService, dialogsService, intlService, changeDetector, zone, pdfService, localization, domEvents, renderer, focusService) {
-        this.wrapper = wrapper;
-        this.viewContext = viewContext;
-        this.viewState = viewState;
-        this.editService = editService;
-        this.dialogsService = dialogsService;
-        this.intlService = intlService;
-        this.changeDetector = changeDetector;
-        this.zone = zone;
-        this.pdfService = pdfService;
-        this.localization = localization;
-        this.domEvents = domEvents;
-        this.renderer = renderer;
-        this.focusService = focusService;
-        this.hostClasses = true;
-        this.rtl = false;
-        /**
-         * Specifies if the Scheduler is editable.
-         */
-        this.editable = false;
-        /**
-         * The height of the events in the **Month** and **Timeline** views, and the height of the **All day** events in the **Day** and **Week** views.
-         */
-        this.eventHeight = 25;
-        /**
-         * Specifies the columns width. Applicable for the **Timeline** views.
-         */
-        this.columnWidth = 100;
-        /**
-         * The start time of the view. The Scheduler displays events which start after the start time.
-         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
-         */
-        this.startTime = '00:00';
-        /**
-         * The end time of the view. The Scheduler displays events which end before the end time.
-         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
-         */
-        this.endTime = '00:00';
-        /**
-         * The start time of the view when `showWorkHours` is set to `true`.
-         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
-         */
-        this.workDayStart = '08:00';
-        /**
-         * The end time of the view when `showWorkHours` is set to `true`.
-         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
-         */
-        this.workDayEnd = '17:00';
-        /**
-         * The duration (in minutes) of the time slots. Applicable for the day, week and timeline views.
-         */
-        this.slotDuration = 60;
-        /**
-         * The number of divisions of the time slots. Applicable for the **Day**, **Week**, and **Timeline** views.
-         */
-        this.slotDivisions = 2;
-        /**
-         * A numeric value between 0 and 1 that specifies what percentage of the slot will be filled by the events.
-         * Applicable for the **Day** and **Week** views.
-         * Defaults to `0.9` (90% fill).
-         */
-        this.slotFill = 0.9;
-        /**
-         * The time to which the view will initially be scrolled.
-         * Accepts string values in the `HH:mm` format or a JavaScript `Date`. Applicable for the **Day**, **Week**, and **Timeline** views.
-         */
-        this.scrollTime = this.workDayStart;
-        /**
-         * Specifies the Scheduler current time marker settings.
-         */
-        this.currentTimeMarker = true;
-        /**
-         * @hidden
-         */
-        this.selectedViewIndexChange = new EventEmitter();
-        /**
-         * Fires when the Scheduler is about to execute a navigation action
-         * (a view, date, or focus change).
-         */
-        this.navigate = new EventEmitter();
-        /**
-         * Fires when the date range that is displayed in the Scheduler changes.
-         */
-        this.dateChange = new EventEmitter();
-        /**
-         * Fires when a Scheduler view slot is clicked.
-         */
-        this.slotClick = new EventEmitter();
-        /**
-         * Fires when a Scheduler view slot is double-clicked.
-         */
-        this.slotDblClick = new EventEmitter();
-        /**
-         * Fires when the user creates a new event using the `'c'` key.
-         * ([see example]({% slug keyboard_navigation_scheduler %})).
-         */
-        this.create = new EventEmitter();
-        /**
-         * Fires when a Scheduler event is clicked.
-         */
-        this.eventClick = new EventEmitter();
-        /**
-         * Fires when a Scheduler event is double-clicked.
-         */
-        this.eventDblClick = new EventEmitter();
-        /**
-         * Fires when a key is pressed on a focused Scheduler event.
-         */
-        this.eventKeydown = new EventEmitter();
-        /**
-         * Fires when the user cancels the editing by clicking the **Cancel** command button.
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Save** command button to save the changes of the edited event.
-         */
-        this.save = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Remove** icon of a Scheduler event.
-         */
-        this.remove = new EventEmitter();
-        /**
-         * Fires when the user starts resizing a Scheduler event.
-         */
-        this.resizeStart = new EventEmitter();
-        /**
-         * Fires when the user is resizing a Scheduler event.
-         */
-        this.resize = new EventEmitter();
-        /**
-         * Fires when the user stops resizing a Scheduler event.
-         */
-        this.resizeEnd = new EventEmitter();
-        /**
-         * Fires when the user starts dragging a Scheduler event.
-         */
-        this.dragStart = new EventEmitter();
-        /**
-         * Fires when the user is dragging a Scheduler event.
-         */
-        this.drag = new EventEmitter();
-        /**
-         * Fires when the user stops dragging a Scheduler event.
-         */
-        this.dragEnd = new EventEmitter();
-        /**
-         * Fires when the user clicks the **PDF export** command button.
-         */
-        this.pdfExport = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.dragEndConfirmed = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.resizeEndConfirmed = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.removeConfirmed = new EventEmitter();
-        this.viewIndex = 0;
-        this._timezone = '';
-        this._modelFields = defaultModelFields;
-        validatePackage(packageMetadata);
-        this.dateRangeStream = viewState.dateRange;
-        this.selectedDateStream = viewContext.selectedDate;
-    }
-    Object.defineProperty(SchedulerComponent.prototype, "dir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SchedulerComponent.prototype, "selectedViewIndex", {
-        get: function () {
-            return this.viewIndex;
-        },
-        /**
-         * The index of the currently selected view.
-         *
-         * By default, the selected view index is `0` and
-         * indicates that the first declared view is visible.
-         */
-        set: function (index) {
-            this.viewIndex = index;
-            this.onViewIndexChange();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SchedulerComponent.prototype, "weekStart", {
-        get: function () {
-            if (isPresent(this._weekStart)) {
-                return this._weekStart;
-            }
-            return this.intlService.firstDay();
-        },
-        /**
-         * The first day of the week. Applicable to **Week**, **Month** and **TimelineWeek** views.
-         * Defaults to the locale settings.
-         */
-        set: function (value) {
-            this._weekStart = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SchedulerComponent.prototype, "timezone", {
-        get: function () {
-            return this._timezone;
-        },
-        /**
-         * Specifies the id of the timezone that will be displayed in the Scheduler.
-         * For example, `Europe/Sofia`.
-         * Defaults to `Etc/UTC`.
-         */
-        set: function (value) {
-            this._timezone = value;
-            this.events = this.events || [];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SchedulerComponent.prototype, "events", {
-        get: function () {
-            return this._events;
-        },
-        /**
-         * An array of event instances which will be shown by the Scheduler.
-         */
-        set: function (value) {
-            this._events = value;
-            this.processEvents(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SchedulerComponent.prototype, "selectedDate", {
-        get: function () {
-            return this._selectedDate;
-        },
-        /**
-         * The currently selected date of the Scheduler.
-         * Determines the period which is displayed.
-         */
-        set: function (value) {
-            if (!value) {
-                return;
+var addUTCDays = function (date, offset) {
+    var newDate = new Date(date.getTime());
+    newDate.setUTCDate(newDate.getUTCDate() + offset);
+    return newDate;
+};
+// TODO: name? move to date-math
+/** @hidden */
+function toUTCTime(localDate, localTime) {
+    return new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), localTime.getHours(), localTime.getMinutes(), localTime.getSeconds(), localTime.getMilliseconds()));
+}
+//  TODO: move to date-math
+/** @hidden */
+function toUTCDate(localDate) {
+    return new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate()));
+}
+// TODO: move to date-math
+/** @hidden */
+function getUTCDate(utcDate) {
+    return new Date(Date.UTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate()));
+}
+// TODO: move to date-math
+/** @hidden */
+function toUTCDateTime(localDate) {
+    return new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), localDate.getHours(), localDate.getMinutes(), localDate.getSeconds(), localDate.getMilliseconds()));
+}
+/** @hidden */
+function dateWithTime(target, time) {
+    return new Date(target.getFullYear(), target.getMonth(), target.getDate(), time.getHours(), time.getMinutes());
+}
+/**
+ * @hidden
+ * Flips the start and end values of a slot selection based on whether
+ * the last dragged-over slot is before or after the slot where the selection began.
+ */
+function normaliseRangeStartAndEnd(selectionOrigin, currentSlot) {
+    var start;
+    var end;
+    if (currentSlot.end <= selectionOrigin.end) {
+        end = selectionOrigin.end;
+        start = currentSlot.start;
+    }
+    else {
+        start = selectionOrigin.start;
+        end = currentSlot.end;
+    }
+    return { start: start, end: end };
+}
+function getDataIdx(value, resource) {
+    var data = resource.data;
+    for (var dataIdx = 0; dataIdx < data.length; dataIdx++) {
+        if (getField(data[dataIdx], resource.valueField) === value) {
+            return dataIdx;
+        }
+    }
+    return -1;
+}
+function resourceItem(value, resource) {
+    var index = getDataIdx(value, resource);
+    return index >= 0 ? resource.data[index] : {};
+}
+function resourceItems(values, resource) {
+    return values.map(function (value) { return resourceItem(value, resource); });
+}
+function cloneResources(arr) {
+    var result = [];
+    for (var idx = 0; idx < arr.length; idx++) {
+        var clone$$1 = Object.assign({}, arr[idx]);
+        clone$$1.resources = clone$$1.resources.slice(0);
+        result.push(clone$$1);
+    }
+    return result;
+}
+/** @hidden */
+function resourceItemByValue(event, resource) {
+    var value = getField(event, resource.field);
+    if (Array.isArray(value)) {
+        return resourceItems(value, resource);
+    }
+    return resourceItem(value, resource);
+}
+function addNotGroupedResources(event, resources, allResources) {
+    for (var resourceIdx = 0; resourceIdx < resources.length; resourceIdx++) {
+        var current = resources[resourceIdx];
+        for (var idx = 0; idx < allResources.length; idx++) {
+            var item = allResources[idx];
+            if (!current.resources[idx] && item.data) {
+                current.resources[idx] = resourceItemByValue(event, item);
             }
-            this._selectedDate = value;
-            this.viewContext.notifySelectedDate(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SchedulerComponent.prototype, "modelFields", {
-        get: function () {
-            return this._modelFields;
-        },
-        /**
-         * The names of the model fields from which the Scheduler will read its data
-         * ([see example]({% slug databinding_scheduler %}#toc-binding-to-models)).
-         */
-        set: function (value) {
-            this._modelFields = __assign({}, defaultModelFields, value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SchedulerComponent.prototype.ngOnInit = function () {
-        if (!this.selectedDate) {
-            this.selectedDate = todayDate();
         }
-    };
-    SchedulerComponent.prototype.ngAfterContentInit = function () {
-        var _this = this;
-        if (isDevMode() && this.views.length === 0) {
-            throw new Error('No views declared for <kendo-scheduler>. Please, declare at least one view.');
+    }
+}
+/** @hidden */
+function eventResources(event, _a) {
+    var taskResources = _a.taskResources, hasGroups = _a.hasGroups, spans = _a.spans, _b = _a.allResources, allResources = _b === void 0 ? [] : _b;
+    var resources = [];
+    for (var resourceIdx = 0; resourceIdx < taskResources.length; resourceIdx++) {
+        var resource = taskResources[resourceIdx];
+        if (!resource.data) {
+            resources = [{ leafIdx: 0, resources: [] }];
+            continue;
         }
-        this.subs = this.views.changes.subscribe(function () {
-            return _this.resetViewIndex();
-        });
-        this.subs.add(this.intlService.changes.subscribe(this.intlChange.bind(this)));
-        this.subs.add(this.viewState.nextDate.subscribe(function (nextDate) {
-            _this.selectedDate = nextDate;
-        }));
-        this.subs.add(this.viewState.dateRange.subscribe(function (dateRange) {
-            var isEmpty = dateRange.start.getTime() === 0;
-            if (!isEmpty) {
-                var args = new DateChangeEvent(_this, _this.selectedDate, dateRange);
-                _this.dateChange.emit(args);
+        var resourceIndex = allResources.indexOf(resource);
+        var values = getField(event, resource.field);
+        if (!Array.isArray(values)) {
+            values = [values];
+        }
+        var expandedResources = [];
+        for (var valueIdx = 0; valueIdx < values.length; valueIdx++) {
+            var dataIdx = getDataIdx(values[valueIdx], resource);
+            if (dataIdx < 0) {
+                return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
             }
-        }));
-        this.subs.add(this.viewState.navigate.subscribe(function (_a) {
-            var viewName = _a.viewName, date = _a.date;
-            var views = _this.views.toArray();
-            var view = views.find(function (v) { return v.name === viewName; });
-            var args = new NavigateEvent(_this, {
-                type: 'show-date',
-                view: view || {
-                    name: viewName,
-                    title: viewName
-                },
-                date: date
-            });
-            _this.navigate.next(args);
-            if (view && !args.isDefaultPrevented()) {
-                var index = views.indexOf(view);
-                _this.selectedView = view;
-                _this.setViewIndex(index);
-                _this.selectedDate = date;
+            var item = resource.data[dataIdx];
+            // has groups - need all copies of the multiple resource
+            // no groups - just the first
+            if (resourceIdx === 0 && (hasGroups || valueIdx === 0)) {
+                var resourceItems_1 = [];
+                resourceItems_1[resourceIndex] = resource.multiple && !hasGroups ? [item] : item;
+                resources.push({
+                    leafIdx: hasGroups ? dataIdx * spans[resourceIdx] : 0,
+                    color: getField(item, resource.colorField),
+                    resources: resourceItems_1
+                });
             }
-        }));
-        this.subs.add(this.viewState.viewEvent.subscribe(function (_a) {
-            var name = _a.name, args = _a.args;
-            var emitter = _this[name];
-            var confirmedEmitter = _this[name + "Confirmed"];
-            if (hasObservers(emitter) || (confirmedEmitter && hasObservers(confirmedEmitter))) {
-                _this.zone.run(function () {
-                    var eventInstance = new VIEW_EVENT_MAP[name](_this, args);
-                    emitter.emit(eventInstance);
-                    args.prevented = eventInstance.prevented;
-                    if (confirmedEmitter && !args.prevented) {
-                        confirmedEmitter.emit(eventInstance);
-                    }
-                });
-            }
-        }));
-        this.subs.add(this.viewState.layoutEnd.subscribe(function () {
-            if (_this.resizeSensor) {
-                _this.resizeSensor.acceptSize();
+            else if (hasGroups) { // don't create multiple resource groups if no groups for multiple resources
+                var currentResources = resources;
+                if (values.length > 1) {
+                    currentResources = cloneResources(resources);
+                    expandedResources.push.apply(expandedResources, currentResources);
+                }
+                for (var currentIdx = 0; currentIdx < currentResources.length; currentIdx++) {
+                    currentResources[currentIdx].leafIdx += dataIdx * spans[resourceIdx];
+                    currentResources[currentIdx].resources[resourceIndex] = item;
+                }
             }
-        }));
-        this.onViewIndexChange();
-        this.notifyOptionsChange = this.notifyOptionsChange.bind(this);
-        this.subs.add(this.allDayEventTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.eventTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.timeSlotTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.timeSlotTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.minorTimeHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.majorTimeHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.monthDaySlotTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.dateHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.allDaySlotTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.groupHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.agendaDateTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.agendaTimeTemplate.changes.subscribe(this.notifyOptionsChange));
-        this.subs.add(this.views.changes.subscribe(function () {
-            _this.changeDetector.markForCheck();
-        }));
-        //this.editService.timezone = this.timezone;
-        this.attachEditHandlers();
-        this.dialogsService.container = this.confirmationDialogContainerRef;
-        this.notifyOptionsChange();
-        this.subs.add(this.pdfService.exportClick.subscribe(function () {
-            var args = new PDFExportEvent();
-            _this.pdfExport.emit(args);
-            if (!args.isDefaultPrevented()) {
-                _this.saveAsPDF();
+            else if (valueIdx > 0) {
+                for (var idx = 0; idx < resources.length; idx++) {
+                    resources[idx].resources[resourceIndex].push(item);
+                }
             }
-        }));
-        this.subs.add(this.pdfService.done.subscribe(function () {
-            _this.loadingComponent.toggle(false);
-        }));
-        this.subs.add(this.localization.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.rtl = rtl;
-            _this.direction = _this.rtl ? 'rtl' : 'ltr';
-        }));
-        this.subs.add(this.viewState.optionsChange.subscribe(function () {
-            _this.changeDetector.markForCheck();
-        }));
-        this.attachElementEventHandlers();
-    };
-    SchedulerComponent.prototype.ngOnChanges = function (changes) {
-        var _this = this;
-        if (isChanged('resources', changes) && !isChanged('events', changes) && this.viewItems) {
-            this.viewItems.forEach(function (item) {
-                copyResources(item.event, _this.resources);
-            });
-        }
-        if (anyChanged([
-            'group', 'resources', 'min', 'max', 'showWorkHours', 'startTime', 'scrollTime', 'endTime', 'eventHeight',
-            'workDayStart', 'workDayEnd', 'workWeekStart', 'workWeekEnd', 'weekStart', 'slotDuration', 'slotDivisions',
-            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles'
-        ], changes)) {
-            this.notifyOptionsChange(changes);
         }
-    };
-    SchedulerComponent.prototype.ngOnDestroy = function () {
-        if (this.subs) {
-            this.subs.unsubscribe();
+        if (expandedResources.length) {
+            resources = expandedResources;
         }
-        if (this.detachElementEventHandlers) {
-            this.detachElementEventHandlers();
+    }
+    addNotGroupedResources(event, resources, allResources);
+    return resources;
+}
+/** @hidden */
+function assignTasksResources(tasks, options) {
+    for (var idx = 0; idx < tasks.length; idx++) {
+        var task = tasks[idx];
+        task.resources = eventResources(task.event, options);
+    }
+}
+/**
+ * @hidden
+ */
+function isEmptyResource(resources) {
+    return Array.isArray(resources) && resources.length === 1 && resources[0] === undefined;
+}
+/**
+ * @hidden
+ */
+function resourcesMatch(res1, res2) {
+    if (res1.length !== res2.length) {
+        return false;
+    }
+    if (isEmptyResource(res1) && isEmptyResource(res2)) {
+        return true;
+    }
+    return res1.every(function (r1) { return res2.some(function (r2) { return r2.value === r1.value; }); });
+}
+/**
+ * @hidden
+ */
+function isSameRange(range1, range2) {
+    return (range1.start.getTime() === range2.start.getTime() &&
+        range1.end.getTime() === range2.end.getTime() &&
+        range1.isAllDay === range2.isAllDay &&
+        resourcesMatch(range1.resources, range2.resources));
+}
+/** @hidden */
+function findRowIndex(events, data) {
+    if (data.rowIndex !== undefined) {
+        return data.rowIndex;
+    }
+    for (var idx = 0; idx < events.length; idx++) {
+        if (!events[idx]) {
+            return idx;
         }
+    }
+    return events.length;
+}
+/** @hidden */
+function isRecurrence(task) {
+    return Boolean(task.event && task.event.recurrenceRule);
+}
+/** @hidden */
+function isRecurrenceException(task) {
+    return task.event && isPresent(task.event.recurrenceId) && !task.event.recurrenceRule;
+}
+/** @hidden */
+var rectContains = function (rect, left, top) {
+    return rect.left <= left && left <= rect.left + rect.width && rect.top <= top && top <= rect.top + rect.height;
+};
+/** @hidden */
+var rectContainsX = function (rect, left) {
+    return rect.left <= left && left <= rect.left + rect.width;
+};
+/** @hidden */
+var toPx = function (value) { return value + "px"; };
+/** @hidden */
+var elementOffset = function (element) {
+    if (!element) {
+        return null;
+    }
+    var box = element.getBoundingClientRect();
+    var documentElement = document.documentElement;
+    return {
+        top: box.top + (window.pageYOffset || documentElement.scrollTop) - (documentElement.clientTop || 0),
+        left: box.left + (window.pageXOffset || documentElement.scrollLeft) - (documentElement.clientLeft || 0),
+        width: box.width,
+        height: box.height
     };
-    /**
-     * @hidden
-     */
-    SchedulerComponent.prototype.onResize = function (_event) {
-        this.viewContext.notifyResize();
-    };
-    /**
-     * @hidden
-     */
-    SchedulerComponent.prototype.onNavigationAction = function (action) {
-        var args = new NavigateEvent(this, action);
-        this.navigate.next(args);
-        if (args.isDefaultPrevented()) {
-            return true;
-        }
-        if (action.type === 'view-change') {
-            var views = this.views.toArray();
-            var index = views.indexOf(action.view);
-            this.selectedView = action.view;
-            this.setViewIndex(index);
-        }
-        else if (action.type === 'select-date') {
-            if (this.isInRange(action.date)) {
-                this.selectedDate = action.date;
-            }
+};
+/** @hidden */
+var pointDistance = function (x1, y1, x2, y2) { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); };
+/** @hidden */
+var ignoreContentChild = function (child) { return child.nodeName === 'KENDO-RESIZE-SENSOR' || hasClasses(child, 'k-loading-mask'); };
+/** @hidden */
+var setCoordinates = function (element, coordinates) {
+    for (var field in coordinates) {
+        if (coordinates.hasOwnProperty(field)) {
+            element.style[field] = toPx(coordinates[field]);
         }
-        else if (action.type === 'today') {
-            var date = new Date();
-            if (this.isInRange(date)) {
-                this.selectedDate = date;
+    }
+};
+/** @hidden */
+var convertNgClassBindings = function (bindingValues) {
+    var result = [];
+    if (isString(bindingValues)) {
+        result.push(bindingValues);
+    }
+    else if (isArray(bindingValues)) {
+        result.push.apply(result, bindingValues);
+    }
+    else if (isObject(bindingValues)) {
+        for (var field in bindingValues) {
+            if (bindingValues.hasOwnProperty(field) && bindingValues[field]) {
+                result.push(field);
             }
         }
-        else {
-            this.viewContext.notifyAction(action);
-        }
-    };
-    /**
-     * Creates a popup editor for the new event.
-     *
-     * @param group - The [`FormGroup`](https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html) that describes
-     * the edit form. If called with a data item, the parameter will build the `FormGroup` from the data item fields.
-     */
-    SchedulerComponent.prototype.addEvent = function (group) {
-        var isFormGroup = group instanceof FormGroup;
-        if (!isFormGroup) {
-            var createControl = function (source) { return function (acc, key) {
-                acc[key] = new FormControl(source[key]);
-                return acc;
-            }; };
-            var fields = Object.keys(group).reduce(createControl(group), {});
-            group = new FormGroup(fields);
-        }
-        this.editService.addEvent(group);
-    };
-    /**
-     * Switches the specified event in edit mode.
-     *
-     * @param dataItem - The event that will be switched to edit mode.
-     * @param options - An object which contains the form `group` that will be bound in the edit dialog and the current edit `mode`.
-     *
-     */
-    SchedulerComponent.prototype.editEvent = function (dataItem, options) {
-        if (options === void 0) { options = {}; }
-        var group = options.group, mode = options.mode;
-        this.editService.editEvent(dataItem, group, mode);
-    };
-    /**
-     * Closes the event editor, if open.
-     */
-    SchedulerComponent.prototype.closeEvent = function () {
-        this.editService.close();
-    };
-    /**
-     * Returns a flag which indicates if an event is currently edited.
-     *
-     * @return {boolean} - A flag which indicates if an event is currently edited.
-     */
-    SchedulerComponent.prototype.isEditing = function () {
-        return this.editService.isEditing();
-    };
-    /**
-     * Opens the built-in confirmation dialog for defining the edit mode
-     * that will be used when the user edits or removes a recurring event.
-     *
-     * @param operation - The type of operation that will be confirmed. Has to be either **Edit** or **Remove**.
-     *
-     * @return {Observable<EditMode>}
-     */
-    SchedulerComponent.prototype.openRecurringConfirmationDialog = function (operation) {
-        return this.dialogsService.openRecurringConfirmationDialog(operation);
-    };
-    /**
-     * Opens the built-in removal confirmation dialog.
-     *
-     * @return {Observable<boolean>}
-     */
-    SchedulerComponent.prototype.openRemoveConfirmationDialog = function () {
-        return this.dialogsService.openRemoveConfirmationDialog();
-    };
-    /**
-     * Saves the current view as PDF.
-     */
-    SchedulerComponent.prototype.saveAsPDF = function () {
-        var _this = this;
-        this.loadingComponent.toggle(true);
-        this.zone.runOutsideAngular(function () {
-            // wait a tick in order for the loading element style to be updated by the browser.
-            // if the export is synchronous, the browser will not update the element before the export is finished.
-            setTimeout(function () {
-                _this.pdfService.save();
-            }, 0);
-        });
-    };
-    /**
-     * Scrolls the view to the specified time.
-     */
-    SchedulerComponent.prototype.scrollToTime = function (time) {
-        this.viewContext.notifyAction({
-            type: 'scroll-time',
-            time: time
-        });
-    };
-    /**
-     * Returns the current view slot that matches the passed document position.
-     *
-     * @param x - The x document position.
-     * @param y - The y document position.
-     *
-     * @return {SchedulerSlot} - The slot.
-     *
-     * {% embed_file drag-and-drop/app.component.ts %}
-     * {% embed_file drag-and-drop/draggable.directive.ts %}
-     * {% embed_file drag-and-drop/app.module.ts %}
-     * {% embed_file shared/main.ts %}
-     */
-    SchedulerComponent.prototype.slotByPosition = function (x, y) {
-        return this.viewContext.executeMethod('slotByPosition', { x: x, y: y });
-    };
-    /**
-     * Returns the event associated with the specified DOM element, if any.
-     *
-     * @param element - The DOM element document position.
-     * @return the event instance, if found.
-     */
-    SchedulerComponent.prototype.eventFromElement = function (element) {
-        return this.viewContext.executeMethod('eventFromElement', { element: element });
-    };
-    Object.defineProperty(SchedulerComponent.prototype, "activeEvent", {
+    }
+    return result;
+};
+/**
+ * @hidden
+ */
+function formatEventTime(start, end, isAllDay, localeId) {
+    var startTimeFormat = { skeleton: 'yMMMMEEEEdhm' };
+    var startDateFormat = { skeleton: 'yMMMMEEEEd' };
+    var endFormat = isEqualDate(start, end) ? 't' : startTimeFormat;
+    return isAllDay ?
+        "" + formatDate(start, startDateFormat, localeId) :
+        formatDate(start, startTimeFormat, localeId) + "\u2013" + formatDate(end, endFormat, localeId);
+}
+/**
+ * @hidden
+ */
+function formValueOrDefault(group, field, defaultValue) {
+    var control = group.get(field);
+    if (!control) {
+        return defaultValue;
+    }
+    return control.value || defaultValue;
+}
+/**
+ * @hidden
+ */
+var isWorkWeekDay = function (day, start, end) {
+    if (end < start) {
+        return day <= end || start <= day;
+    }
+    return start <= day && day <= end;
+};
+/**
+ * @hidden
+ */
+var alwaysFalse = function () { return false; };
+
+var todayDate = function () { return getDate(new Date()); };
+var DAYS_IN_WEEK = 7;
+/**
+ * Represents the [Kendo UI Scheduler component for Angular]({% slug overview_scheduler %}).
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-scheduler style="height: 600px">
+ *            <kendo-scheduler-day-view>
+ *            </kendo-scheduler-day-view>
+ *            <kendo-scheduler-week-view>
+ *            </kendo-scheduler-week-view>
+ *        </kendo-scheduler>
+ *    `
+ * })
+ * class AppComponent {}
+ * ```
+ */
+var SchedulerComponent = /** @class */ (function () {
+    function SchedulerComponent(wrapper, viewContext, viewState, editService, dialogsService, intlService, changeDetector, zone, pdfService, localization, domEvents, renderer, focusService) {
+        this.wrapper = wrapper;
+        this.viewContext = viewContext;
+        this.viewState = viewState;
+        this.editService = editService;
+        this.dialogsService = dialogsService;
+        this.intlService = intlService;
+        this.changeDetector = changeDetector;
+        this.zone = zone;
+        this.pdfService = pdfService;
+        this.localization = localization;
+        this.domEvents = domEvents;
+        this.renderer = renderer;
+        this.focusService = focusService;
+        this.hostClasses = true;
+        this.rtl = false;
         /**
-         * Gets the currently active event, if any.
-         * The active event is the event that can currently receive focus.
+         * Specifies if the Scheduler is editable.
          */
-        get: function () {
-            var activeElement = this.focusService.activeElement;
-            if (activeElement) {
-                return this.eventFromElement(activeElement.nativeElement);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Focuses the next event or an event at a specified relative position.
-     * The `options` parameter can be used to set a positive or negative offset
-     * that is relative to the currently focused event.
-     * A `nowrap` flag toggles the wrapping to the first or to the last item.
-     *
-     * @example
-     * ```ts-no-run
-     * scheduler.focusNext(); // Focuses the next event.
-     * scheduler.focusNext({ offset: 1 }); // Focuses the next event.
-     * scheduler.focusNext({ offset: -1 }); // Focuses the previous event.
-     * scheduler.focusNext({ nowrap: true }); // If the focus is on the last event, does not move the focus to the first event.
-     * ```
-     *
-     * @param position The relative position of the event to focus.
-     * @returns `true` if the focused event changed. Otherwise, returns `false`.
-     */
-    SchedulerComponent.prototype.focusNext = function (position) {
-        return this.focusService.focusNext(position);
-    };
-    /**
-     * Focuses the previous event or an event at a specified relative position.
-     * The `options` parameter can be used to set a positive or negative offset
-     * that is relative to the currently focused event.
-     * A `nowrap` flag toggles the wrapping to the first or to the last item.
-     *
-     * @example
-     * ```ts-no-run
-     * scheduler.focusPrev(); // Focuses the previous event
-     * scheduler.focusPrev({ nowrap: true }); // Does not move the focus to the last event, if focus is on the first one.
-     * ```
-     *
-     * @param position The relative position of the event to focus.
-     * @returns `true` if the focused event changed. Otherwise, returns `false`.
-     */
-    SchedulerComponent.prototype.focusPrev = function (position) {
-        var prevPosition = __assign({ offset: -1 }, position);
-        return this.focusService.focusNext(prevPosition);
-    };
-    /**
-     * Focuses the last focused event or the Scheduler element, if no events are available.
-     */
-    SchedulerComponent.prototype.focus = function () {
-        return this.focusService.focus();
-    };
-    SchedulerComponent.prototype.isInRange = function (date) {
-        return (!this.min || this.min <= date) && (!this.max || date <= this.max);
-    };
-    SchedulerComponent.prototype.notifyOptionsChange = function (changes) {
-        var workweek = this.workWeek;
-        this.viewContext.notifyOptionsChange({
-            group: this.group,
-            resources: this.resources,
-            allDayEventTemplate: this.allDayEventTemplate ? this.allDayEventTemplate.first : null,
-            eventTemplate: this.eventTemplate ? this.eventTemplate.first : null,
-            timeSlotTemplate: this.timeSlotTemplate ? this.timeSlotTemplate.first : null,
-            minorTimeHeaderTemplate: this.minorTimeHeaderTemplate ? this.minorTimeHeaderTemplate.first : null,
-            majorTimeHeaderTemplate: this.majorTimeHeaderTemplate ? this.majorTimeHeaderTemplate.first : null,
-            monthDaySlotTemplate: this.monthDaySlotTemplate ? this.monthDaySlotTemplate.first : null,
-            dateHeaderTemplate: this.dateHeaderTemplate ? this.dateHeaderTemplate.first : null,
-            allDaySlotTemplate: this.allDaySlotTemplate ? this.allDaySlotTemplate.first : null,
-            groupHeaderTemplate: this.groupHeaderTemplate ? this.groupHeaderTemplate.first : null,
-            agendaDateTemplate: this.agendaDateTemplate ? this.agendaDateTemplate.first : null,
-            agendaTimeTemplate: this.agendaTimeTemplate ? this.agendaTimeTemplate.first : null,
-            min: this.min,
-            max: this.max,
-            showWorkHours: this.showWorkHours,
-            startTime: this.startTime,
-            scrollTime: this.scrollTime,
-            endTime: this.endTime,
-            workDayStart: this.workDayStart,
-            workDayEnd: this.workDayEnd,
-            workWeekStart: workweek.start,
-            workWeekEnd: workweek.end,
-            weekStart: this.weekStart,
-            slotDuration: this.slotDuration,
-            slotDivisions: this.slotDivisions,
-            eventHeight: this.eventHeight,
-            editable: this.editable,
-            timezone: this.timezone,
-            currentTimeMarker: this.currentTimeMarker,
-            slotClass: this.slotClass,
-            slotFill: this.slotFill,
-            columnWidth: this.columnWidth,
-            eventClass: this.eventClass,
-            eventStyles: this.eventStyles,
-            changes: changes
-        });
-    };
-    Object.defineProperty(SchedulerComponent.prototype, "workWeek", {
-        get: function () {
-            var _a = this.intlService.weekendRange(), start = _a.start, end = _a.end;
-            var workWeekStart = isPresent(this.workWeekStart) ? this.workWeekStart : (end + 1) % DAYS_IN_WEEK;
-            var weekEnd = start > 0 ? start - 1 : Day.Saturday;
-            var workWeekEnd = isPresent(this.workWeekEnd) ? this.workWeekEnd : weekEnd;
-            return { start: workWeekStart, end: workWeekEnd };
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SchedulerComponent.prototype.resetViewIndex = function () {
-        var index = this.selectedViewIndex;
-        var newIndex = Math.max(0, Math.min(index, this.views.length - 1));
-        this.setViewIndex(newIndex);
-        this.onViewIndexChange();
-    };
-    SchedulerComponent.prototype.onViewIndexChange = function () {
-        if (!this.views) {
-            return;
-        }
-        var views = this.views.toArray();
-        var selectedView = views[this.viewIndex];
-        if (selectedView) {
-            this.selectedView = selectedView;
-        }
-    };
-    SchedulerComponent.prototype.setViewIndex = function (newIndex) {
-        var changed = this.selectedViewIndex !== newIndex;
-        if (changed) {
-            this.selectedViewIndex = newIndex;
-            this.selectedViewIndexChange.emit(newIndex);
-        }
-        return changed;
-    };
-    SchedulerComponent.prototype.processEvents = function (dataItems) {
-        var _this = this;
-        var timezone = this.timezone;
-        var fields = this.modelFields;
-        var items = dataItems
-            .map(function (dataItem) { return readEvent(dataItem, fields, _this.resources); })
-            .filter(function (event) { return !isRecurrenceMaster(event); })
-            .map(function (event) {
-            var start = ZonedDate.fromLocalDate(event.start, timezone);
-            var end = ZonedDate.fromLocalDate(event.end, timezone);
-            return { start: start, end: end, event: event };
-        });
-        this.viewItems = items;
-        this.viewContext.notifyItems(items);
-    };
-    SchedulerComponent.prototype.attachEditHandlers = function () {
-        if (!this.editService) {
-            return;
-        }
-        this.subs.add(this.editService.changes.subscribe(this.emitCRUDEvent.bind(this)));
-    };
-    SchedulerComponent.prototype.emitCRUDEvent = function (args) {
-        Object.assign(args, { sender: this });
-        switch (args.action) {
-            case 'cancel':
-                this.cancel.emit(args);
-                break;
-            case 'save':
-                this.save.emit(args);
-                break;
-            default: break;
-        }
-    };
-    SchedulerComponent.prototype.intlChange = function () {
-        var currentView = this.selectedView;
-        this.selectedView = null;
-        if (!isPresent(this.workWeekStart) || !isPresent(this.workWeekEnd)) {
-            this.notifyOptionsChange();
-        }
-        this.changeDetector.detectChanges();
-        this.selectedView = currentView;
-        if (NgZone.isInAngularZone()) {
-            this.changeDetector.markForCheck();
-        }
-        else {
-            this.changeDetector.detectChanges();
-        }
-    };
-    SchedulerComponent.prototype.attachElementEventHandlers = function () {
-        var _this = this;
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        var wrapper = this.wrapper.nativeElement;
-        this.zone.runOutsideAngular(function () {
-            var windowBlurSubscription = _this.renderer.listen('window', 'blur', function (args) {
-                _this.domEvents.windowBlur.emit(args);
-            });
-            var clickSubscription = _this.renderer.listen(wrapper, 'click', function (args) {
-                _this.domEvents.click.emit(args);
-            });
-            var keydownSubscription = _this.renderer.listen(wrapper, 'keydown', function (args) {
-                _this.domEvents.keydown.emit(args);
-            });
-            var focused = false;
-            var focusInSubscription = _this.renderer.listen(wrapper, 'focusin', function (args) {
-                _this.domEvents.focus.emit(args);
-                if (!focused) {
-                    _this.domEvents.focusIn.emit(args);
-                    _this.renderer.addClass(_this.wrapper.nativeElement, 'k-state-focused');
-                    focused = true;
-                }
-            });
-            var focusOutSubscription = _this.renderer.listen(wrapper, 'focusout', function (args) {
-                var next = args.relatedTarget || document.activeElement;
-                var outside = !closest(next, function (node) { return node === wrapper; });
-                if (outside) {
-                    _this.domEvents.focusOut.emit(args);
-                    _this.renderer.removeClass(_this.wrapper.nativeElement, 'k-state-focused');
-                    focused = false;
-                }
-            });
-            _this.detachElementEventHandlers = function () {
-                windowBlurSubscription();
-                clickSubscription();
-                keydownSubscription();
-                focusInSubscription();
-                focusOutSubscription();
-            };
-        });
-    };
-    __decorate([
-        HostBinding('class.k-widget'),
-        HostBinding('class.k-scheduler'),
-        HostBinding('class.k-floatwrap'),
-        __metadata("design:type", Boolean)
-    ], SchedulerComponent.prototype, "hostClasses", void 0);
-    __decorate([
-        HostBinding('class.k-rtl'),
-        __metadata("design:type", Boolean)
-    ], SchedulerComponent.prototype, "rtl", void 0);
-    __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], SchedulerComponent.prototype, "dir", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [Number])
-    ], SchedulerComponent.prototype, "selectedViewIndex", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SchedulerComponent.prototype, "editable", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Date)
-    ], SchedulerComponent.prototype, "min", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Date)
-    ], SchedulerComponent.prototype, "max", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "eventHeight", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "columnWidth", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], SchedulerComponent.prototype, "showWorkHours", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], SchedulerComponent.prototype, "startTime", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], SchedulerComponent.prototype, "endTime", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], SchedulerComponent.prototype, "workDayStart", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], SchedulerComponent.prototype, "workDayEnd", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "workWeekStart", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "workWeekEnd", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [Number])
-    ], SchedulerComponent.prototype, "weekStart", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "slotDuration", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "slotDivisions", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SchedulerComponent.prototype, "slotFill", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SchedulerComponent.prototype, "scrollTime", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SchedulerComponent.prototype, "group", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], SchedulerComponent.prototype, "resources", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], SchedulerComponent.prototype, "loading", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], SchedulerComponent.prototype, "timezone", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], SchedulerComponent.prototype, "events", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Date),
-        __metadata("design:paramtypes", [Date])
-    ], SchedulerComponent.prototype, "selectedDate", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], SchedulerComponent.prototype, "modelFields", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SchedulerComponent.prototype, "currentTimeMarker", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], SchedulerComponent.prototype, "slotClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], SchedulerComponent.prototype, "eventClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], SchedulerComponent.prototype, "eventStyles", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "selectedViewIndexChange", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "navigate", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "dateChange", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "slotClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "slotDblClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "create", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "eventClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "eventDblClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "eventKeydown", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "cancel", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "save", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "remove", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "resizeStart", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "resize", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "resizeEnd", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "dragStart", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "drag", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "dragEnd", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SchedulerComponent.prototype, "pdfExport", void 0);
-    __decorate([
-        ContentChild(EditDialogTemplateDirective, { static: false }),
-        __metadata("design:type", EditDialogTemplateDirective)
-    ], SchedulerComponent.prototype, "editDialogTemplate", void 0);
-    __decorate([
-        ContentChild(ToolbarTemplateDirective, { static: false }),
-        __metadata("design:type", ToolbarTemplateDirective)
-    ], SchedulerComponent.prototype, "toolbarTemplate", void 0);
-    __decorate([
-        ContentChildren(SchedulerView),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "views", void 0);
-    __decorate([
-        ViewChild(ResizeSensorComponent, { static: true }),
-        __metadata("design:type", ResizeSensorComponent)
-    ], SchedulerComponent.prototype, "resizeSensor", void 0);
-    __decorate([
-        ViewChild("confirmationDialogContainer", { read: ViewContainerRef, static: true }),
-        __metadata("design:type", ViewContainerRef)
-    ], SchedulerComponent.prototype, "confirmationDialogContainerRef", void 0);
-    __decorate([
-        ViewChild(LoadingComponent, { static: true }),
-        __metadata("design:type", LoadingComponent)
-    ], SchedulerComponent.prototype, "loadingComponent", void 0);
-    __decorate([
-        ContentChildren(AllDayEventTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "allDayEventTemplate", void 0);
-    __decorate([
-        ContentChildren(EventTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "eventTemplate", void 0);
-    __decorate([
-        ContentChildren(TimeSlotTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "timeSlotTemplate", void 0);
-    __decorate([
-        ContentChildren(MinorTimeHeaderTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "minorTimeHeaderTemplate", void 0);
-    __decorate([
-        ContentChildren(MajorTimeHeaderTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "majorTimeHeaderTemplate", void 0);
-    __decorate([
-        ContentChildren(MonthDaySlotTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "monthDaySlotTemplate", void 0);
-    __decorate([
-        ContentChildren(DateHeaderTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "dateHeaderTemplate", void 0);
-    __decorate([
-        ContentChildren(AllDaySlotTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "allDaySlotTemplate", void 0);
-    __decorate([
-        ContentChildren(GroupHeaderTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "groupHeaderTemplate", void 0);
-    __decorate([
-        ContentChildren(AgendaDateTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "agendaDateTemplate", void 0);
-    __decorate([
-        ContentChildren(AgendaTimeTemplateDirective),
-        __metadata("design:type", QueryList)
-    ], SchedulerComponent.prototype, "agendaTimeTemplate", void 0);
-    SchedulerComponent = __decorate([
-        Component({
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            selector: 'kendo-scheduler',
-            providers: [
-                EditService,
-                DialogsService,
-                DomEventsService,
-                LocalDataChangesService,
-                FocusService,
-                SchedulerLocalizationService,
-                {
-                    provide: LocalizationService,
-                    useExisting: SchedulerLocalizationService
-                },
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.scheduler'
-                },
-                ToolbarService,
-                ViewContextService,
-                ViewStateService,
-                PDFService
-            ],
-            // TODO: Move to themes
-            styles: ['.k-scheduler.k-state-focused { box-shadow: 0 0.5px 0.5px 0.5px rgba(0, 0, 0, .12); }'],
-            encapsulation: ViewEncapsulation.None,
-            template: "\n        <ng-container kendoSchedulerLocalizedMessages\n            i18n-allEvents=\"kendo.scheduler.allEvents|The All events text displayed in the timeline views when there is no vertical grouping.\"\n            allEvents=\"All events\"\n\n            i18n-allDay=\"kendo.scheduler.allDay|The all day text displayed in the day and week views.\"\n            allDay=\"all day\"\n\n            i18n-dateHeader=\"kendo.scheduler.dateHeader|The date header text displayed in the agenda view.\"\n            dateHeader=\"Date\"\n\n            i18n-timeHeader=\"kendo.scheduler.timeHeader|The time header text displayed in the agenda view.\"\n            timeHeader=\"Time\"\n\n            i18n-deleteTitle=\"kendo.scheduler.deleteTitle|The delete icon title.\"\n            deleteTitle=\"Delete\"\n\n            i18n-eventHeader=\"kendo.scheduler.eventHeader|The event header text displayed in the agenda view.\"\n            eventHeader=\"Event\"\n\n            i18n-nextTitle=\"kendo.scheduler.nextTitle|The title of the navigation next button.\"\n            nextTitle=\"Next\"\n\n            i18n-previousTitle=\"kendo.scheduler.previousTitle|The title of the navigation previous button.\"\n            previousTitle=\"Previous\"\n\n            i18n-showFullDay=\"kendo.scheduler.showFullDay|The text of the show full day button displayed in the footer of the day, week and timeline views.\"\n            showFullDay=\"Show full day\"\n\n            i18n-showWorkDay=\"kendo.scheduler.showWorkDay|The text of the show work day button displayed in the footer of the day, week and timeline views.\"\n            showWorkDay=\"Show business hours\"\n\n            i18n-today=\"kendo.scheduler.today|The today button text displayed in the navigation.\"\n            today=\"Today\"\n\n            i18n-calendarToday=\"kendo.scheduler.calendarToday|The text of today's date in the header of the Calendar.\"\n            calendarToday=\"TODAY\"\n\n            i18n-dayViewTitle=\"kendo.scheduler.dayViewTitle|The day view title.\"\n            dayViewTitle=\"Day\"\n\n            i18n-multiDayViewTitle=\"kendo.scheduler.multiDayViewTitle|The multi day view title.\"\n            multiDayViewTitle=\"Multi-Day\"\n\n            i18n-weekViewTitle=\"kendo.scheduler.weekViewTitle|The week view title.\"\n            weekViewTitle=\"Week\"\n\n            i18n-workWeekViewTitle=\"kendo.scheduler.workWeekViewTitle|The work week view title.\"\n            workWeekViewTitle=\"Work Week\"\n\n            i18n-monthViewTitle=\"kendo.scheduler.monthViewTitle|The month view title.\"\n            monthViewTitle=\"Month\"\n\n            i18n-timelineViewTitle=\"kendo.scheduler.timelineViewTitle|The timeline view title.\"\n            timelineViewTitle=\"Timeline\"\n\n            i18n-timelineWeekViewTitle=\"kendo.scheduler.timelineWeekViewTitle|The timeline week view title.\"\n            timelineWeekViewTitle=\"Timeline Week\"\n\n            i18n-timelineMonthViewTitle=\"kendo.scheduler.timelineMonthViewTitle|The timeline month view title.\"\n            timelineMonthViewTitle=\"Timeline Month\"\n\n            i18n-agendaViewTitle=\"kendo.scheduler.agendaViewTitle|The agenda view title.\"\n            agendaViewTitle=\"Agenda\"\n\n            i18n-cancel=\"kendo.scheduler.cancel|The text similar to 'Cancel' displayed in scheduler.\"\n            cancel=\"Cancel\"\n\n            i18n-save=\"kendo.scheduler.save|The text similar to 'Save' displayed in scheduler.\"\n            save=\"Save\"\n\n            i18n-editorEventTitle=\"kendo.scheduler.editorEventTitle|The text similar to 'Title' displayed in the scheduler event editor.\"\n            editorEventTitle='Title'\n\n            i18n-editorEventStart=\"kendo.scheduler.editorEventStart|The text similar to 'Start' displayed in the scheduler event editor.\"\n            editorEventStart=\"Start\"\n\n            i18n-editorEventStartTimeZone=\"kendo.scheduler.editorEventStartTimeZone|The text similar to 'Start Time Zone' displayed in the scheduler event editor.\"\n            editorEventStartTimeZone=\"Start Time Zone\"\n\n            i18n-editorEventEnd=\"kendo.scheduler.editorEventEnd|The text similar to 'End' displayed in the scheduler event editor.\"\n            editorEventEnd=\"End\"\n\n            i18n-editorEventEndTimeZone=\"kendo.scheduler.editorEventEndTimeZone|The text similar to 'End Time Zone' displayed in the scheduler event editor.\"\n            editorEventEndTimeZone=\"End Time Zone\"\n\n            i18n-editorEventAllDay=\"kendo.scheduler.editorEventAllDay|The text similar to 'All Day event' displayed in the scheduler event editor.\"\n            editorEventAllDay=\"All Day Event\"\n\n            i18n-editorEventDescription=\"kendo.scheduler.editorEventDescription|The text similar to 'Description' displayed in the scheduler event editor.\"\n            editorEventDescription=\"Description\"\n\n            i18n-editorEventSeparateTimeZones=\"kendo.scheduler.editorEventSeparateTimeZones|The text similar to 'Use separate Start and End Time Zones' displayed in the scheduler event editor.\"\n            editorEventSeparateTimeZones=\"End in different Time Zone\"\n\n            i18n-editorEventTimeZone=\"kendo.scheduler.editorEventTimeZone|The text similar to 'Time Zone' displayed in the scheduler event editor.\"\n            editorEventTimeZone='Specify Time Zone'\n\n            i18n-editorTitle=\"kendo.scheduler.editorTitle|The text similar to 'Event' displayed as title of the scheduler event editor.\"\n            editorTitle='Event'\n\n            i18n-recurrenceEditorRepeat=\"kendo.scheduler.recurrenceEditorRepeat|The text similar to 'Repeat' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorRepeat='Repeat'\n\n            i18n-recurrenceEditorDailyInterval=\"kendo.scheduler.recurrenceEditorDailyInterval|The text similar to 'day(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorDailyInterval='day(s)'\n\n            i18n-recurrenceEditorDailyRepeatEvery=\"kendo.scheduler.recurrenceEditorDailyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorDailyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorWeeklyInterval=\"kendo.scheduler.recurrenceEditorWeeklyInterval|The text similar to 'week(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorWeeklyInterval='week(s)'\n\n            i18n-recurrenceEditorWeeklyRepeatEvery=\"kendo.scheduler.recurrenceEditorWeeklyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorWeeklyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorWeeklyRepeatOn=\"kendo.scheduler.recurrenceEditorWeeklyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorWeeklyRepeatOn='Repeat on'\n\n            i18n-recurrenceEditorMonthlyDay=\"kendo.scheduler.recurrenceEditorMonthlyDay|The text similar to 'Day' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyDay='Day'\n\n            i18n-recurrenceEditorMonthlyInterval=\"kendo.scheduler.recurrenceEditorMonthlyInterval|The text similar to 'month(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyInterval='month(s)'\n\n            i18n-recurrenceEditorMonthlyRepeatEvery=\"kendo.scheduler.recurrenceEditorMonthlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorMonthlyRepeatOn=\"kendo.scheduler.recurrenceEditorMonthlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyRepeatOn='Repeat on'\n\n            i18n-recurrenceEditorYearlyOf=\"kendo.scheduler.recurrenceEditorYearlyOf|The text similar to 'of' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyOf='of'\n\n            i18n-recurrenceEditorYearlyRepeatEvery=\"kendo.scheduler.recurrenceEditorYearlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorYearlyRepeatOn=\"kendo.scheduler.recurrenceEditorYearlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyRepeatOn='Repeat on'\n\n            i18n-recurrenceEditorYearlyInterval=\"kendo.scheduler.recurrenceEditorYearlyInterval|The text similar to 'year(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyInterval='year(s)'\n\n            i18n-recurrenceEditorFrequenciesDaily=\"kendo.scheduler.recurrenceEditorFrequenciesDaily|The text similar to 'Daily' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesDaily='Daily'\n\n            i18n-recurrenceEditorFrequenciesMonthly=\"kendo.scheduler.recurrenceEditorFrequenciesMonthly|The text similar to 'Monthly' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesMonthly='Monthly'\n\n            i18n-recurrenceEditorFrequenciesNever=\"kendo.scheduler.recurrenceEditorFrequenciesNever|The text similar to 'Never' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesNever='Never'\n\n            i18n-recurrenceEditorFrequenciesWeekly=\"kendo.scheduler.recurrenceEditorFrequenciesWeekly|The text similar to 'Weekly' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesWeekly='Weekly'\n\n            i18n-recurrenceEditorFrequenciesYearly=\"kendo.scheduler.recurrenceEditorFrequenciesYearly|The text similar to 'Yearly' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesYearly='Yearly'\n\n            i18n-recurrenceEditorOffsetPositionsFirst=\"kendo.scheduler.recurrenceEditorOffsetPositionsFirst|The text similar to 'First' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsFirst='First'\n\n            i18n-recurrenceEditorOffsetPositionsSecond=\"kendo.scheduler.recurrenceEditorOffsetPositionsSecond|The text similar to 'Second' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsSecond='Second'\n\n            i18n-recurrenceEditorOffsetPositionsThird=\"kendo.scheduler.recurrenceEditorOffsetPositionsThird|The text similar to 'Third' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsThird='Third'\n\n            i18n-recurrenceEditorOffsetPositionsFourth=\"kendo.scheduler.recurrenceEditorOffsetPositionsFourth|The text similar to 'Fourth' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsFourth='Fourth'\n\n            i18n-recurrenceEditorOffsetPositionsLast=\"kendo.scheduler.recurrenceEditorOffsetPositionsLast|The text similar to 'Last' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsLast='Last'\n\n            i18n-recurrenceEditorWeekdaysDay=\"kendo.scheduler.recurrenceEditorWeekdaysDay|The text similar to 'Day' displayed in the repeat by section of the monthly recurrence pattern.\"\n            recurrenceEditorWeekdaysDay='Day'\n\n            i18n-recurrenceEditorWeekdaysWeekday=\"kendo.scheduler.recurrenceEditorWeekdaysWeekday|The text similar to 'Weekday' displayed in the repeat by section of the monthly recurrence pattern.\"\n            recurrenceEditorWeekdaysWeekday='Weekday'\n\n            i18n-recurrenceEditorWeekdaysWeekendday=\"kendo.scheduler.recurrenceEditorWeekdaysWeekendday|The text similar to 'Weekend Day' displayed in the repeat by section of the monthly recurrence pattern.\"\n            recurrenceEditorWeekdaysWeekendday='Weekend Day'\n\n            i18n-recurrenceEditorEndAfter=\"kendo.scheduler.recurrenceEditorEndAfter|The text similar to 'After' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndAfter='After'\n\n            i18n-recurrenceEditorEndOccurrence=\"kendo.scheduler.recurrenceEditorEndOccurrence|The text similar to 'occurrence(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndOccurrence='occurrence(s)'\n\n            i18n-recurrenceEditorEndLabel=\"kendo.scheduler.recurrenceEditorEndLabel|The text similar to 'End' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndLabel='End'\n\n            i18n-recurrenceEditorEndNever=\"kendo.scheduler.recurrenceEditorEndNever|The text similar to 'Never' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndNever='Never'\n\n            i18n-recurrenceEditorEndOn=\"kendo.scheduler.recurrenceEditorEndOn|The text similar to 'On' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndOn='On'\n\n            i18n-destroy=\"kendo.scheduler.destroy|The text of the 'Delete' button displayed in the scheduler remove confirmation dialog.\"\n            destroy='Delete'\n\n            i18n-deleteConfirmation=\"kendo.scheduler.deleteConfirmation|The text similar to 'Are you sure you want to delete this event?' displayed in scheduler remove confirmation dialog.\"\n            deleteConfirmation='Are you sure you want to delete this event?'\n\n            i18n-editRecurringConfirmation=\"kendo.scheduler.editRecurringConfirmation|The text similar to 'Do you want to edit only this event occurrence or the whole series?' displayed in the scheduler recurring confirmation dialog.\"\n            editRecurringConfirmation='Do you want to edit only this event occurrence or the whole series?'\n\n            i18n-editOccurrence=\"kendo.scheduler.editOccurrence|The text of the 'Edit current occurrence' button displayed in the scheduler recurring confirmation dialog.\"\n            editOccurrence='Edit current occurrence'\n\n            i18n-editSeries=\"kendo.scheduler.editSeries|The text of the 'Edit the series' button displayed in the scheduler recurring confirmation dialog.\"\n            editSeries='Edit the series'\n\n            i18n-deleteRecurringConfirmation=\"kendo.scheduler.deleteRecurringConfirmation|The text similar to 'Do you want to delete only this event occurrence or the whole series?' displayed in the scheduler recurring confirmation dialog.\"\n            deleteRecurringConfirmation='Do you want to delete only this event occurrence or the whole series?'\n\n            i18n-deleteOccurrence=\"kendo.scheduler.deleteOccurrence|The text of the 'Delete current occurrence' button displayed in the scheduler recurring confirmation dialog.\"\n            deleteOccurrence='Delete current occurrence'\n\n            i18n-deleteSeries=\"kendo.scheduler.deleteSeries|The text similar of the 'Delete the series' button displayed in the scheduler recurring confirmation dialog.\"\n            deleteSeries='Delete the series'\n\n            i18n-deleteDialogTitle=\"kendo.scheduler.deleteDialogTitle|The title of the remove confirmation dialog, similar to 'Delete Event'.\"\n            deleteDialogTitle='Delete Event'\n\n            i18n-deleteRecurringDialogTitle=\"kendo.scheduler.deleteRecurringDialogTitle|The title of the recurring remove confirmation dialog, similar to 'Delete Recurring Item'\"\n            deleteRecurringDialogTitle='Delete Recurring Item'\n\n            i18n-editRecurringDialogTitle=\"kendo.scheduler.editRecurringDialogTitle|The title of the recurring edit confirmation dialog, similar to 'Edit Recurring Item'\"\n            editRecurringDialogTitle='Edit Recurring Item'\n        >\n        </ng-container>\n\n        <kendo-scheduler-toolbar\n            [dateRange]=\"dateRangeStream\"\n            [selectedDate]=\"selectedDateStream\"\n            [views]=\"views\"\n            [selectedView]=\"selectedView\"\n            [template]=\"toolbarTemplate\"\n            (navigate)=\"onNavigationAction($event)\"\n            [min]=\"min\"\n            [max]=\"max\"\n        ></kendo-scheduler-toolbar>\n\n        <ng-container *ngTemplateOutlet=\"selectedView?.template\">\n        </ng-container>\n\n        <ng-container #confirmationDialogContainer>\n        </ng-container>\n\n        <kendo-scheduler-edit-dialog\n            [resources]=\"resources\"\n            [editTemplate]=\"editDialogTemplate\"\n            [timezone]=\"timezone\"\n            [weekStart]=\"weekStart\"\n            [fields]=\"modelFields\"\n        ></kendo-scheduler-edit-dialog>\n\n        <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n\n        <div [loading]=\"loading\" kendoSchedulerLoading>\n        </div>\n    "
-        }),
-        __metadata("design:paramtypes", [ElementRef,
-            ViewContextService,
-            ViewStateService,
-            EditService,
-            DialogsService,
-            IntlService,
-            ChangeDetectorRef,
-            NgZone,
-            PDFService,
-            LocalizationService,
-            DomEventsService,
-            Renderer2,
-            FocusService])
-    ], SchedulerComponent);
-    return SchedulerComponent;
-}());
-
-/** @hidden */
-var intersects = function (startTime, endTime, periodStart, periodEnd) {
-    return (startTime < periodStart && endTime > periodEnd) ||
-        (periodStart <= startTime && startTime < periodEnd) ||
-        (periodStart < endTime && endTime <= periodEnd && startTime < endTime);
-};
-/** @hidden */
-var dateInRange = function (date, start, end) { return start.getTime() <= date.getTime() && date.getTime() <= end.getTime(); };
-/** @hidden */
-var roundAllDayEnd = function (_a) {
-    var start = _a.start, end = _a.end;
-    var startDate = start.stripTime();
-    var endDate = end.stripTime();
-    return endDate.getTime() !== end.getTime() || startDate.getTime() === endDate.getTime() ? endDate.addDays(1) : endDate;
-};
-/** @hidden */
-function toInvariantTime(date) {
-    var staticDate = new Date(1980, 0, 1, 0, 0, 0);
-    if (date) {
-        staticDate.setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+        this.editable = false;
+        /**
+         * Specifies if the Scheduler's day or time slots are selectable ([see example]({% slug slotselection_scheduler %}#toc-custom-callback)).
+         *
+         * When this input is set to `true`, the Scheduler component will emit [`slotDragStart`]({% slug api_scheduler_schedulercomponent %}#toc-slotdragstart), [`slotDrag`]({% slug api_scheduler_schedulercomponent %}#toc-slotdrag), and [`slotDragEnd`]({% slug api_scheduler_schedulercomponent %}#toc-slotdragend) events upon user interaction.
+         */
+        this.selectable = false;
+        /**
+         * The height of the events in the **Month** and **Timeline** views, and the height of the **All day** events in the **Day** and **Week** views.
+         */
+        this.eventHeight = 25;
+        /**
+         * Specifies the columns width. Applicable for the **Timeline** views.
+         */
+        this.columnWidth = 100;
+        /**
+         * The start time of the view. The Scheduler displays events which start after the start time.
+         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
+         */
+        this.startTime = '00:00';
+        /**
+         * The end time of the view. The Scheduler displays events which end before the end time.
+         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
+         */
+        this.endTime = '00:00';
+        /**
+         * The start time of the view when `showWorkHours` is set to `true`.
+         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
+         */
+        this.workDayStart = '08:00';
+        /**
+         * The end time of the view when `showWorkHours` is set to `true`.
+         * Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
+         */
+        this.workDayEnd = '17:00';
+        /**
+         * The duration (in minutes) of the time slots. Applicable for the day, week and timeline views.
+         */
+        this.slotDuration = 60;
+        /**
+         * The number of divisions of the time slots. Applicable for the **Day**, **Week**, and **Timeline** views.
+         */
+        this.slotDivisions = 2;
+        /**
+         * A numeric value between 0 and 1 that specifies what percentage of the slot will be filled by the events.
+         * Applicable for the **Day** and **Week** views.
+         * Defaults to `0.9` (90% fill).
+         */
+        this.slotFill = 0.9;
+        /**
+         * The time to which the view will initially be scrolled.
+         * Accepts string values in the `HH:mm` format or a JavaScript `Date`. Applicable for the **Day**, **Week**, and **Timeline** views.
+         */
+        this.scrollTime = this.workDayStart;
+        /**
+         * Specifies the Scheduler current time marker settings.
+         */
+        this.currentTimeMarker = true;
+        /**
+         * A callback that executes for each slot of the Scheduler view.
+         * If it returns `true`, the `k-state-selected` CSS class will be added to the cell, making it visibly selected.
+         */
+        this.isSlotSelected = alwaysFalse;
+        /**
+         * @hidden
+         */
+        this.selectedViewIndexChange = new EventEmitter();
+        /**
+         * Fires when the Scheduler is about to execute a navigation action
+         * (a view, date, or focus change).
+         */
+        this.navigate = new EventEmitter();
+        /**
+         * Fires when the date range that is displayed in the Scheduler changes.
+         */
+        this.dateChange = new EventEmitter();
+        /**
+         * Fires when a Scheduler view slot is clicked.
+         */
+        this.slotClick = new EventEmitter();
+        /**
+         * Fires when a Scheduler view slot is double-clicked.
+         */
+        this.slotDblClick = new EventEmitter();
+        /**
+         * Fires when the user creates a new event using the `'c'` key.
+         * ([see example]({% slug keyboard_navigation_scheduler %})).
+         */
+        this.create = new EventEmitter();
+        /**
+         * Fires when a Scheduler event is clicked.
+         */
+        this.eventClick = new EventEmitter();
+        /**
+         * Fires when a Scheduler event is double-clicked.
+         */
+        this.eventDblClick = new EventEmitter();
+        /**
+         * Fires when a key is pressed on a focused Scheduler event.
+         */
+        this.eventKeydown = new EventEmitter();
+        /**
+         * Fires when the user cancels the editing by clicking the **Cancel** command button.
+         */
+        this.cancel = new EventEmitter();
+        /**
+         * Fires when the user clicks the **Save** command button to save the changes of the edited event.
+         */
+        this.save = new EventEmitter();
+        /**
+         * Fires when the user clicks the **Remove** icon of a Scheduler event.
+         */
+        this.remove = new EventEmitter();
+        /**
+         * Fires when the user starts resizing a Scheduler event.
+         */
+        this.resizeStart = new EventEmitter();
+        /**
+         * Fires when the user is resizing a Scheduler event.
+         */
+        this.resize = new EventEmitter();
+        /**
+         * Fires when the user stops resizing a Scheduler event.
+         */
+        this.resizeEnd = new EventEmitter();
+        /**
+         * Fires when the user starts dragging a Scheduler event.
+         */
+        this.dragStart = new EventEmitter();
+        /**
+         * Fires when the user is dragging a Scheduler event.
+         */
+        this.drag = new EventEmitter();
+        /**
+         * Fires when the user stops dragging a Scheduler event.
+         */
+        this.dragEnd = new EventEmitter();
+        /**
+         * Fires when the user starts drag-selecting a Scheduler slot range.
+         */
+        this.slotDragStart = new EventEmitter();
+        /**
+         * Fires when the user is drag-selecting a Scheduler slot range.
+         */
+        this.slotDrag = new EventEmitter();
+        /**
+         * Fires when the user stops drag-selecting a Scheduler slot range.
+         */
+        this.slotDragEnd = new EventEmitter();
+        /**
+         * Fires when the user clicks the **PDF export** command button.
+         */
+        this.pdfExport = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.dragEndConfirmed = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.resizeEndConfirmed = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.removeConfirmed = new EventEmitter();
+        this.viewIndex = 0;
+        this._timezone = '';
+        this._modelFields = defaultModelFields;
+        validatePackage(packageMetadata);
+        this.dateRangeStream = viewState.dateRange;
+        this.selectedDateStream = viewContext.selectedDate;
     }
-    return staticDate;
-}
-/**
- * @hidden
- * TODO Move to date-math
- */
-var addUTCDays = function (date, offset) {
-    var newDate = new Date(date.getTime());
-    newDate.setUTCDate(newDate.getUTCDate() + offset);
-    return newDate;
-};
-// TODO: name? move to date-math
-/** @hidden */
-function toUTCTime(localDate, localTime) {
-    return new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), localTime.getHours(), localTime.getMinutes(), localTime.getSeconds(), localTime.getMilliseconds()));
-}
-//  TODO: move to date-math
-/** @hidden */
-function toUTCDate(localDate) {
-    return new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate()));
-}
-// TODO: move to date-math
-/** @hidden */
-function getUTCDate(utcDate) {
-    return new Date(Date.UTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate()));
-}
-// TODO: move to date-math
-/** @hidden */
-function toUTCDateTime(localDate) {
-    return new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), localDate.getHours(), localDate.getMinutes(), localDate.getSeconds(), localDate.getMilliseconds()));
-}
-/** @hidden */
-function dateWithTime(target, time) {
-    return new Date(target.getFullYear(), target.getMonth(), target.getDate(), time.getHours(), time.getMinutes());
-}
-function getDataIdx(value, resource) {
-    var data = resource.data;
-    for (var dataIdx = 0; dataIdx < data.length; dataIdx++) {
-        if (getField(data[dataIdx], resource.valueField) === value) {
-            return dataIdx;
+    Object.defineProperty(SchedulerComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SchedulerComponent.prototype, "selectedViewIndex", {
+        get: function () {
+            return this.viewIndex;
+        },
+        /**
+         * The index of the currently selected view.
+         *
+         * By default, the selected view index is `0` and
+         * indicates that the first declared view is visible.
+         */
+        set: function (index) {
+            this.viewIndex = index;
+            this.onViewIndexChange();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SchedulerComponent.prototype, "weekStart", {
+        get: function () {
+            if (isPresent(this._weekStart)) {
+                return this._weekStart;
+            }
+            return this.intlService.firstDay();
+        },
+        /**
+         * The first day of the week. Applicable to **Week**, **Month** and **TimelineWeek** views.
+         * Defaults to the locale settings.
+         */
+        set: function (value) {
+            this._weekStart = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SchedulerComponent.prototype, "timezone", {
+        get: function () {
+            return this._timezone;
+        },
+        /**
+         * Specifies the id of the timezone that will be displayed in the Scheduler.
+         * For example, `Europe/Sofia`.
+         * Defaults to `Etc/UTC`.
+         */
+        set: function (value) {
+            this._timezone = value;
+            this.events = this.events || [];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SchedulerComponent.prototype, "events", {
+        get: function () {
+            return this._events;
+        },
+        /**
+         * An array of event instances which will be shown by the Scheduler.
+         */
+        set: function (value) {
+            this._events = value;
+            this.processEvents(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SchedulerComponent.prototype, "selectedDate", {
+        get: function () {
+            return this._selectedDate;
+        },
+        /**
+         * The currently selected date of the Scheduler.
+         * Determines the period which is displayed.
+         */
+        set: function (value) {
+            if (!value) {
+                return;
+            }
+            this._selectedDate = value;
+            this.viewContext.notifySelectedDate(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SchedulerComponent.prototype, "modelFields", {
+        get: function () {
+            return this._modelFields;
+        },
+        /**
+         * The names of the model fields from which the Scheduler will read its data
+         * ([see example]({% slug databinding_scheduler %}#toc-binding-to-models)).
+         */
+        set: function (value) {
+            this._modelFields = __assign({}, defaultModelFields, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SchedulerComponent.prototype.ngOnInit = function () {
+        if (!this.selectedDate) {
+            this.selectedDate = todayDate();
         }
-    }
-    return -1;
-}
-function resourceItem(value, resource) {
-    var index = getDataIdx(value, resource);
-    return index >= 0 ? resource.data[index] : {};
-}
-function resourceItems(values, resource) {
-    return values.map(function (value) { return resourceItem(value, resource); });
-}
-function cloneResources(arr) {
-    var result = [];
-    for (var idx = 0; idx < arr.length; idx++) {
-        var clone$$1 = Object.assign({}, arr[idx]);
-        clone$$1.resources = clone$$1.resources.slice(0);
-        result.push(clone$$1);
-    }
-    return result;
-}
-/** @hidden */
-function resourceItemByValue(event, resource) {
-    var value = getField(event, resource.field);
-    if (Array.isArray(value)) {
-        return resourceItems(value, resource);
-    }
-    return resourceItem(value, resource);
-}
-function addNotGroupedResources(event, resources, allResources) {
-    for (var resourceIdx = 0; resourceIdx < resources.length; resourceIdx++) {
-        var current = resources[resourceIdx];
-        for (var idx = 0; idx < allResources.length; idx++) {
-            var item = allResources[idx];
-            if (!current.resources[idx] && item.data) {
-                current.resources[idx] = resourceItemByValue(event, item);
+    };
+    SchedulerComponent.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        if (isDevMode() && this.views.length === 0) {
+            throw new Error('No views declared for <kendo-scheduler>. Please, declare at least one view.');
+        }
+        this.subs = this.views.changes.subscribe(function () {
+            return _this.resetViewIndex();
+        });
+        this.subs.add(this.intlService.changes.subscribe(this.intlChange.bind(this)));
+        this.subs.add(this.viewState.nextDate.subscribe(function (nextDate) {
+            _this.selectedDate = nextDate;
+        }));
+        this.subs.add(this.viewState.dateRange.subscribe(function (dateRange) {
+            var isEmpty = dateRange.start.getTime() === 0;
+            if (!isEmpty) {
+                var args = new DateChangeEvent(_this, _this.selectedDate, dateRange);
+                _this.dateChange.emit(args);
+            }
+        }));
+        this.subs.add(this.viewState.navigate.subscribe(function (_a) {
+            var viewName = _a.viewName, date = _a.date;
+            var views = _this.views.toArray();
+            var view = views.find(function (v) { return v.name === viewName; });
+            var args = new NavigateEvent(_this, {
+                type: 'show-date',
+                view: view || {
+                    name: viewName,
+                    title: viewName
+                },
+                date: date
+            });
+            _this.navigate.next(args);
+            if (view && !args.isDefaultPrevented()) {
+                var index = views.indexOf(view);
+                _this.selectedView = view;
+                _this.setViewIndex(index);
+                _this.selectedDate = date;
+            }
+        }));
+        this.subs.add(this.viewState.viewEvent.subscribe(function (_a) {
+            var name = _a.name, args = _a.args;
+            var emitter = _this[name];
+            var confirmedEmitter = _this[name + "Confirmed"];
+            if (hasObservers(emitter) || (confirmedEmitter && hasObservers(confirmedEmitter))) {
+                _this.zone.run(function () {
+                    var eventInstance = new VIEW_EVENT_MAP[name](_this, args);
+                    emitter.emit(eventInstance);
+                    args.prevented = eventInstance.prevented;
+                    if (confirmedEmitter && !args.prevented) {
+                        confirmedEmitter.emit(eventInstance);
+                    }
+                });
+            }
+        }));
+        this.subs.add(this.viewState.layoutEnd.subscribe(function () {
+            if (_this.resizeSensor) {
+                _this.resizeSensor.acceptSize();
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionStart
+            .subscribe(function (e) {
+            if (hasObservers(_this.slotDragStart)) {
+                _this.zone.run(function () {
+                    _this.slotDragStart.emit(Object.assign(e, { sender: _this }));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionDrag
+            .subscribe(function (value) {
+            if (hasObservers(_this.slotDrag)) {
+                _this.zone.run(function () {
+                    _this.slotDrag.emit(new SlotDragEvent(_this, value));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionEnd
+            .subscribe(function (value) {
+            if (hasObservers(_this.slotDragEnd)) {
+                _this.zone.run(function () {
+                    _this.slotDragEnd.emit(new SlotDragEndEvent(_this, value));
+                });
+            }
+        }));
+        this.onViewIndexChange();
+        this.notifyOptionsChange = this.notifyOptionsChange.bind(this);
+        this.subs.add(this.allDayEventTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.eventTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.timeSlotTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.timeSlotTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.minorTimeHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.majorTimeHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.monthDaySlotTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.dateHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.allDaySlotTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.groupHeaderTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.agendaDateTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.agendaTimeTemplate.changes.subscribe(this.notifyOptionsChange));
+        this.subs.add(this.views.changes.subscribe(function () {
+            _this.changeDetector.markForCheck();
+        }));
+        //this.editService.timezone = this.timezone;
+        this.attachEditHandlers();
+        this.dialogsService.container = this.confirmationDialogContainerRef;
+        this.notifyOptionsChange();
+        this.subs.add(this.pdfService.exportClick.subscribe(function () {
+            var args = new PDFExportEvent();
+            _this.pdfExport.emit(args);
+            if (!args.isDefaultPrevented()) {
+                _this.saveAsPDF();
             }
+        }));
+        this.subs.add(this.pdfService.done.subscribe(function () {
+            _this.loadingComponent.toggle(false);
+        }));
+        this.subs.add(this.localization.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.rtl = rtl;
+            _this.direction = _this.rtl ? 'rtl' : 'ltr';
+        }));
+        this.subs.add(this.viewState.optionsChange.subscribe(function () {
+            _this.changeDetector.markForCheck();
+        }));
+        this.attachElementEventHandlers();
+    };
+    SchedulerComponent.prototype.ngOnChanges = function (changes) {
+        var _this = this;
+        if (isChanged('resources', changes) && !isChanged('events', changes) && this.viewItems) {
+            this.viewItems.forEach(function (item) {
+                copyResources(item.event, _this.resources);
+            });
         }
-    }
-}
-/** @hidden */
-function eventResources(event, _a) {
-    var taskResources = _a.taskResources, hasGroups = _a.hasGroups, spans = _a.spans, _b = _a.allResources, allResources = _b === void 0 ? [] : _b;
-    var resources = [];
-    for (var resourceIdx = 0; resourceIdx < taskResources.length; resourceIdx++) {
-        var resource = taskResources[resourceIdx];
-        if (!resource.data) {
-            resources = [{ leafIdx: 0, resources: [] }];
-            continue;
+        if (anyChanged([
+            'group', 'resources', 'min', 'max', 'showWorkHours', 'startTime', 'scrollTime', 'endTime', 'eventHeight',
+            'workDayStart', 'workDayEnd', 'workWeekStart', 'workWeekEnd', 'weekStart', 'slotDuration', 'slotDivisions',
+            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles', 'isSlotSelected', 'selectable'
+        ], changes)) {
+            this.notifyOptionsChange(changes);
         }
-        var resourceIndex = allResources.indexOf(resource);
-        var values = getField(event, resource.field);
-        if (!Array.isArray(values)) {
-            values = [values];
+    };
+    SchedulerComponent.prototype.ngOnDestroy = function () {
+        if (this.subs) {
+            this.subs.unsubscribe();
         }
-        var expandedResources = [];
-        for (var valueIdx = 0; valueIdx < values.length; valueIdx++) {
-            var dataIdx = getDataIdx(values[valueIdx], resource);
-            if (dataIdx < 0) {
-                return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
-            }
-            var item = resource.data[dataIdx];
-            // has groups - need all copies of the multiple resource
-            // no groups - just the first
-            if (resourceIdx === 0 && (hasGroups || valueIdx === 0)) {
-                var resourceItems_1 = [];
-                resourceItems_1[resourceIndex] = resource.multiple && !hasGroups ? [item] : item;
-                resources.push({
-                    leafIdx: hasGroups ? dataIdx * spans[resourceIdx] : 0,
-                    color: getField(item, resource.colorField),
-                    resources: resourceItems_1
-                });
+        if (this.detachElementEventHandlers) {
+            this.detachElementEventHandlers();
+        }
+    };
+    /**
+     * @hidden
+     */
+    SchedulerComponent.prototype.onResize = function (_event) {
+        this.viewContext.notifyResize();
+    };
+    /**
+     * @hidden
+     */
+    SchedulerComponent.prototype.onNavigationAction = function (action) {
+        var args = new NavigateEvent(this, action);
+        this.navigate.next(args);
+        if (args.isDefaultPrevented()) {
+            return true;
+        }
+        if (action.type === 'view-change') {
+            var views = this.views.toArray();
+            var index = views.indexOf(action.view);
+            this.selectedView = action.view;
+            this.setViewIndex(index);
+        }
+        else if (action.type === 'select-date') {
+            if (this.isInRange(action.date)) {
+                this.selectedDate = action.date;
             }
-            else if (hasGroups) { // don't create multiple resource groups if no groups for multiple resources
-                var currentResources = resources;
-                if (values.length > 1) {
-                    currentResources = cloneResources(resources);
-                    expandedResources.push.apply(expandedResources, currentResources);
-                }
-                for (var currentIdx = 0; currentIdx < currentResources.length; currentIdx++) {
-                    currentResources[currentIdx].leafIdx += dataIdx * spans[resourceIdx];
-                    currentResources[currentIdx].resources[resourceIndex] = item;
-                }
+        }
+        else if (action.type === 'today') {
+            var date = new Date();
+            if (this.isInRange(date)) {
+                this.selectedDate = date;
             }
-            else if (valueIdx > 0) {
-                for (var idx = 0; idx < resources.length; idx++) {
-                    resources[idx].resources[resourceIndex].push(item);
-                }
+        }
+        else {
+            this.viewContext.notifyAction(action);
+        }
+    };
+    /**
+     * Creates a popup editor for the new event.
+     *
+     * @param group - The [`FormGroup`](https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html) that describes
+     * the edit form. If called with a data item, the parameter will build the `FormGroup` from the data item fields.
+     */
+    SchedulerComponent.prototype.addEvent = function (group) {
+        var isFormGroup = group instanceof FormGroup;
+        if (!isFormGroup) {
+            var createControl = function (source) { return function (acc, key) {
+                acc[key] = new FormControl(source[key]);
+                return acc;
+            }; };
+            var fields = Object.keys(group).reduce(createControl(group), {});
+            group = new FormGroup(fields);
+        }
+        this.editService.addEvent(group);
+    };
+    /**
+     * Switches the specified event in edit mode.
+     *
+     * @param dataItem - The event that will be switched to edit mode.
+     * @param options - An object which contains the form `group` that will be bound in the edit dialog and the current edit `mode`.
+     *
+     */
+    SchedulerComponent.prototype.editEvent = function (dataItem, options) {
+        if (options === void 0) { options = {}; }
+        var group = options.group, mode = options.mode;
+        this.editService.editEvent(dataItem, group, mode);
+    };
+    /**
+     * Closes the event editor, if open.
+     */
+    SchedulerComponent.prototype.closeEvent = function () {
+        this.editService.close();
+    };
+    /**
+     * Returns a flag which indicates if an event is currently edited.
+     *
+     * @return {boolean} - A flag which indicates if an event is currently edited.
+     */
+    SchedulerComponent.prototype.isEditing = function () {
+        return this.editService.isEditing();
+    };
+    /**
+     * Opens the built-in confirmation dialog for defining the edit mode
+     * that will be used when the user edits or removes a recurring event.
+     *
+     * @param operation - The type of operation that will be confirmed. Has to be either **Edit** or **Remove**.
+     *
+     * @return {Observable<EditMode>}
+     */
+    SchedulerComponent.prototype.openRecurringConfirmationDialog = function (operation) {
+        return this.dialogsService.openRecurringConfirmationDialog(operation);
+    };
+    /**
+     * Opens the built-in removal confirmation dialog.
+     *
+     * @return {Observable<boolean>}
+     */
+    SchedulerComponent.prototype.openRemoveConfirmationDialog = function () {
+        return this.dialogsService.openRemoveConfirmationDialog();
+    };
+    /**
+     * Saves the current view as PDF.
+     */
+    SchedulerComponent.prototype.saveAsPDF = function () {
+        var _this = this;
+        this.loadingComponent.toggle(true);
+        this.zone.runOutsideAngular(function () {
+            // wait a tick in order for the loading element style to be updated by the browser.
+            // if the export is synchronous, the browser will not update the element before the export is finished.
+            setTimeout(function () {
+                _this.pdfService.save();
+            }, 0);
+        });
+    };
+    /**
+     * Scrolls the view to the specified time.
+     */
+    SchedulerComponent.prototype.scrollToTime = function (time) {
+        this.viewContext.notifyAction({
+            type: 'scroll-time',
+            time: time
+        });
+    };
+    /**
+     * Returns the current view slot that matches the passed document position.
+     *
+     * @param x - The x document position.
+     * @param y - The y document position.
+     *
+     * @return {SchedulerSlot} - The slot.
+     *
+     * {% embed_file drag-and-drop/app.component.ts %}
+     * {% embed_file drag-and-drop/draggable.directive.ts %}
+     * {% embed_file drag-and-drop/app.module.ts %}
+     * {% embed_file shared/main.ts %}
+     */
+    SchedulerComponent.prototype.slotByPosition = function (x, y) {
+        return this.viewContext.executeMethod('slotByPosition', { x: x, y: y });
+    };
+    /**
+     * Returns the event associated with the specified DOM element, if any.
+     *
+     * @param element - The DOM element document position.
+     * @return the event instance, if found.
+     */
+    SchedulerComponent.prototype.eventFromElement = function (element) {
+        return this.viewContext.executeMethod('eventFromElement', { element: element });
+    };
+    Object.defineProperty(SchedulerComponent.prototype, "activeEvent", {
+        /**
+         * Gets the currently active event, if any.
+         * The active event is the event that can currently receive focus.
+         */
+        get: function () {
+            var activeElement = this.focusService.activeElement;
+            if (activeElement) {
+                return this.eventFromElement(activeElement.nativeElement);
             }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Focuses the next event or an event at a specified relative position.
+     * The `options` parameter can be used to set a positive or negative offset
+     * that is relative to the currently focused event.
+     * A `nowrap` flag toggles the wrapping to the first or to the last item.
+     *
+     * @example
+     * ```ts-no-run
+     * scheduler.focusNext(); // Focuses the next event.
+     * scheduler.focusNext({ offset: 1 }); // Focuses the next event.
+     * scheduler.focusNext({ offset: -1 }); // Focuses the previous event.
+     * scheduler.focusNext({ nowrap: true }); // If the focus is on the last event, does not move the focus to the first event.
+     * ```
+     *
+     * @param position The relative position of the event to focus.
+     * @returns `true` if the focused event changed. Otherwise, returns `false`.
+     */
+    SchedulerComponent.prototype.focusNext = function (position) {
+        return this.focusService.focusNext(position);
+    };
+    /**
+     * Focuses the previous event or an event at a specified relative position.
+     * The `options` parameter can be used to set a positive or negative offset
+     * that is relative to the currently focused event.
+     * A `nowrap` flag toggles the wrapping to the first or to the last item.
+     *
+     * @example
+     * ```ts-no-run
+     * scheduler.focusPrev(); // Focuses the previous event
+     * scheduler.focusPrev({ nowrap: true }); // Does not move the focus to the last event, if focus is on the first one.
+     * ```
+     *
+     * @param position The relative position of the event to focus.
+     * @returns `true` if the focused event changed. Otherwise, returns `false`.
+     */
+    SchedulerComponent.prototype.focusPrev = function (position) {
+        var prevPosition = __assign({ offset: -1 }, position);
+        return this.focusService.focusNext(prevPosition);
+    };
+    /**
+     * Focuses the last focused event or the Scheduler element, if no events are available.
+     */
+    SchedulerComponent.prototype.focus = function () {
+        return this.focusService.focus();
+    };
+    SchedulerComponent.prototype.isInRange = function (date) {
+        return (!this.min || this.min <= date) && (!this.max || date <= this.max);
+    };
+    SchedulerComponent.prototype.notifyOptionsChange = function (changes) {
+        var workweek = this.workWeek;
+        this.viewContext.notifyOptionsChange({
+            group: this.group,
+            resources: this.resources,
+            allDayEventTemplate: this.allDayEventTemplate ? this.allDayEventTemplate.first : null,
+            eventTemplate: this.eventTemplate ? this.eventTemplate.first : null,
+            timeSlotTemplate: this.timeSlotTemplate ? this.timeSlotTemplate.first : null,
+            minorTimeHeaderTemplate: this.minorTimeHeaderTemplate ? this.minorTimeHeaderTemplate.first : null,
+            majorTimeHeaderTemplate: this.majorTimeHeaderTemplate ? this.majorTimeHeaderTemplate.first : null,
+            monthDaySlotTemplate: this.monthDaySlotTemplate ? this.monthDaySlotTemplate.first : null,
+            dateHeaderTemplate: this.dateHeaderTemplate ? this.dateHeaderTemplate.first : null,
+            allDaySlotTemplate: this.allDaySlotTemplate ? this.allDaySlotTemplate.first : null,
+            groupHeaderTemplate: this.groupHeaderTemplate ? this.groupHeaderTemplate.first : null,
+            agendaDateTemplate: this.agendaDateTemplate ? this.agendaDateTemplate.first : null,
+            agendaTimeTemplate: this.agendaTimeTemplate ? this.agendaTimeTemplate.first : null,
+            min: this.min,
+            max: this.max,
+            showWorkHours: this.showWorkHours,
+            startTime: this.startTime,
+            scrollTime: this.scrollTime,
+            endTime: this.endTime,
+            workDayStart: this.workDayStart,
+            workDayEnd: this.workDayEnd,
+            workWeekStart: workweek.start,
+            workWeekEnd: workweek.end,
+            weekStart: this.weekStart,
+            slotDuration: this.slotDuration,
+            slotDivisions: this.slotDivisions,
+            eventHeight: this.eventHeight,
+            editable: this.editable,
+            selectable: this.selectable,
+            timezone: this.timezone,
+            currentTimeMarker: this.currentTimeMarker,
+            slotClass: this.slotClass,
+            slotFill: this.slotFill,
+            columnWidth: this.columnWidth,
+            eventClass: this.eventClass,
+            eventStyles: this.eventStyles,
+            isSlotSelected: this.isSlotSelected,
+            changes: changes
+        });
+    };
+    Object.defineProperty(SchedulerComponent.prototype, "workWeek", {
+        get: function () {
+            var _a = this.intlService.weekendRange(), start = _a.start, end = _a.end;
+            var workWeekStart = isPresent(this.workWeekStart) ? this.workWeekStart : (end + 1) % DAYS_IN_WEEK;
+            var weekEnd = start > 0 ? start - 1 : Day.Saturday;
+            var workWeekEnd = isPresent(this.workWeekEnd) ? this.workWeekEnd : weekEnd;
+            return { start: workWeekStart, end: workWeekEnd };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SchedulerComponent.prototype.resetViewIndex = function () {
+        var index = this.selectedViewIndex;
+        var newIndex = Math.max(0, Math.min(index, this.views.length - 1));
+        this.setViewIndex(newIndex);
+        this.onViewIndexChange();
+    };
+    SchedulerComponent.prototype.onViewIndexChange = function () {
+        if (!this.views) {
+            return;
         }
-        if (expandedResources.length) {
-            resources = expandedResources;
+        var views = this.views.toArray();
+        var selectedView = views[this.viewIndex];
+        if (selectedView) {
+            this.selectedView = selectedView;
         }
-    }
-    addNotGroupedResources(event, resources, allResources);
-    return resources;
-}
-/** @hidden */
-function assignTasksResources(tasks, options) {
-    for (var idx = 0; idx < tasks.length; idx++) {
-        var task = tasks[idx];
-        task.resources = eventResources(task.event, options);
-    }
-}
-/** @hidden */
-function findRowIndex(events, data) {
-    if (data.rowIndex !== undefined) {
-        return data.rowIndex;
-    }
-    for (var idx = 0; idx < events.length; idx++) {
-        if (!events[idx]) {
-            return idx;
+    };
+    SchedulerComponent.prototype.setViewIndex = function (newIndex) {
+        var changed = this.selectedViewIndex !== newIndex;
+        if (changed) {
+            this.selectedViewIndex = newIndex;
+            this.selectedViewIndexChange.emit(newIndex);
         }
-    }
-    return events.length;
-}
-/** @hidden */
-function isRecurrence(task) {
-    return Boolean(task.event && task.event.recurrenceRule);
-}
-/** @hidden */
-function isRecurrenceException(task) {
-    return task.event && isPresent(task.event.recurrenceId) && !task.event.recurrenceRule;
-}
-/** @hidden */
-var rectContains = function (rect, left, top) {
-    return rect.left <= left && left <= rect.left + rect.width && rect.top <= top && top <= rect.top + rect.height;
-};
-/** @hidden */
-var rectContainsX = function (rect, left) {
-    return rect.left <= left && left <= rect.left + rect.width;
-};
-/** @hidden */
-var toPx = function (value) { return value + "px"; };
-/** @hidden */
-var elementOffset = function (element) {
-    if (!element) {
-        return null;
-    }
-    var box = element.getBoundingClientRect();
-    var documentElement = document.documentElement;
-    return {
-        top: box.top + (window.pageYOffset || documentElement.scrollTop) - (documentElement.clientTop || 0),
-        left: box.left + (window.pageXOffset || documentElement.scrollLeft) - (documentElement.clientLeft || 0),
-        width: box.width,
-        height: box.height
+        return changed;
     };
-};
-/** @hidden */
-var pointDistance = function (x1, y1, x2, y2) { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); };
-/** @hidden */
-var ignoreContentChild = function (child) { return child.nodeName === 'KENDO-RESIZE-SENSOR' || hasClasses(child, 'k-loading-mask'); };
-/** @hidden */
-var setCoordinates = function (element, coordinates) {
-    for (var field in coordinates) {
-        if (coordinates.hasOwnProperty(field)) {
-            element.style[field] = toPx(coordinates[field]);
+    SchedulerComponent.prototype.processEvents = function (dataItems) {
+        var _this = this;
+        var timezone = this.timezone;
+        var fields = this.modelFields;
+        var items = dataItems
+            .map(function (dataItem) { return readEvent(dataItem, fields, _this.resources); })
+            .filter(function (event) { return !isRecurrenceMaster(event); })
+            .map(function (event) {
+            var start = ZonedDate.fromLocalDate(event.start, timezone);
+            var end = ZonedDate.fromLocalDate(event.end, timezone);
+            return { start: start, end: end, event: event };
+        });
+        this.viewItems = items;
+        this.viewContext.notifyItems(items);
+    };
+    SchedulerComponent.prototype.attachEditHandlers = function () {
+        if (!this.editService) {
+            return;
         }
-    }
-};
-/** @hidden */
-var convertNgClassBindings = function (bindingValues) {
-    var result = [];
-    if (isString(bindingValues)) {
-        result.push(bindingValues);
-    }
-    else if (isArray(bindingValues)) {
-        result.push.apply(result, bindingValues);
-    }
-    else if (isObject(bindingValues)) {
-        for (var field in bindingValues) {
-            if (bindingValues.hasOwnProperty(field) && bindingValues[field]) {
-                result.push(field);
-            }
+        this.subs.add(this.editService.changes.subscribe(this.emitCRUDEvent.bind(this)));
+    };
+    SchedulerComponent.prototype.emitCRUDEvent = function (args) {
+        Object.assign(args, { sender: this });
+        switch (args.action) {
+            case 'cancel':
+                this.cancel.emit(args);
+                break;
+            case 'save':
+                this.save.emit(args);
+                break;
+            default: break;
+        }
+    };
+    SchedulerComponent.prototype.intlChange = function () {
+        var currentView = this.selectedView;
+        this.selectedView = null;
+        if (!isPresent(this.workWeekStart) || !isPresent(this.workWeekEnd)) {
+            this.notifyOptionsChange();
         }
-    }
-    return result;
-};
-/**
- * @hidden
- */
-function formatEventTime(start, end, isAllDay, localeId) {
-    var startTimeFormat = { skeleton: 'yMMMMEEEEdhm' };
-    var startDateFormat = { skeleton: 'yMMMMEEEEd' };
-    var endFormat = isEqualDate(start, end) ? 't' : startTimeFormat;
-    return isAllDay ?
-        "" + formatDate(start, startDateFormat, localeId) :
-        formatDate(start, startTimeFormat, localeId) + "\u2013" + formatDate(end, endFormat, localeId);
-}
-/**
- * @hidden
- */
-function formValueOrDefault(group, field, defaultValue) {
-    var control = group.get(field);
-    if (!control) {
-        return defaultValue;
-    }
-    return control.value || defaultValue;
-}
-/**
- * @hidden
- */
-var isWorkWeekDay = function (day, start, end) {
-    if (end < start) {
-        return day <= end || start <= day;
-    }
-    return start <= day && day <= end;
-};
+        this.changeDetector.detectChanges();
+        this.selectedView = currentView;
+        if (NgZone.isInAngularZone()) {
+            this.changeDetector.markForCheck();
+        }
+        else {
+            this.changeDetector.detectChanges();
+        }
+    };
+    SchedulerComponent.prototype.attachElementEventHandlers = function () {
+        var _this = this;
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        var wrapper = this.wrapper.nativeElement;
+        this.zone.runOutsideAngular(function () {
+            var windowBlurSubscription = _this.renderer.listen('window', 'blur', function (args) {
+                _this.domEvents.windowBlur.emit(args);
+            });
+            var clickSubscription = _this.renderer.listen(wrapper, 'click', function (args) {
+                _this.domEvents.click.emit(args);
+            });
+            var keydownSubscription = _this.renderer.listen(wrapper, 'keydown', function (args) {
+                _this.domEvents.keydown.emit(args);
+            });
+            var focused = false;
+            var focusInSubscription = _this.renderer.listen(wrapper, 'focusin', function (args) {
+                _this.domEvents.focus.emit(args);
+                if (!focused) {
+                    _this.domEvents.focusIn.emit(args);
+                    _this.renderer.addClass(_this.wrapper.nativeElement, 'k-state-focused');
+                    focused = true;
+                }
+            });
+            var focusOutSubscription = _this.renderer.listen(wrapper, 'focusout', function (args) {
+                var next = args.relatedTarget || document.activeElement;
+                var outside = !closest(next, function (node) { return node === wrapper; });
+                if (outside) {
+                    _this.domEvents.focusOut.emit(args);
+                    _this.renderer.removeClass(_this.wrapper.nativeElement, 'k-state-focused');
+                    focused = false;
+                }
+            });
+            _this.detachElementEventHandlers = function () {
+                windowBlurSubscription();
+                clickSubscription();
+                keydownSubscription();
+                focusInSubscription();
+                focusOutSubscription();
+            };
+        });
+    };
+    __decorate([
+        HostBinding('class.k-widget'),
+        HostBinding('class.k-scheduler'),
+        HostBinding('class.k-floatwrap'),
+        __metadata("design:type", Boolean)
+    ], SchedulerComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('class.k-rtl'),
+        __metadata("design:type", Boolean)
+    ], SchedulerComponent.prototype, "rtl", void 0);
+    __decorate([
+        HostBinding('attr.dir'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], SchedulerComponent.prototype, "dir", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], SchedulerComponent.prototype, "selectedViewIndex", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SchedulerComponent.prototype, "editable", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], SchedulerComponent.prototype, "selectable", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Date)
+    ], SchedulerComponent.prototype, "min", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Date)
+    ], SchedulerComponent.prototype, "max", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "eventHeight", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "columnWidth", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], SchedulerComponent.prototype, "showWorkHours", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SchedulerComponent.prototype, "startTime", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SchedulerComponent.prototype, "endTime", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SchedulerComponent.prototype, "workDayStart", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SchedulerComponent.prototype, "workDayEnd", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "workWeekStart", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "workWeekEnd", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], SchedulerComponent.prototype, "weekStart", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "slotDuration", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "slotDivisions", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], SchedulerComponent.prototype, "slotFill", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SchedulerComponent.prototype, "scrollTime", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SchedulerComponent.prototype, "group", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], SchedulerComponent.prototype, "resources", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], SchedulerComponent.prototype, "loading", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], SchedulerComponent.prototype, "timezone", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [Array])
+    ], SchedulerComponent.prototype, "events", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Date),
+        __metadata("design:paramtypes", [Date])
+    ], SchedulerComponent.prototype, "selectedDate", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], SchedulerComponent.prototype, "modelFields", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SchedulerComponent.prototype, "currentTimeMarker", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], SchedulerComponent.prototype, "slotClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], SchedulerComponent.prototype, "eventClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], SchedulerComponent.prototype, "eventStyles", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], SchedulerComponent.prototype, "isSlotSelected", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "selectedViewIndexChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "navigate", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "dateChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "slotClick", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "slotDblClick", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "create", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "eventClick", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "eventDblClick", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "eventKeydown", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "cancel", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "save", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "remove", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "resizeStart", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "resize", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "resizeEnd", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "dragStart", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "drag", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "dragEnd", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "slotDragStart", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "slotDrag", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "slotDragEnd", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SchedulerComponent.prototype, "pdfExport", void 0);
+    __decorate([
+        ContentChild(EditDialogTemplateDirective, { static: false }),
+        __metadata("design:type", EditDialogTemplateDirective)
+    ], SchedulerComponent.prototype, "editDialogTemplate", void 0);
+    __decorate([
+        ContentChild(ToolbarTemplateDirective, { static: false }),
+        __metadata("design:type", ToolbarTemplateDirective)
+    ], SchedulerComponent.prototype, "toolbarTemplate", void 0);
+    __decorate([
+        ContentChildren(SchedulerView),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "views", void 0);
+    __decorate([
+        ViewChild(ResizeSensorComponent, { static: true }),
+        __metadata("design:type", ResizeSensorComponent)
+    ], SchedulerComponent.prototype, "resizeSensor", void 0);
+    __decorate([
+        ViewChild("confirmationDialogContainer", { read: ViewContainerRef, static: true }),
+        __metadata("design:type", ViewContainerRef)
+    ], SchedulerComponent.prototype, "confirmationDialogContainerRef", void 0);
+    __decorate([
+        ViewChild(LoadingComponent, { static: true }),
+        __metadata("design:type", LoadingComponent)
+    ], SchedulerComponent.prototype, "loadingComponent", void 0);
+    __decorate([
+        ContentChildren(AllDayEventTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "allDayEventTemplate", void 0);
+    __decorate([
+        ContentChildren(EventTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "eventTemplate", void 0);
+    __decorate([
+        ContentChildren(TimeSlotTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "timeSlotTemplate", void 0);
+    __decorate([
+        ContentChildren(MinorTimeHeaderTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "minorTimeHeaderTemplate", void 0);
+    __decorate([
+        ContentChildren(MajorTimeHeaderTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "majorTimeHeaderTemplate", void 0);
+    __decorate([
+        ContentChildren(MonthDaySlotTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "monthDaySlotTemplate", void 0);
+    __decorate([
+        ContentChildren(DateHeaderTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "dateHeaderTemplate", void 0);
+    __decorate([
+        ContentChildren(AllDaySlotTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "allDaySlotTemplate", void 0);
+    __decorate([
+        ContentChildren(GroupHeaderTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "groupHeaderTemplate", void 0);
+    __decorate([
+        ContentChildren(AgendaDateTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "agendaDateTemplate", void 0);
+    __decorate([
+        ContentChildren(AgendaTimeTemplateDirective),
+        __metadata("design:type", QueryList)
+    ], SchedulerComponent.prototype, "agendaTimeTemplate", void 0);
+    SchedulerComponent = __decorate([
+        Component({
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            selector: 'kendo-scheduler',
+            providers: [
+                EditService,
+                DialogsService,
+                DomEventsService,
+                LocalDataChangesService,
+                FocusService,
+                SchedulerLocalizationService,
+                {
+                    provide: LocalizationService,
+                    useExisting: SchedulerLocalizationService
+                },
+                {
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.scheduler'
+                },
+                ToolbarService,
+                ViewContextService,
+                ViewStateService,
+                PDFService
+            ],
+            // TODO: Move to themes
+            styles: ['.k-scheduler.k-state-focused { box-shadow: 0 0.5px 0.5px 0.5px rgba(0, 0, 0, .12); }'],
+            encapsulation: ViewEncapsulation.None,
+            template: "\n        <ng-container kendoSchedulerLocalizedMessages\n            i18n-allEvents=\"kendo.scheduler.allEvents|The All events text displayed in the timeline views when there is no vertical grouping.\"\n            allEvents=\"All events\"\n\n            i18n-allDay=\"kendo.scheduler.allDay|The all day text displayed in the day and week views.\"\n            allDay=\"all day\"\n\n            i18n-dateHeader=\"kendo.scheduler.dateHeader|The date header text displayed in the agenda view.\"\n            dateHeader=\"Date\"\n\n            i18n-timeHeader=\"kendo.scheduler.timeHeader|The time header text displayed in the agenda view.\"\n            timeHeader=\"Time\"\n\n            i18n-deleteTitle=\"kendo.scheduler.deleteTitle|The delete icon title.\"\n            deleteTitle=\"Delete\"\n\n            i18n-eventHeader=\"kendo.scheduler.eventHeader|The event header text displayed in the agenda view.\"\n            eventHeader=\"Event\"\n\n            i18n-nextTitle=\"kendo.scheduler.nextTitle|The title of the navigation next button.\"\n            nextTitle=\"Next\"\n\n            i18n-previousTitle=\"kendo.scheduler.previousTitle|The title of the navigation previous button.\"\n            previousTitle=\"Previous\"\n\n            i18n-showFullDay=\"kendo.scheduler.showFullDay|The text of the show full day button displayed in the footer of the day, week and timeline views.\"\n            showFullDay=\"Show full day\"\n\n            i18n-showWorkDay=\"kendo.scheduler.showWorkDay|The text of the show work day button displayed in the footer of the day, week and timeline views.\"\n            showWorkDay=\"Show business hours\"\n\n            i18n-today=\"kendo.scheduler.today|The today button text displayed in the navigation.\"\n            today=\"Today\"\n\n            i18n-calendarToday=\"kendo.scheduler.calendarToday|The text of today's date in the header of the Calendar.\"\n            calendarToday=\"TODAY\"\n\n            i18n-dayViewTitle=\"kendo.scheduler.dayViewTitle|The day view title.\"\n            dayViewTitle=\"Day\"\n\n            i18n-multiDayViewTitle=\"kendo.scheduler.multiDayViewTitle|The multi day view title.\"\n            multiDayViewTitle=\"Multi-Day\"\n\n            i18n-weekViewTitle=\"kendo.scheduler.weekViewTitle|The week view title.\"\n            weekViewTitle=\"Week\"\n\n            i18n-workWeekViewTitle=\"kendo.scheduler.workWeekViewTitle|The work week view title.\"\n            workWeekViewTitle=\"Work Week\"\n\n            i18n-monthViewTitle=\"kendo.scheduler.monthViewTitle|The month view title.\"\n            monthViewTitle=\"Month\"\n\n            i18n-timelineViewTitle=\"kendo.scheduler.timelineViewTitle|The timeline view title.\"\n            timelineViewTitle=\"Timeline\"\n\n            i18n-timelineWeekViewTitle=\"kendo.scheduler.timelineWeekViewTitle|The timeline week view title.\"\n            timelineWeekViewTitle=\"Timeline Week\"\n\n            i18n-timelineMonthViewTitle=\"kendo.scheduler.timelineMonthViewTitle|The timeline month view title.\"\n            timelineMonthViewTitle=\"Timeline Month\"\n\n            i18n-agendaViewTitle=\"kendo.scheduler.agendaViewTitle|The agenda view title.\"\n            agendaViewTitle=\"Agenda\"\n\n            i18n-cancel=\"kendo.scheduler.cancel|The text similar to 'Cancel' displayed in scheduler.\"\n            cancel=\"Cancel\"\n\n            i18n-save=\"kendo.scheduler.save|The text similar to 'Save' displayed in scheduler.\"\n            save=\"Save\"\n\n            i18n-editorEventTitle=\"kendo.scheduler.editorEventTitle|The text similar to 'Title' displayed in the scheduler event editor.\"\n            editorEventTitle='Title'\n\n            i18n-editorEventStart=\"kendo.scheduler.editorEventStart|The text similar to 'Start' displayed in the scheduler event editor.\"\n            editorEventStart=\"Start\"\n\n            i18n-editorEventStartTimeZone=\"kendo.scheduler.editorEventStartTimeZone|The text similar to 'Start Time Zone' displayed in the scheduler event editor.\"\n            editorEventStartTimeZone=\"Start Time Zone\"\n\n            i18n-editorEventEnd=\"kendo.scheduler.editorEventEnd|The text similar to 'End' displayed in the scheduler event editor.\"\n            editorEventEnd=\"End\"\n\n            i18n-editorEventEndTimeZone=\"kendo.scheduler.editorEventEndTimeZone|The text similar to 'End Time Zone' displayed in the scheduler event editor.\"\n            editorEventEndTimeZone=\"End Time Zone\"\n\n            i18n-editorEventAllDay=\"kendo.scheduler.editorEventAllDay|The text similar to 'All Day event' displayed in the scheduler event editor.\"\n            editorEventAllDay=\"All Day Event\"\n\n            i18n-editorEventDescription=\"kendo.scheduler.editorEventDescription|The text similar to 'Description' displayed in the scheduler event editor.\"\n            editorEventDescription=\"Description\"\n\n            i18n-editorEventSeparateTimeZones=\"kendo.scheduler.editorEventSeparateTimeZones|The text similar to 'Use separate Start and End Time Zones' displayed in the scheduler event editor.\"\n            editorEventSeparateTimeZones=\"End in different Time Zone\"\n\n            i18n-editorEventTimeZone=\"kendo.scheduler.editorEventTimeZone|The text similar to 'Time Zone' displayed in the scheduler event editor.\"\n            editorEventTimeZone='Specify Time Zone'\n\n            i18n-editorTitle=\"kendo.scheduler.editorTitle|The text similar to 'Event' displayed as title of the scheduler event editor.\"\n            editorTitle='Event'\n\n            i18n-recurrenceEditorRepeat=\"kendo.scheduler.recurrenceEditorRepeat|The text similar to 'Repeat' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorRepeat='Repeat'\n\n            i18n-recurrenceEditorDailyInterval=\"kendo.scheduler.recurrenceEditorDailyInterval|The text similar to 'day(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorDailyInterval='day(s)'\n\n            i18n-recurrenceEditorDailyRepeatEvery=\"kendo.scheduler.recurrenceEditorDailyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorDailyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorWeeklyInterval=\"kendo.scheduler.recurrenceEditorWeeklyInterval|The text similar to 'week(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorWeeklyInterval='week(s)'\n\n            i18n-recurrenceEditorWeeklyRepeatEvery=\"kendo.scheduler.recurrenceEditorWeeklyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorWeeklyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorWeeklyRepeatOn=\"kendo.scheduler.recurrenceEditorWeeklyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorWeeklyRepeatOn='Repeat on'\n\n            i18n-recurrenceEditorMonthlyDay=\"kendo.scheduler.recurrenceEditorMonthlyDay|The text similar to 'Day' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyDay='Day'\n\n            i18n-recurrenceEditorMonthlyInterval=\"kendo.scheduler.recurrenceEditorMonthlyInterval|The text similar to 'month(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyInterval='month(s)'\n\n            i18n-recurrenceEditorMonthlyRepeatEvery=\"kendo.scheduler.recurrenceEditorMonthlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorMonthlyRepeatOn=\"kendo.scheduler.recurrenceEditorMonthlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorMonthlyRepeatOn='Repeat on'\n\n            i18n-recurrenceEditorYearlyOf=\"kendo.scheduler.recurrenceEditorYearlyOf|The text similar to 'of' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyOf='of'\n\n            i18n-recurrenceEditorYearlyRepeatEvery=\"kendo.scheduler.recurrenceEditorYearlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyRepeatEvery='Repeat every'\n\n            i18n-recurrenceEditorYearlyRepeatOn=\"kendo.scheduler.recurrenceEditorYearlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyRepeatOn='Repeat on'\n\n            i18n-recurrenceEditorYearlyInterval=\"kendo.scheduler.recurrenceEditorYearlyInterval|The text similar to 'year(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorYearlyInterval='year(s)'\n\n            i18n-recurrenceEditorFrequenciesDaily=\"kendo.scheduler.recurrenceEditorFrequenciesDaily|The text similar to 'Daily' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesDaily='Daily'\n\n            i18n-recurrenceEditorFrequenciesMonthly=\"kendo.scheduler.recurrenceEditorFrequenciesMonthly|The text similar to 'Monthly' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesMonthly='Monthly'\n\n            i18n-recurrenceEditorFrequenciesNever=\"kendo.scheduler.recurrenceEditorFrequenciesNever|The text similar to 'Never' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesNever='Never'\n\n            i18n-recurrenceEditorFrequenciesWeekly=\"kendo.scheduler.recurrenceEditorFrequenciesWeekly|The text similar to 'Weekly' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesWeekly='Weekly'\n\n            i18n-recurrenceEditorFrequenciesYearly=\"kendo.scheduler.recurrenceEditorFrequenciesYearly|The text similar to 'Yearly' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorFrequenciesYearly='Yearly'\n\n            i18n-recurrenceEditorOffsetPositionsFirst=\"kendo.scheduler.recurrenceEditorOffsetPositionsFirst|The text similar to 'First' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsFirst='First'\n\n            i18n-recurrenceEditorOffsetPositionsSecond=\"kendo.scheduler.recurrenceEditorOffsetPositionsSecond|The text similar to 'Second' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsSecond='Second'\n\n            i18n-recurrenceEditorOffsetPositionsThird=\"kendo.scheduler.recurrenceEditorOffsetPositionsThird|The text similar to 'Third' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsThird='Third'\n\n            i18n-recurrenceEditorOffsetPositionsFourth=\"kendo.scheduler.recurrenceEditorOffsetPositionsFourth|The text similar to 'Fourth' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsFourth='Fourth'\n\n            i18n-recurrenceEditorOffsetPositionsLast=\"kendo.scheduler.recurrenceEditorOffsetPositionsLast|The text similar to 'Last' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorOffsetPositionsLast='Last'\n\n            i18n-recurrenceEditorWeekdaysDay=\"kendo.scheduler.recurrenceEditorWeekdaysDay|The text similar to 'Day' displayed in the repeat by section of the monthly recurrence pattern.\"\n            recurrenceEditorWeekdaysDay='Day'\n\n            i18n-recurrenceEditorWeekdaysWeekday=\"kendo.scheduler.recurrenceEditorWeekdaysWeekday|The text similar to 'Weekday' displayed in the repeat by section of the monthly recurrence pattern.\"\n            recurrenceEditorWeekdaysWeekday='Weekday'\n\n            i18n-recurrenceEditorWeekdaysWeekendday=\"kendo.scheduler.recurrenceEditorWeekdaysWeekendday|The text similar to 'Weekend Day' displayed in the repeat by section of the monthly recurrence pattern.\"\n            recurrenceEditorWeekdaysWeekendday='Weekend Day'\n\n            i18n-recurrenceEditorEndAfter=\"kendo.scheduler.recurrenceEditorEndAfter|The text similar to 'After' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndAfter='After'\n\n            i18n-recurrenceEditorEndOccurrence=\"kendo.scheduler.recurrenceEditorEndOccurrence|The text similar to 'occurrence(s)' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndOccurrence='occurrence(s)'\n\n            i18n-recurrenceEditorEndLabel=\"kendo.scheduler.recurrenceEditorEndLabel|The text similar to 'End' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndLabel='End'\n\n            i18n-recurrenceEditorEndNever=\"kendo.scheduler.recurrenceEditorEndNever|The text similar to 'Never' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndNever='Never'\n\n            i18n-recurrenceEditorEndOn=\"kendo.scheduler.recurrenceEditorEndOn|The text similar to 'On' displayed in the scheduler recurrence editor.\"\n            recurrenceEditorEndOn='On'\n\n            i18n-destroy=\"kendo.scheduler.destroy|The text of the 'Delete' button displayed in the scheduler remove confirmation dialog.\"\n            destroy='Delete'\n\n            i18n-deleteConfirmation=\"kendo.scheduler.deleteConfirmation|The text similar to 'Are you sure you want to delete this event?' displayed in scheduler remove confirmation dialog.\"\n            deleteConfirmation='Are you sure you want to delete this event?'\n\n            i18n-editRecurringConfirmation=\"kendo.scheduler.editRecurringConfirmation|The text similar to 'Do you want to edit only this event occurrence or the whole series?' displayed in the scheduler recurring confirmation dialog.\"\n            editRecurringConfirmation='Do you want to edit only this event occurrence or the whole series?'\n\n            i18n-editOccurrence=\"kendo.scheduler.editOccurrence|The text of the 'Edit current occurrence' button displayed in the scheduler recurring confirmation dialog.\"\n            editOccurrence='Edit current occurrence'\n\n            i18n-editSeries=\"kendo.scheduler.editSeries|The text of the 'Edit the series' button displayed in the scheduler recurring confirmation dialog.\"\n            editSeries='Edit the series'\n\n            i18n-deleteRecurringConfirmation=\"kendo.scheduler.deleteRecurringConfirmation|The text similar to 'Do you want to delete only this event occurrence or the whole series?' displayed in the scheduler recurring confirmation dialog.\"\n            deleteRecurringConfirmation='Do you want to delete only this event occurrence or the whole series?'\n\n            i18n-deleteOccurrence=\"kendo.scheduler.deleteOccurrence|The text of the 'Delete current occurrence' button displayed in the scheduler recurring confirmation dialog.\"\n            deleteOccurrence='Delete current occurrence'\n\n            i18n-deleteSeries=\"kendo.scheduler.deleteSeries|The text similar of the 'Delete the series' button displayed in the scheduler recurring confirmation dialog.\"\n            deleteSeries='Delete the series'\n\n            i18n-deleteDialogTitle=\"kendo.scheduler.deleteDialogTitle|The title of the remove confirmation dialog, similar to 'Delete Event'.\"\n            deleteDialogTitle='Delete Event'\n\n            i18n-deleteRecurringDialogTitle=\"kendo.scheduler.deleteRecurringDialogTitle|The title of the recurring remove confirmation dialog, similar to 'Delete Recurring Item'\"\n            deleteRecurringDialogTitle='Delete Recurring Item'\n\n            i18n-editRecurringDialogTitle=\"kendo.scheduler.editRecurringDialogTitle|The title of the recurring edit confirmation dialog, similar to 'Edit Recurring Item'\"\n            editRecurringDialogTitle='Edit Recurring Item'\n        >\n        </ng-container>\n\n        <kendo-scheduler-toolbar\n            [dateRange]=\"dateRangeStream\"\n            [selectedDate]=\"selectedDateStream\"\n            [views]=\"views\"\n            [selectedView]=\"selectedView\"\n            [template]=\"toolbarTemplate\"\n            (navigate)=\"onNavigationAction($event)\"\n            [min]=\"min\"\n            [max]=\"max\"\n        ></kendo-scheduler-toolbar>\n\n        <ng-container *ngTemplateOutlet=\"selectedView?.template\">\n        </ng-container>\n\n        <ng-container #confirmationDialogContainer>\n        </ng-container>\n\n        <kendo-scheduler-edit-dialog\n            [resources]=\"resources\"\n            [editTemplate]=\"editDialogTemplate\"\n            [timezone]=\"timezone\"\n            [weekStart]=\"weekStart\"\n            [fields]=\"modelFields\"\n        ></kendo-scheduler-edit-dialog>\n\n        <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n\n        <div [loading]=\"loading\" kendoSchedulerLoading>\n        </div>\n    "
+        }),
+        __metadata("design:paramtypes", [ElementRef,
+            ViewContextService,
+            ViewStateService,
+            EditService,
+            DialogsService,
+            IntlService,
+            ChangeDetectorRef,
+            NgZone,
+            PDFService,
+            LocalizationService,
+            DomEventsService,
+            Renderer2,
+            FocusService])
+    ], SchedulerComponent);
+    return SchedulerComponent;
+}());
 
 // TODO
 // Extract as public method
@@ -4155,7 +4353,7 @@ var ToolbarViewSelectorComponent = /** @class */ (function () {
         Component({
             // tslint:disable-next-line:component-selector
             selector: '[kendoSchedulerToolbarViewSelector]',
-            template: "\n        <select *ngIf=\"ctx.views?.length > 1\"\n                (change)=\"onChange($event)\"\n                class=\"k-views-dropdown k-dropdown\">\n            <option *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view) == true\"\n                [value]=\"view.name\"\n            >\n                {{ view.title }}\n            </option>\n        </select>\n        <span class=\"k-scheduler-views k-button-group\">\n            <button kendoButton\n                type=\"button\"\n                *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view)\"\n                [attr.aria-pressed]=\"isSelected(view)\"\n                (click)=\"select(view)\"\n            >\n                <span class=\"k-button-text\">\n                    {{ view.title }}\n                </span>\n            </button>\n        </span>\n    "
+            template: "\n        <select *ngIf=\"ctx.views?.length > 1\"\n                (change)=\"onChange($event)\"\n                class=\"k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker\">\n            <option *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view) == true\"\n                [value]=\"view.name\"\n            >\n                {{ view.title }}\n            </option>\n        </select>\n        <span class=\"k-scheduler-views k-button-group\">\n            <button kendoButton\n                type=\"button\"\n                *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view)\"\n                [attr.aria-pressed]=\"isSelected(view)\"\n                (click)=\"select(view)\"\n            >\n                <span class=\"k-button-text\">\n                    {{ view.title }}\n                </span>\n            </button>\n        </span>\n    "
         }),
         __metadata("design:paramtypes", [ToolbarService])
     ], ToolbarViewSelectorComponent);
@@ -6217,7 +6415,7 @@ 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;
@@ -6227,6 +6425,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 = [];
@@ -6240,8 +6439,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();
@@ -6372,6 +6580,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;
@@ -6379,6 +6601,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;
@@ -6405,6 +6629,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, {
@@ -6446,16 +6671,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) {
@@ -6465,6 +6690,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) {
@@ -6479,12 +6708,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,
@@ -6511,6 +6743,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;
@@ -6662,6 +6908,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 = [];
@@ -7153,8 +7444,8 @@ var WEEKS_COUNT = 6;
  */
 var MonthViewRendererComponent = /** @class */ (function (_super) {
     __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;
@@ -7210,6 +7501,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);
@@ -7324,7 +7618,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    "
         }),
         __metadata("design:paramtypes", [ViewContextService,
             ViewStateService,
@@ -7334,7 +7628,8 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
             ElementRef,
             Renderer2,
             PDFService,
-            LocalizationService])
+            LocalizationService,
+            ChangeDetectorRef])
     ], MonthViewRendererComponent);
     return MonthViewRendererComponent;
 }(BaseView));
@@ -7570,7 +7865,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;
@@ -7822,7 +8117,7 @@ var ViewsSharedModule = /** @class */ (function () {
     }
     ViewsSharedModule = __decorate([
         NgModule({
-            imports: [CommonModule, IntlModule, SharedModule],
+            imports: [CommonModule, IntlModule, SharedModule, ButtonsModule],
             exports: [
                 DECLARATIONS,
                 IntlModule,
@@ -9205,7 +9500,7 @@ var getNextDate = function (date, count, numberOfDays) { return getDate(addDays(
 var DayTimeViewComponent = /** @class */ (function (_super) {
     __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';
@@ -9741,8 +10036,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) {
@@ -9871,7 +10166,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    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             ViewContextService,
@@ -10116,7 +10411,7 @@ var DayTimeModule = /** @class */ (function () {
     }
     DayTimeModule = __decorate([
         NgModule({
-            imports: [CommonModule, SharedModule],
+            imports: [CommonModule, SharedModule, ViewsSharedModule],
             exports: [
                 DIRECTIVES
             ],
@@ -10366,7 +10661,7 @@ var TimelineMultiDayViewComponent = /** @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><th></th></tr>\n                        <tr><th class=\"k-slot-cell\"></th></tr>\n                        <tr *ngFor=\"let resource of horizontalResources; trackBy: itemIndex;\">\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                        <ng-container *ngIf=\"showCurrentTime\">\n                            <div *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                                #currentTimeArrow class=\"k-current-time k-current-time-arrow-down\">\n                            </div>\n                        </ng-container>\n                        <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                            <colgroup>\n                                <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                            </colgroup>\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\"\n                                        [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                                </th>\n                            </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\">\n                                     <ng-container *ngFor=\"let daySlot of daySlots; let index = index; trackBy: itemIndex;\">\n                                         <th [attr.colspan]=\"timeSlots.length\" class=\"k-slot-cell\">\n                                             <span *ngIf=\"!dateHeaderTemplateRef\" class=\"k-link\" [ngClass]=\"{ 'k-nav-day': numberOfDays > 1 }\" [attr.data-dayslot-index]=\"index\">{{ daySlot.start | kendoDate: 'm'}}</span>\n                                             <ng-container *ngIf=\"dateHeaderTemplateRef\" [ngTemplateOutlet]=\"dateHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: daySlot.start }\"></ng-container>\n                                         </th>\n                                     </ng-container>\n                                 </ng-container>\n                             </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;\">\n                                    <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                        <ng-container *ngFor=\"let timeSlot of timeSlots; let index = index; trackBy: itemIndex;\">\n                                            <th *ngIf=\"timeSlot.isMajor\" [attr.colspan]=\"timeColspan(index)\" >{{ timeSlot.start | kendoDate: 't' }}</th>\n                                        </ng-container>\n                                    </ng-container>\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\" #times>\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <tr *ngIf=\"!verticalResources.length\">\n                            <th rowspan=\"1\" #titleCell>\n                                {{ allEventsMessage }}\n                            </th>\n                        </tr>\n                        <ng-container *ngIf=\"verticalResources.length\">\n                            <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;\">\n                                <tr #verticalResourceRows>\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                                            <div>\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                                            </div>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </ng-container>\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 horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                            class=\"k-current-time\" #currentTimeMarker>\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table\" #contentTable role=\"presentation\">\n                        <colgroup>\n                            <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                        </colgroup>\n                        <tr *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;\">\n                            <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;\">\n                                <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                    <td *ngFor=\"let slot of timeSlots; let index = index; 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.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }\">\n                                        </ng-container>\n                                    </td>\n                                </ng-container>\n                            </ng-container>\n                        </tr>\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                                [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                                dayTimeViewItem\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                            <div *ngIf=\"resizeHints && resizeHints.length\"\n                                kendoResizeHint\n                                [hint]=\"resizeHints[0]\"\n                                [ngClass]=\"resizeHints[0].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-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><th></th></tr>\n                        <tr><th class=\"k-slot-cell\"></th></tr>\n                        <tr *ngFor=\"let resource of horizontalResources; trackBy: itemIndex;\">\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                        <ng-container *ngIf=\"showCurrentTime\">\n                            <div *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                                #currentTimeArrow class=\"k-current-time k-current-time-arrow-down\">\n                            </div>\n                        </ng-container>\n                        <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                            <colgroup>\n                                <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                            </colgroup>\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\"\n                                        [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                                </th>\n                            </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\">\n                                     <ng-container *ngFor=\"let daySlot of daySlots; let index = index; trackBy: itemIndex;\">\n                                         <th [attr.colspan]=\"timeSlots.length\" class=\"k-slot-cell\">\n                                             <span *ngIf=\"!dateHeaderTemplateRef\" class=\"k-link\" [ngClass]=\"{ 'k-nav-day': numberOfDays > 1 }\" [attr.data-dayslot-index]=\"index\">{{ daySlot.start | kendoDate: 'm'}}</span>\n                                             <ng-container *ngIf=\"dateHeaderTemplateRef\" [ngTemplateOutlet]=\"dateHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: daySlot.start }\"></ng-container>\n                                         </th>\n                                     </ng-container>\n                                 </ng-container>\n                             </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;\">\n                                    <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                        <ng-container *ngFor=\"let timeSlot of timeSlots; let index = index; trackBy: itemIndex;\">\n                                            <th *ngIf=\"timeSlot.isMajor\" [attr.colspan]=\"timeColspan(index)\" >{{ timeSlot.start | kendoDate: 't' }}</th>\n                                        </ng-container>\n                                    </ng-container>\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\" #times>\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <tr *ngIf=\"!verticalResources.length\">\n                            <th rowspan=\"1\" #titleCell>\n                                {{ allEventsMessage }}\n                            </th>\n                        </tr>\n                        <ng-container *ngIf=\"verticalResources.length\">\n                            <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;\">\n                                <tr #verticalResourceRows>\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                                            <div>\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                                            </div>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </ng-container>\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 horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                            class=\"k-current-time\" #currentTimeMarker>\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table k-user-select-none\" #contentTable role=\"presentation\">\n                        <colgroup>\n                            <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                        </colgroup>\n                        <tr *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;\">\n                            <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;\">\n                                <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                    <td *ngFor=\"let slot of timeSlots; let index = index; 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                                            selectableSlot\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.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }\">\n                                        </ng-container>\n                                    </td>\n                                </ng-container>\n                            </ng-container>\n                        </tr>\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                                [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                                dayTimeViewItem\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                            <div *ngIf=\"resizeHints && resizeHints.length\"\n                                kendoResizeHint\n                                [hint]=\"resizeHints[0]\"\n                                [ngClass]=\"resizeHints[0].class\"\n                                [format]=\"resizeHintFormat\">\n                            </div>\n                        </ng-template>\n                    </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             ChangeDetectorRef,
@@ -11588,7 +11883,7 @@ var EditDialogComponent = /** @class */ (function () {
     EditDialogComponent = __decorate([
         Component({
             selector: 'kendo-scheduler-edit-dialog',
-            template: "\n        <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor(\"editorTitle\") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]=\"autoFocusedElement\">\n            <ng-container *ngIf='!editTemplate'>\n                <div class='k-scheduler-edit-form'>\n                    <div class='k-edit-form-container'>\n                        <form novalidate [formGroup]='formGroup'>\n                            <div class='k-edit-label'>\n                                <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <input #title id='k-event-title' class='k-textbox' placeholder='Title' [formControl]='formGroup.get(fields.title)' />\n                            </div>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"startDateTimePicker.focus()\">{{ textFor('editorEventStart') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='formGroup.get(fields.start)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isStartTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"startTzPicker.focus()\">{{ textFor('editorEventStartTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #startTzPicker [formControl]='formGroup.get(fields.startTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"endDateTimePicker.focus()\">{{ textFor('editorEventEnd') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='formGroup.get(fields.end)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isEndTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"endTzPicker.focus()\">{{ textFor('editorEventEndTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #endTzPicker [formControl]='formGroup.get(fields.endTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-field' *ngIf=\"hasAllDay\">\n                                <input type='checkbox' id='k-is-allday-chkbox' class='k-checkbox' [formControl]='formGroup.get(fields.isAllDay)' />\n                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>\n                            </div>\n\n                            <div class='k-edit-field' *ngIf=\"hasStartTimeZone\">\n                                <input type='checkbox' id='k-set-timezone' class='k-checkbox'\n                                formControlName='startTimezoneCheckbox' />\n                                <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>\n\n                                <ng-container *ngIf=\"isStartTimeZoneVisible && hasEndTimeZone\">\n                                    <input type='checkbox' id='k-use-separate' class='k-checkbox' formControlName='endTimezoneCheckbox' />\n                                    <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>\n                                </ng-container>\n                            </div>\n\n                            <ng-container *ngIf=\"isEditingSeries\">\n                                <kendo-recurrence-editor\n                                    [formControl]='formGroup.get(fields.recurrenceRule)'\n                                    [start]='recurrenceStart'\n                                    [timezone]='eventTimezone'\n                                    [weekStart]='weekStart'\n                                ></kendo-recurrence-editor>\n                            </ng-container>\n\n                            <ng-container *ngIf='getFormValue(fields.description)'>\n                                <div class='k-edit-label'>\n                                    <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>\n                                </div>\n                                <div class='k-edit-field'>\n                                    <textarea id='k-event-description' class='k-textbox' [formControl]='formGroup.get(fields.description)'></textarea>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngFor='let resource of resources'>\n                                <ng-container *ngIf='getFormValue(resource.field)'>\n                                    <div class='k-edit-label'>\n                                        <label (click)=\"onResourceClick(resource)\">\n                                            {{ resource.name ? resource.name : resource.field }}\n                                        </label>\n                                    </div>\n                                    <div class='k-edit-field'>\n                                        <kendo-multiple-resource-editor\n                                            *ngIf='resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-multiple-resource-editor>\n                                        <kendo-single-resource-editor\n                                            *ngIf='!resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-single-resource-editor>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n                        </form>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf='editTemplate'>\n                <form novalidate [formGroup]='formGroup'>\n                    <ng-container [ngTemplateOutlet]='editTemplate.templateRef'\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: formGroup,\n                            formGroup: formGroup,\n                            dataItem: editedEvent,\n                            editMode: editMode,\n                            isNew: isNew\n                        }\">\n                    </ng-container>\n                </form>\n            </ng-container>\n\n            <kendo-dialog-actions>\n                <button class=\"k-button\" (click)=\"onCancel($event)\">{{ textFor('cancel') }}</button>\n                <button class=\"k-button k-primary\" (click)=\"onSave($event)\" [disabled]=\"!formGroup.valid\">{{ textFor('save') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
+            template: "\n        <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor(\"editorTitle\") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]=\"autoFocusedElement\">\n            <ng-container *ngIf='!editTemplate'>\n                <div class='k-scheduler-edit-form'>\n                    <div class='k-edit-form-container'>\n                        <form novalidate [formGroup]='formGroup'>\n                            <div class='k-edit-label'>\n                                <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='formGroup.get(fields.title)' />\n                            </div>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"startDateTimePicker.focus()\">{{ textFor('editorEventStart') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='formGroup.get(fields.start)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isStartTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"startTzPicker.focus()\">{{ textFor('editorEventStartTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #startTzPicker [formControl]='formGroup.get(fields.startTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"endDateTimePicker.focus()\">{{ textFor('editorEventEnd') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='formGroup.get(fields.end)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isEndTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"endTzPicker.focus()\">{{ textFor('editorEventEndTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #endTzPicker [formControl]='formGroup.get(fields.endTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-field' *ngIf=\"hasAllDay\">\n                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='formGroup.get(fields.isAllDay)' />\n                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>\n                            </div>\n\n                            <div class='k-edit-field' *ngIf=\"hasStartTimeZone\">\n                                <input type='checkbox' id='k-set-timezone' kendoCheckBox\n                                formControlName='startTimezoneCheckbox' />\n                                <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>\n\n                                <ng-container *ngIf=\"isStartTimeZoneVisible && hasEndTimeZone\">\n                                    <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />\n                                    <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>\n                                </ng-container>\n                            </div>\n\n                            <ng-container *ngIf=\"isEditingSeries\">\n                                <kendo-recurrence-editor\n                                    [formControl]='formGroup.get(fields.recurrenceRule)'\n                                    [start]='recurrenceStart'\n                                    [timezone]='eventTimezone'\n                                    [weekStart]='weekStart'\n                                ></kendo-recurrence-editor>\n                            </ng-container>\n\n                            <ng-container *ngIf='getFormValue(fields.description)'>\n                                <div class='k-edit-label'>\n                                    <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>\n                                </div>\n                                <div class='k-edit-field'>\n                                    <textarea id='k-event-description' kendoTextArea [formControl]='formGroup.get(fields.description)'></textarea>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngFor='let resource of resources'>\n                                <ng-container *ngIf='getFormValue(resource.field)'>\n                                    <div class='k-edit-label'>\n                                        <label (click)=\"onResourceClick(resource)\">\n                                            {{ resource.name ? resource.name : resource.field }}\n                                        </label>\n                                    </div>\n                                    <div class='k-edit-field'>\n                                        <kendo-multiple-resource-editor\n                                            *ngIf='resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-multiple-resource-editor>\n                                        <kendo-single-resource-editor\n                                            *ngIf='!resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-single-resource-editor>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n                        </form>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf='editTemplate'>\n                <form novalidate [formGroup]='formGroup'>\n                    <ng-container [ngTemplateOutlet]='editTemplate.templateRef'\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: formGroup,\n                            formGroup: formGroup,\n                            dataItem: editedEvent,\n                            editMode: editMode,\n                            isNew: isNew\n                        }\">\n                    </ng-container>\n                </form>\n            </ng-container>\n\n            <kendo-dialog-actions>\n                <button kendoButton (click)=\"onCancel($event)\">{{ textFor('cancel') }}</button>\n                <button kendoButton themeColor=\"primary\" (click)=\"onSave($event)\" [disabled]=\"!formGroup.valid\">{{ textFor('save') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
         }),
         __metadata("design:paramtypes", [NgZone,
             EditService,
@@ -11664,7 +11959,8 @@ var SchedulerDateTimePickerComponent = /** @class */ (function () {
                 SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
             ],
             selector: 'kendo-scheduler-datetime-picker',
-            template: "\n    <kendo-datepicker\n        #datepicker\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-datepicker>\n    <kendo-timepicker *ngIf='!isAllDay'\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-timepicker>\n    "
+            template: "\n    <kendo-datepicker\n        #datepicker\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-datepicker>\n    <kendo-timepicker *ngIf='!isAllDay'\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-timepicker>\n    ",
+            styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "]
         })
     ], SchedulerDateTimePickerComponent);
     return SchedulerDateTimePickerComponent;
@@ -12205,6 +12501,7 @@ var EndRuleRadioButtonDirective = /** @class */ (function () {
         this.changeDetector = changeDetector;
         this.type = 'radio';
         this.radioClass = true;
+        this.radioSizeClass = true;
         this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
     }
     EndRuleRadioButtonDirective.prototype.ngOnInit = function () {
@@ -12245,6 +12542,10 @@ var EndRuleRadioButtonDirective = /** @class */ (function () {
         HostBinding('class.k-radio'),
         __metadata("design:type", Boolean)
     ], EndRuleRadioButtonDirective.prototype, "radioClass", void 0);
+    __decorate([
+        HostBinding('class.k-radio-md'),
+        __metadata("design:type", Boolean)
+    ], EndRuleRadioButtonDirective.prototype, "radioSizeClass", void 0);
     __decorate([
         Input("kendoRecurrenceEndRuleRadioButton"),
         __metadata("design:type", String)
@@ -12511,6 +12812,7 @@ var RepeatOnRadioButtonDirective = /** @class */ (function () {
         this.changeDetector = changeDetector;
         this.type = 'radio';
         this.radioClass = true;
+        this.radioSizeClass = true;
         this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
     }
     Object.defineProperty(RepeatOnRadioButtonDirective.prototype, "repeatOnRule", {
@@ -12560,6 +12862,10 @@ var RepeatOnRadioButtonDirective = /** @class */ (function () {
         HostBinding('class.k-radio'),
         __metadata("design:type", Boolean)
     ], RepeatOnRadioButtonDirective.prototype, "radioClass", void 0);
+    __decorate([
+        HostBinding('class.k-radio-md'),
+        __metadata("design:type", Boolean)
+    ], RepeatOnRadioButtonDirective.prototype, "radioSizeClass", void 0);
     __decorate([
         Input("kendoRecurrenceRepeatOnRadioButton"),
         __metadata("design:type", String),
@@ -12835,7 +13141,7 @@ var RecurrenceMonthlyYearlyEditorComponent = /** @class */ (function () {
     RecurrenceMonthlyYearlyEditorComponent = __decorate([
         Component({
             selector: 'kendo-recurrence-monthly-yearly-editor',
-            template: "\n        <div class='k-edit-label'>\n            <label (click)=\"onRepeatOnLabelClick()\">{{ textForRepeatOn() }}</label>\n        </div>\n        <div class='k-edit-field'>\n            <ul class='k-reset' [style.width.px]='650'>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />\n\n                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>\n                        <ng-template [ngIf]=\"currentFreq === 'monthly'\">\n                            {{ textFor('monthlyDay') }}\n                        </ng-template>\n                    </label>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthMonthDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'monthday')\"\n                            [disabled]=\"isDisabled('monthday')\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n\n                    <kendo-numerictextbox\n                        [style.width.px]='70'\n                        [min]=\"numericOptions.min\"\n                        [max]=\"numericOptions.max\"\n                        [decimals]=\"0\"\n                        [format]=\"numericOptions.format\"\n                        [autoCorrect]=\"numericOptions.autoCorrect\"\n                        [readonly]=\"numericOptions.readonly\"\n                        [selectOnFocus]=\"numericOptions.selectOnFocus\"\n                        [spinners]=\"numericOptions.spinners\"\n                        [step]=\"numericOptions.step\"\n                        [title]=\"numericOptions.title\"\n                        [value]='monthDay'\n                        (valueChange)='onMonthDayChange($event)'\n                        [disabled]=\"isDisabled('monthday')\">\n                    </kendo-numerictextbox>\n                </li>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />\n                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>\n\n                    <kendo-dropdownlist\n                        [data]='offsetPositions'\n                        textField='text'\n                        valueField='value'\n                        [value]='offset'\n                        [valuePrimitive]='true'\n                        (valueChange)='onOffsetPositionChange($event)'\n                        [disabled]=\"isDisabled('weekday')\">\n                    </kendo-dropdownlist>\n\n                    <kendo-dropdownlist\n                        [data]=\"extendedWeekDays\"\n                        textField='text'\n                        valueField='value'\n                        [value]='weekDay'\n                        [valuePrimitive]='true'\n                        (valueChange)='onWeekDayChange($event)'\n                        [disabled]=\"isDisabled('weekday')\">\n                    </kendo-dropdownlist>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <span>{{ textFor('yearlyOf') }}</span>\n\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthWeekDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'weekday')\"\n                            [disabled]=\"isDisabled('weekday')\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n                </li>\n            </ul>\n        </div>\n    "
+            template: "\n        <div class='k-edit-label'>\n            <label (click)=\"onRepeatOnLabelClick()\">{{ textForRepeatOn() }}</label>\n        </div>\n        <div class='k-edit-field'>\n            <ul class='k-reset' [style.width.px]='650'>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />\n\n                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>\n                        <ng-template [ngIf]=\"currentFreq === 'monthly'\">\n                            {{ textFor('monthlyDay') }}\n                        </ng-template>\n                    </label>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthMonthDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'monthday')\"\n                            [disabled]=\"isDisabled('monthday')\"\n                            [style.width.px]=\"170\"\n                            [style.margin]=\"'0 .4ex 0 1ex'\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n\n                    <kendo-numerictextbox\n                        [style.width.px]='70'\n                        [min]=\"numericOptions.min\"\n                        [max]=\"numericOptions.max\"\n                        [decimals]=\"0\"\n                        [format]=\"numericOptions.format\"\n                        [autoCorrect]=\"numericOptions.autoCorrect\"\n                        [readonly]=\"numericOptions.readonly\"\n                        [selectOnFocus]=\"numericOptions.selectOnFocus\"\n                        [spinners]=\"numericOptions.spinners\"\n                        [step]=\"numericOptions.step\"\n                        [title]=\"numericOptions.title\"\n                        [value]='monthDay'\n                        (valueChange)='onMonthDayChange($event)'\n                        [disabled]=\"isDisabled('monthday')\"\n                        [style.margin]=\"'0 .4ex 0 1ex'\">\n                    </kendo-numerictextbox>\n                </li>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />\n                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>\n\n                    <kendo-dropdownlist\n                        [data]='offsetPositions'\n                        textField='text'\n                        valueField='value'\n                        [value]='offset'\n                        [valuePrimitive]='true'\n                        (valueChange)='onOffsetPositionChange($event)'\n                        [disabled]=\"isDisabled('weekday')\"\n                        [style.width.px]=\"170\"\n                        [style.margin]=\"'0 .4ex 0 1ex'\">\n                    </kendo-dropdownlist>\n\n                    <kendo-dropdownlist\n                        [data]=\"extendedWeekDays\"\n                        textField='text'\n                        valueField='value'\n                        [value]='weekDay'\n                        [valuePrimitive]='true'\n                        (valueChange)='onWeekDayChange($event)'\n                        [disabled]=\"isDisabled('weekday')\"\n                        [style.width.px]=\"170\"\n                        [style.margin]=\"'0 .4ex 0 1ex'\">\n                    </kendo-dropdownlist>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <span>{{ textFor('yearlyOf') }}</span>\n\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthWeekDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'weekday')\"\n                            [disabled]=\"isDisabled('weekday')\"\n                            [style.width.px]=\"170\"\n                            [style.margin]=\"'0 .4ex 0 1ex'\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n                </li>\n            </ul>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [RecurrenceService,
             LocalizationService])
@@ -13362,6 +13668,112 @@ var ShortcutsDirective = /** @class */ (function () {
     return ShortcutsDirective;
 }());
 
+/**
+ * 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);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SlotSelectableDirective.prototype, "slotSelection", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SlotSelectableDirective.prototype, "slotSelectionChange", void 0);
+    SlotSelectableDirective = __decorate([
+        Directive({
+            selector: '[kendoSchedulerSlotSelectable]'
+        }),
+        __metadata("design:paramtypes", [SchedulerComponent,
+            ChangeDetectorRef])
+    ], SlotSelectableDirective);
+    return SlotSelectableDirective;
+}());
+
 var TEMPLATES = [
     AgendaDateTemplateDirective,
     AgendaTimeTemplateDirective,
@@ -13382,6 +13794,7 @@ var declarations = [
     DataBindingDirective,
     ShortcutsDirective,
     ReactiveEditingDirective,
+    SlotSelectableDirective,
     SchedulerDateTimePickerComponent,
     RecurrenceEditorComponent,
     RecurrenceEndRuleEditorComponent,
@@ -13411,6 +13824,8 @@ var publicDirectives$1 = [
 ].concat(declarations);
 var importedKendoModules = [
     ButtonsModule,
+    CheckBoxModule,
+    TextAreaModule,
     DateInputsModule,
     DialogModule,
     NumericTextBoxModule,
@@ -14049,4 +14464,4 @@ var PDFModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { DataBindingDirective, EditingDirectiveBase, ReactiveEditingDirective, SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR, SchedulerDateTimePickerComponent, DialogsService, EditDialogTemplateDirective, EditDialogComponent, EditService, LocalDataChangesService, EndRuleRadioButtonDirective, RecurrenceEditorCustomMessagesComponent, RecurrenceEditorLocalizedMessagesDirective, Messages$1 as Messages, RecurrenceLocalizationService, RECURRENCE_VALUE_ACCESSOR, RecurrenceEndRuleEditorComponent, RecurrenceFrequencyEditorComponent, RecurrenceIntervalEditorComponent, RecurrenceMonthlyYearlyEditorComponent, RecurrenceWeekdayRuleEditorComponent, RecurrenceService, RepeatOnRadioButtonDirective, ResourceEditorBase, MULTIPLE_RESOURCE_VALUE_ACCESSOR, MultipleResourceEditorComponent, SINGLE_RESOURCE_VALUE_ACCESSOR, SingleResourceEditorComponent, TIME_ZONE_VALUE_ACCESSOR, TimeZoneEditorComponent, CreateEvent, PreventableEvent$1 as PreventableEvent, LoadingComponent, SchedulerCustomMessagesComponent, LocalizedMessagesDirective, Messages as Messages$1, SchedulerLocalizationService, FocusService, ShortcutsDirective, ToolbarNavigationComponent, ToolbarTemplateDirective, ToolbarComponent, ToolbarModule, publicDirectives, ToolbarViewSelectorComponent, AgendaHeaderItemComponent, AgendaHeaderComponent, AgendaTaskItemComponent, AgendaViewInternalComponent, AgendaListComponent, AgendaViewModule, BaseView, ConfigurationViewBase, DomEventsService, HintContainerComponent, RepeatPipe, ResizeHintComponent, ResourceIteratorPipe, ViewFooterComponent, ViewsSharedModule, WorkHoursFooterDirective, DayTimeSlotService, DayTimeViewBase, DayTimeViewItemComponent, DayTimeViewComponent, DayTimeModule, DaySlotDirective, TimeSlotDirective, MonthSlotDirective, MonthSlotService, MonthViewItemComponent, MonthViewRendererComponent, MonthViewComponent, MonthViewModule, MultiDayViewBase, MultiDayViewRendererComponent, MultiDayViewComponent, MultiDayViewModule, WorkWeekViewComponent, SchedulerViewDirective, AgendaDateTemplateDirective, AgendaTimeTemplateDirective, AllDayEventTemplateDirective, AllDaySlotTemplateDirective, DateHeaderTemplateDirective, EventTemplateDirective, GroupHeaderTemplateDirective, MajorTimeHeaderTemplateDirective, MinorTimeHeaderTemplateDirective, MonthDaySlotTemplateDirective, TimeSlotTemplateDirective, TimelineBase, TimelineMonthViewComponent, TimelineMultiDayViewComponent, TimelineViewComponent, TimelineViewModule, TimelineWeekViewComponent, BaseSlotDirective, BaseSlotService, BaseViewItem, SchedulerComponent, SchedulerModule, ViewContextService, ViewStateService, ToolbarService, AgendaViewComponent, DayViewComponent, WeekViewComponent, RecurrenceEditorComponent, BaseEditService, PDFModule, PDFComponent, PDFService, PDFCommandDirective, PDFExportEvent, FocusableDirective, SharedModule, SchedulerView, DateChangeEvent, NavigateEvent, SlotClickEvent, EventClickEvent, EventKeydownEvent, VIEW_EVENT_MAP, CancelEvent, EditEventBase, RemoveEvent, SaveEvent, ResizeStartEvent, ResizeEvent, ResizeEndEvent, DragStartEvent, DragEvent, DragEndEvent, EditEvent, AddEvent };
+export { DataBindingDirective, EditingDirectiveBase, ReactiveEditingDirective, SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR, SchedulerDateTimePickerComponent, DialogsService, EditDialogTemplateDirective, EditDialogComponent, EditService, LocalDataChangesService, EndRuleRadioButtonDirective, RecurrenceEditorCustomMessagesComponent, RecurrenceEditorLocalizedMessagesDirective, Messages$1 as Messages, RecurrenceLocalizationService, RECURRENCE_VALUE_ACCESSOR, RecurrenceEndRuleEditorComponent, RecurrenceFrequencyEditorComponent, RecurrenceIntervalEditorComponent, RecurrenceMonthlyYearlyEditorComponent, RecurrenceWeekdayRuleEditorComponent, RecurrenceService, RepeatOnRadioButtonDirective, ResourceEditorBase, MULTIPLE_RESOURCE_VALUE_ACCESSOR, MultipleResourceEditorComponent, SINGLE_RESOURCE_VALUE_ACCESSOR, SingleResourceEditorComponent, TIME_ZONE_VALUE_ACCESSOR, TimeZoneEditorComponent, CreateEvent, PreventableEvent$1 as PreventableEvent, LoadingComponent, SchedulerCustomMessagesComponent, LocalizedMessagesDirective, Messages as Messages$1, SchedulerLocalizationService, FocusService, ShortcutsDirective, ToolbarNavigationComponent, ToolbarTemplateDirective, ToolbarComponent, ToolbarModule, publicDirectives, ToolbarViewSelectorComponent, AgendaHeaderItemComponent, AgendaHeaderComponent, AgendaTaskItemComponent, AgendaViewInternalComponent, AgendaListComponent, AgendaViewModule, BaseView, ConfigurationViewBase, DomEventsService, HintContainerComponent, RepeatPipe, ResizeHintComponent, ResourceIteratorPipe, SlotSelectableDirective, ViewFooterComponent, ViewsSharedModule, WorkHoursFooterDirective, DayTimeSlotService, DayTimeViewBase, DayTimeViewItemComponent, DayTimeViewComponent, DayTimeModule, DaySlotDirective, TimeSlotDirective, MonthSlotDirective, MonthSlotService, MonthViewItemComponent, MonthViewRendererComponent, MonthViewComponent, MonthViewModule, MultiDayViewBase, MultiDayViewRendererComponent, MultiDayViewComponent, MultiDayViewModule, WorkWeekViewComponent, SchedulerViewDirective, AgendaDateTemplateDirective, AgendaTimeTemplateDirective, AllDayEventTemplateDirective, AllDaySlotTemplateDirective, DateHeaderTemplateDirective, EventTemplateDirective, GroupHeaderTemplateDirective, MajorTimeHeaderTemplateDirective, MinorTimeHeaderTemplateDirective, MonthDaySlotTemplateDirective, TimeSlotTemplateDirective, TimelineBase, TimelineMonthViewComponent, TimelineMultiDayViewComponent, TimelineViewComponent, TimelineViewModule, TimelineWeekViewComponent, BaseSlotDirective, BaseSlotService, BaseViewItem, SchedulerComponent, SchedulerModule, ViewContextService, ViewStateService, ToolbarService, AgendaViewComponent, DayViewComponent, WeekViewComponent, RecurrenceEditorComponent, BaseEditService, PDFModule, PDFComponent, PDFService, PDFCommandDirective, PDFExportEvent, FocusableDirective, SharedModule, IsSlotSelectedArgs, SchedulerView, DateChangeEvent, NavigateEvent, SlotClickEvent, EventClickEvent, EventKeydownEvent, VIEW_EVENT_MAP, CancelEvent, EditEventBase, RemoveEvent, SaveEvent, ResizeStartEvent, ResizeEvent, ResizeEndEvent, DragStartEvent, DragEvent, DragEndEvent, EditEvent, AddEvent, SlotDragStartEvent, SlotDragEvent, SlotDragEndEvent };