@progress/kendo-angular-scheduler 2.1.6-dev.202111010913 → 2.2.0-dev.202112171600

package/dist/fesm2015/index.js

@@ -6,14 +6,14 @@ import { __decorate, __param, __metadata } from 'tslib';
 import { Directive, Optional, TemplateRef, Injectable, EventEmitter, NgZone, 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 { FormControl, FormGroup, 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';
@@ -32,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635757791,
+    publishDate: 1639756470,
     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'
 };
@@ -316,6 +316,40 @@ class AddEvent extends PreventableEvent$1 {
     }
 }
 
+/**
+ * Arguments for the `slotDragStart` event.
+ * The event is preventable and if prevented, subsequent `slotDrag`, `slotDragEnd`, and `slotSelectionChange` will not be fired.
+ */
+class SlotDragStartEvent extends PreventableEvent$1 {
+    /**
+     * @hidden
+     */
+    constructor(sender, args) {
+        super();
+        this.sender = sender;
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the `slotDrag` event.
+ */
+class SlotDragEvent {
+    /**
+     * @hidden
+     */
+    constructor(sender, args) {
+        this.sender = sender;
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the `slotDragEnd` event.
+ */
+class SlotDragEndEvent extends SlotDragEvent {
+}
+
 /**
  * Represents the toolbar template of the Scheduler. To define a toolbar
  * template, nest an `<ng-template kendoSchedulerToolbarTemplate>` tag
@@ -387,6 +421,22 @@ ToolbarService = __decorate([
 class SchedulerView {
 }
 
+/**
+ * The arguments for the [`isSlotSelected`]({% slug api_scheduler_schedulercomponent %}#toc-isslotselected) callback.
+ */
+class 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`
@@ -803,12 +853,18 @@ let ViewStateService = class ViewStateService {
         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
@@ -852,6 +908,18 @@ let ViewStateService = class ViewStateService {
             args: args
         });
     }
+    /** @hidden */
+    notifySlotSelectionStart(selection) {
+        this.slotSelectionStartSource.next(selection);
+    }
+    /** @hidden */
+    notifySlotSelectionDrag(selection) {
+        this.slotSelectionStartDragSource.next(selection);
+    }
+    /** @hidden */
+    notifySlotSelectionEnd(selection) {
+        this.slotSelectionStartEndSource.next(selection);
+    }
 };
 ViewStateService = __decorate([
     Injectable(),
@@ -1747,845 +1815,1208 @@ function rtlScrollPosition(element, position) {
     return result;
 }
 
-const todayDate = () => getDate(new Date());
-const DAYS_IN_WEEK = 7;
+/** @hidden */
+const intersects = (startTime, endTime, periodStart, periodEnd) => (startTime < periodStart && endTime > periodEnd) ||
+    (periodStart <= startTime && startTime < periodEnd) ||
+    (periodStart < endTime && endTime <= periodEnd && startTime < endTime);
+/** @hidden */
+const dateInRange = (date, start, end) => start.getTime() <= date.getTime() && date.getTime() <= end.getTime();
+/** @hidden */
+const roundAllDayEnd = ({ start, end }) => {
+    const startDate = start.stripTime();
+    const 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
  */
-let SchedulerComponent = class SchedulerComponent {
-    constructor(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;
-    }
-    get dir() {
-        return this.direction;
-    }
-    /**
-     * 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 selectedViewIndex(index) {
-        this.viewIndex = index;
-        this.onViewIndexChange();
-    }
-    get selectedViewIndex() {
-        return this.viewIndex;
+const addUTCDays = (date, offset) => {
+    const 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) {
+    let start;
+    let end;
+    if (currentSlot.end <= selectionOrigin.end) {
+        end = selectionOrigin.end;
+        start = currentSlot.start;
     }
-    /**
-     * The first day of the week. Applicable to **Week**, **Month** and **TimelineWeek** views.
-     * Defaults to the locale settings.
-     */
-    set weekStart(value) {
-        this._weekStart = value;
+    else {
+        start = selectionOrigin.start;
+        end = currentSlot.end;
     }
-    get weekStart() {
-        if (isPresent(this._weekStart)) {
-            return this._weekStart;
+    return { start, end };
+}
+function getDataIdx(value, resource) {
+    const data = resource.data;
+    for (let dataIdx = 0; dataIdx < data.length; dataIdx++) {
+        if (getField(data[dataIdx], resource.valueField) === value) {
+            return dataIdx;
         }
-        return this.intlService.firstDay();
-    }
-    /**
-     * Specifies the id of the timezone that will be displayed in the Scheduler.
-     * For example, `Europe/Sofia`.
-     * Defaults to `Etc/UTC`.
-     */
-    set timezone(value) {
-        this._timezone = value;
-        this.events = this.events || [];
-    }
-    get timezone() {
-        return this._timezone;
     }
-    /**
-     * An array of event instances which will be shown by the Scheduler.
-     */
-    set events(value) {
-        this._events = value;
-        this.processEvents(value);
+    return -1;
+}
+function resourceItem(value, resource) {
+    const index = getDataIdx(value, resource);
+    return index >= 0 ? resource.data[index] : {};
+}
+function resourceItems(values, resource) {
+    return values.map(value => resourceItem(value, resource));
+}
+function cloneResources(arr) {
+    const result = [];
+    for (let idx = 0; idx < arr.length; idx++) {
+        const clone$$1 = Object.assign({}, arr[idx]);
+        clone$$1.resources = clone$$1.resources.slice(0);
+        result.push(clone$$1);
     }
-    get events() {
-        return this._events;
+    return result;
+}
+/** @hidden */
+function resourceItemByValue(event, resource) {
+    const value = getField(event, resource.field);
+    if (Array.isArray(value)) {
+        return resourceItems(value, resource);
     }
-    /**
-     * The currently selected date of the Scheduler.
-     * Determines the period which is displayed.
-     */
-    set selectedDate(value) {
-        if (!value) {
-            return;
+    return resourceItem(value, resource);
+}
+function addNotGroupedResources(event, resources, allResources) {
+    for (let resourceIdx = 0; resourceIdx < resources.length; resourceIdx++) {
+        const current = resources[resourceIdx];
+        for (let idx = 0; idx < allResources.length; idx++) {
+            const item = allResources[idx];
+            if (!current.resources[idx] && item.data) {
+                current.resources[idx] = resourceItemByValue(event, item);
+            }
         }
-        this._selectedDate = value;
-        this.viewContext.notifySelectedDate(value);
-    }
-    get selectedDate() {
-        return this._selectedDate;
-    }
-    /**
-     * The names of the model fields from which the Scheduler will read its data
-     * ([see example]({% slug databinding_scheduler %}#toc-binding-to-models)).
-     */
-    set modelFields(value) {
-        this._modelFields = Object.assign({}, defaultModelFields, value);
     }
-    get modelFields() {
-        return this._modelFields;
-    }
-    ngOnInit() {
-        if (!this.selectedDate) {
-            this.selectedDate = todayDate();
+}
+/** @hidden */
+function eventResources(event, { taskResources, hasGroups, spans, allResources = [] }) {
+    let resources = [];
+    for (let resourceIdx = 0; resourceIdx < taskResources.length; resourceIdx++) {
+        const resource = taskResources[resourceIdx];
+        if (!resource.data) {
+            resources = [{ leafIdx: 0, resources: [] }];
+            continue;
         }
-    }
-    ngAfterContentInit() {
-        if (isDevMode() && this.views.length === 0) {
-            throw new Error('No views declared for <kendo-scheduler>. Please, declare at least one view.');
+        const resourceIndex = allResources.indexOf(resource);
+        let values = getField(event, resource.field);
+        if (!Array.isArray(values)) {
+            values = [values];
         }
-        this.subs = this.views.changes.subscribe(() => this.resetViewIndex());
-        this.subs.add(this.intlService.changes.subscribe(this.intlChange.bind(this)));
-        this.subs.add(this.viewState.nextDate.subscribe(nextDate => {
-            this.selectedDate = nextDate;
-        }));
-        this.subs.add(this.viewState.dateRange.subscribe(dateRange => {
-            const isEmpty = dateRange.start.getTime() === 0;
-            if (!isEmpty) {
-                const args = new DateChangeEvent(this, this.selectedDate, dateRange);
-                this.dateChange.emit(args);
-            }
-        }));
-        this.subs.add(this.viewState.navigate.subscribe(({ viewName, date }) => {
-            const views = this.views.toArray();
-            const view = views.find(v => v.name === viewName);
-            const args = new NavigateEvent(this, {
-                type: 'show-date',
-                view: view || {
-                    name: viewName,
-                    title: viewName
-                },
-                date: date
-            });
-            this.navigate.next(args);
-            if (view && !args.isDefaultPrevented()) {
-                const index = views.indexOf(view);
-                this.selectedView = view;
-                this.setViewIndex(index);
-                this.selectedDate = date;
+        const expandedResources = [];
+        for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
+            const dataIdx = getDataIdx(values[valueIdx], resource);
+            if (dataIdx < 0) {
+                return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
             }
-        }));
-        this.subs.add(this.viewState.viewEvent.subscribe(({ name, args }) => {
-            const emitter = this[name];
-            const confirmedEmitter = this[`${name}Confirmed`];
-            if (hasObservers(emitter) || (confirmedEmitter && hasObservers(confirmedEmitter))) {
-                this.zone.run(() => {
-                    const eventInstance = new VIEW_EVENT_MAP[name](this, args);
-                    emitter.emit(eventInstance);
-                    args.prevented = eventInstance.prevented;
-                    if (confirmedEmitter && !args.prevented) {
-                        confirmedEmitter.emit(eventInstance);
-                    }
+            const item = resource.data[dataIdx];
+            // has groups - need all copies of the multiple resource
+            // no groups - just the first
+            if (resourceIdx === 0 && (hasGroups || valueIdx === 0)) {
+                const resourceItems = [];
+                resourceItems[resourceIndex] = resource.multiple && !hasGroups ? [item] : item;
+                resources.push({
+                    leafIdx: hasGroups ? dataIdx * spans[resourceIdx] : 0,
+                    color: getField(item, resource.colorField),
+                    resources: resourceItems
                 });
             }
-        }));
-        this.subs.add(this.viewState.layoutEnd.subscribe(() => {
-            if (this.resizeSensor) {
-                this.resizeSensor.acceptSize();
+            else if (hasGroups) { // don't create multiple resource groups if no groups for multiple resources
+                let currentResources = resources;
+                if (values.length > 1) {
+                    currentResources = cloneResources(resources);
+                    expandedResources.push.apply(expandedResources, currentResources);
+                }
+                for (let 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(() => {
-            this.changeDetector.markForCheck();
-        }));
-        //this.editService.timezone = this.timezone;
-        this.attachEditHandlers();
-        this.dialogsService.container = this.confirmationDialogContainerRef;
-        this.notifyOptionsChange();
-        this.subs.add(this.pdfService.exportClick.subscribe(() => {
-            const args = new PDFExportEvent();
-            this.pdfExport.emit(args);
-            if (!args.isDefaultPrevented()) {
-                this.saveAsPDF();
+            else if (valueIdx > 0) {
+                for (let idx = 0; idx < resources.length; idx++) {
+                    resources[idx].resources[resourceIndex].push(item);
+                }
             }
-        }));
-        this.subs.add(this.pdfService.done.subscribe(() => {
-            this.loadingComponent.toggle(false);
-        }));
-        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-        this.subs.add(this.viewState.optionsChange.subscribe(() => {
-            this.changeDetector.markForCheck();
-        }));
-        this.attachElementEventHandlers();
-    }
-    ngOnChanges(changes) {
-        if (isChanged('resources', changes) && !isChanged('events', changes) && this.viewItems) {
-            this.viewItems.forEach(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);
+        if (expandedResources.length) {
+            resources = expandedResources;
         }
     }
-    ngOnDestroy() {
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
-        if (this.detachElementEventHandlers) {
-            this.detachElementEventHandlers();
-        }
+    addNotGroupedResources(event, resources, allResources);
+    return resources;
+}
+/** @hidden */
+function assignTasksResources(tasks, options) {
+    for (let idx = 0; idx < tasks.length; idx++) {
+        const task = tasks[idx];
+        task.resources = eventResources(task.event, options);
     }
-    /**
-     * @hidden
-     */
-    onResize(_event) {
-        this.viewContext.notifyResize();
+}
+/**
+ * @hidden
+ */
+function areValidResources(resources) {
+    return Array.isArray(resources) && resources.length > 0 && resources[0] !== undefined;
+}
+/**
+ * @hidden
+ */
+function resourcesMatch(res1, res2, strict) {
+    if (res1.length !== res2.length) {
+        return false;
     }
-    /**
-     * @hidden
-     */
-    onNavigationAction(action) {
-        const args = new NavigateEvent(this, action);
-        this.navigate.next(args);
-        if (args.isDefaultPrevented()) {
-            return true;
-        }
-        if (action.type === 'view-change') {
-            const views = this.views.toArray();
-            const 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 (action.type === 'today') {
-            const date = new Date();
-            if (this.isInRange(date)) {
-                this.selectedDate = date;
-            }
-        }
-        else {
-            this.viewContext.notifyAction(action);
-        }
+    if (!strict && !areValidResources(res1) || !areValidResources(res2)) {
+        return true;
     }
-    /**
-     * 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.
-     */
-    addEvent(group) {
-        const isFormGroup = group instanceof FormGroup;
-        if (!isFormGroup) {
-            const createControl = (source) => (acc, key) => {
-                acc[key] = new FormControl(source[key]);
-                return acc;
-            };
-            const fields = Object.keys(group).reduce(createControl(group), {});
-            group = new FormGroup(fields);
+    return res1.every(r1 => res2.some(r2 => 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, true));
+}
+/** @hidden */
+function findRowIndex(events, data) {
+    if (data.rowIndex !== undefined) {
+        return data.rowIndex;
+    }
+    for (let idx = 0; idx < events.length; idx++) {
+        if (!events[idx]) {
+            return idx;
         }
-        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`.
-     *
-     */
-    editEvent(dataItem, options = {}) {
-        const { group, mode } = options;
-        this.editService.editEvent(dataItem, group, mode);
+    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 */
+const rectContains = (rect, left, top) => rect.left <= left && left <= rect.left + rect.width && rect.top <= top && top <= rect.top + rect.height;
+/** @hidden */
+const rectContainsX = (rect, left) => rect.left <= left && left <= rect.left + rect.width;
+/** @hidden */
+const toPx = value => `${value}px`;
+/** @hidden */
+const elementOffset = (element) => {
+    if (!element) {
+        return null;
     }
-    /**
-     * Closes the event editor, if open.
-     */
-    closeEvent() {
-        this.editService.close();
+    const box = element.getBoundingClientRect();
+    const 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 */
+const pointDistance = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
+/** @hidden */
+const ignoreContentChild = child => child.nodeName === 'KENDO-RESIZE-SENSOR' || hasClasses(child, 'k-loading-mask');
+/** @hidden */
+const setCoordinates = (element, coordinates) => {
+    for (let field in coordinates) {
+        if (coordinates.hasOwnProperty(field)) {
+            element.style[field] = toPx(coordinates[field]);
+        }
     }
-    /**
-     * Returns a flag which indicates if an event is currently edited.
-     *
-     * @return {boolean} - A flag which indicates if an event is currently edited.
-     */
-    isEditing() {
-        return this.editService.isEditing();
+};
+/** @hidden */
+const convertNgClassBindings = (bindingValues) => {
+    const result = [];
+    if (isString(bindingValues)) {
+        result.push(bindingValues);
     }
-    /**
-     * 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>}
-     */
-    openRecurringConfirmationDialog(operation) {
-        return this.dialogsService.openRecurringConfirmationDialog(operation);
+    else if (isArray(bindingValues)) {
+        result.push.apply(result, bindingValues);
     }
-    /**
-     * Opens the built-in removal confirmation dialog.
-     *
-     * @return {Observable<boolean>}
-     */
-    openRemoveConfirmationDialog() {
-        return this.dialogsService.openRemoveConfirmationDialog();
+    else if (isObject(bindingValues)) {
+        for (let field in bindingValues) {
+            if (bindingValues.hasOwnProperty(field) && bindingValues[field]) {
+                result.push(field);
+            }
+        }
     }
-    /**
-     * Saves the current view as PDF.
-     */
-    saveAsPDF() {
-        this.loadingComponent.toggle(true);
-        this.zone.runOutsideAngular(() => {
-            // 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(() => {
-                this.pdfService.save();
-            }, 0);
-        });
+    return result;
+};
+/**
+ * @hidden
+ */
+function formatEventTime(start, end, isAllDay, localeId) {
+    const startTimeFormat = { skeleton: 'yMMMMEEEEdhm' };
+    const startDateFormat = { skeleton: 'yMMMMEEEEd' };
+    const endFormat = isEqualDate(start, end) ? 't' : startTimeFormat;
+    return isAllDay ?
+        `${formatDate(start, startDateFormat, localeId)}` :
+        `${formatDate(start, startTimeFormat, localeId)}–${formatDate(end, endFormat, localeId)}`;
+}
+/**
+ * @hidden
+ */
+function formValueOrDefault(group, field, defaultValue) {
+    const control = group.get(field);
+    if (!control) {
+        return defaultValue;
     }
-    /**
-     * Scrolls the view to the specified time.
-     */
-    scrollToTime(time) {
-        this.viewContext.notifyAction({
-            type: 'scroll-time',
-            time: time
-        });
+    return control.value || defaultValue;
+}
+/**
+ * @hidden
+ */
+const isWorkWeekDay = (day, start, end) => {
+    if (end < start) {
+        return day <= end || start <= day;
     }
-    /**
-     * 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 %}
-     */
-    slotByPosition(x, y) {
-        return this.viewContext.executeMethod('slotByPosition', { x, y });
+    return start <= day && day <= end;
+};
+/**
+ * @hidden
+ */
+const alwaysFalse = () => false;
+
+const todayDate = () => getDate(new Date());
+const 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 {}
+ * ```
+ */
+let SchedulerComponent = class SchedulerComponent {
+    constructor(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;
+        /**
+         * 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;
+    }
+    get dir() {
+        return this.direction;
     }
     /**
-     * Returns the event associated with the specified DOM element, if any.
+     * The index of the currently selected view.
      *
-     * @param element - The DOM element document position.
-     * @return the event instance, if found.
+     * By default, the selected view index is `0` and
+     * indicates that the first declared view is visible.
      */
-    eventFromElement(element) {
-        return this.viewContext.executeMethod('eventFromElement', { element });
+    set selectedViewIndex(index) {
+        this.viewIndex = index;
+        this.onViewIndexChange();
+    }
+    get selectedViewIndex() {
+        return this.viewIndex;
     }
     /**
-     * Gets the currently active event, if any.
-     * The active event is the event that can currently receive focus.
+     * The first day of the week. Applicable to **Week**, **Month** and **TimelineWeek** views.
+     * Defaults to the locale settings.
      */
-    get activeEvent() {
-        const activeElement = this.focusService.activeElement;
-        if (activeElement) {
-            return this.eventFromElement(activeElement.nativeElement);
+    set weekStart(value) {
+        this._weekStart = value;
+    }
+    get weekStart() {
+        if (isPresent(this._weekStart)) {
+            return this._weekStart;
         }
+        return this.intlService.firstDay();
     }
     /**
-     * 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`.
+     * Specifies the id of the timezone that will be displayed in the Scheduler.
+     * For example, `Europe/Sofia`.
+     * Defaults to `Etc/UTC`.
      */
-    focusNext(position) {
-        return this.focusService.focusNext(position);
+    set timezone(value) {
+        this._timezone = value;
+        this.events = this.events || [];
+    }
+    get timezone() {
+        return this._timezone;
     }
     /**
-     * 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`.
+     * An array of event instances which will be shown by the Scheduler.
      */
-    focusPrev(position) {
-        const prevPosition = Object.assign({ offset: -1 }, position);
-        return this.focusService.focusNext(prevPosition);
+    set events(value) {
+        this._events = value;
+        this.processEvents(value);
+    }
+    get events() {
+        return this._events;
     }
     /**
-     * Focuses the last focused event or the Scheduler element, if no events are available.
+     * The currently selected date of the Scheduler.
+     * Determines the period which is displayed.
      */
-    focus() {
-        return this.focusService.focus();
+    set selectedDate(value) {
+        if (!value) {
+            return;
+        }
+        this._selectedDate = value;
+        this.viewContext.notifySelectedDate(value);
     }
-    isInRange(date) {
-        return (!this.min || this.min <= date) && (!this.max || date <= this.max);
+    get selectedDate() {
+        return this._selectedDate;
     }
-    notifyOptionsChange(changes) {
-        const 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
-        });
+    /**
+     * The names of the model fields from which the Scheduler will read its data
+     * ([see example]({% slug databinding_scheduler %}#toc-binding-to-models)).
+     */
+    set modelFields(value) {
+        this._modelFields = Object.assign({}, defaultModelFields, value);
     }
-    get workWeek() {
-        let { start, end } = this.intlService.weekendRange();
-        const workWeekStart = isPresent(this.workWeekStart) ? this.workWeekStart : (end + 1) % DAYS_IN_WEEK;
-        const weekEnd = start > 0 ? start - 1 : Day.Saturday;
-        const workWeekEnd = isPresent(this.workWeekEnd) ? this.workWeekEnd : weekEnd;
-        return { start: workWeekStart, end: workWeekEnd };
+    get modelFields() {
+        return this._modelFields;
     }
-    resetViewIndex() {
-        const index = this.selectedViewIndex;
-        const newIndex = Math.max(0, Math.min(index, this.views.length - 1));
-        this.setViewIndex(newIndex);
+    ngOnInit() {
+        if (!this.selectedDate) {
+            this.selectedDate = todayDate();
+        }
+    }
+    ngAfterContentInit() {
+        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(() => this.resetViewIndex());
+        this.subs.add(this.intlService.changes.subscribe(this.intlChange.bind(this)));
+        this.subs.add(this.viewState.nextDate.subscribe(nextDate => {
+            this.selectedDate = nextDate;
+        }));
+        this.subs.add(this.viewState.dateRange.subscribe(dateRange => {
+            const isEmpty = dateRange.start.getTime() === 0;
+            if (!isEmpty) {
+                const args = new DateChangeEvent(this, this.selectedDate, dateRange);
+                this.dateChange.emit(args);
+            }
+        }));
+        this.subs.add(this.viewState.navigate.subscribe(({ viewName, date }) => {
+            const views = this.views.toArray();
+            const view = views.find(v => v.name === viewName);
+            const args = new NavigateEvent(this, {
+                type: 'show-date',
+                view: view || {
+                    name: viewName,
+                    title: viewName
+                },
+                date: date
+            });
+            this.navigate.next(args);
+            if (view && !args.isDefaultPrevented()) {
+                const index = views.indexOf(view);
+                this.selectedView = view;
+                this.setViewIndex(index);
+                this.selectedDate = date;
+            }
+        }));
+        this.subs.add(this.viewState.viewEvent.subscribe(({ name, args }) => {
+            const emitter = this[name];
+            const confirmedEmitter = this[`${name}Confirmed`];
+            if (hasObservers(emitter) || (confirmedEmitter && hasObservers(confirmedEmitter))) {
+                this.zone.run(() => {
+                    const 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(() => {
+            if (this.resizeSensor) {
+                this.resizeSensor.acceptSize();
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionStart
+            .subscribe((e) => {
+            if (hasObservers(this.slotDragStart)) {
+                this.zone.run(() => {
+                    this.slotDragStart.emit(Object.assign(e, { sender: this }));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionDrag
+            .subscribe((value) => {
+            if (hasObservers(this.slotDrag)) {
+                this.zone.run(() => {
+                    this.slotDrag.emit(new SlotDragEvent(this, value));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionEnd
+            .subscribe((value) => {
+            if (hasObservers(this.slotDragEnd)) {
+                this.zone.run(() => {
+                    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(() => {
+            this.changeDetector.markForCheck();
+        }));
+        //this.editService.timezone = this.timezone;
+        this.attachEditHandlers();
+        this.dialogsService.container = this.confirmationDialogContainerRef;
+        this.notifyOptionsChange();
+        this.subs.add(this.pdfService.exportClick.subscribe(() => {
+            const args = new PDFExportEvent();
+            this.pdfExport.emit(args);
+            if (!args.isDefaultPrevented()) {
+                this.saveAsPDF();
+            }
+        }));
+        this.subs.add(this.pdfService.done.subscribe(() => {
+            this.loadingComponent.toggle(false);
+        }));
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+        this.subs.add(this.viewState.optionsChange.subscribe(() => {
+            this.changeDetector.markForCheck();
+        }));
+        this.attachElementEventHandlers();
     }
-    onViewIndexChange() {
-        if (!this.views) {
-            return;
+    ngOnChanges(changes) {
+        if (isChanged('resources', changes) && !isChanged('events', changes) && this.viewItems) {
+            this.viewItems.forEach(item => {
+                copyResources(item.event, this.resources);
+            });
         }
-        const views = this.views.toArray();
-        const selectedView = views[this.viewIndex];
-        if (selectedView) {
-            this.selectedView = selectedView;
+        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);
         }
     }
-    setViewIndex(newIndex) {
-        const changed = this.selectedViewIndex !== newIndex;
-        if (changed) {
-            this.selectedViewIndex = newIndex;
-            this.selectedViewIndexChange.emit(newIndex);
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+        if (this.detachElementEventHandlers) {
+            this.detachElementEventHandlers();
         }
-        return changed;
     }
-    processEvents(dataItems) {
-        const timezone = this.timezone;
-        const fields = this.modelFields;
-        const items = dataItems
-            .map(dataItem => readEvent(dataItem, fields, this.resources))
-            .filter(event => !isRecurrenceMaster(event))
-            .map(event => {
-            const start = ZonedDate.fromLocalDate(event.start, timezone);
-            const end = ZonedDate.fromLocalDate(event.end, timezone);
-            return { start, end, event };
-        });
-        this.viewItems = items;
-        this.viewContext.notifyItems(items);
+    /**
+     * @hidden
+     */
+    onResize(_event) {
+        this.viewContext.notifyResize();
     }
-    attachEditHandlers() {
-        if (!this.editService) {
-            return;
+    /**
+     * @hidden
+     */
+    onNavigationAction(action) {
+        const args = new NavigateEvent(this, action);
+        this.navigate.next(args);
+        if (args.isDefaultPrevented()) {
+            return true;
         }
-        this.subs.add(this.editService.changes.subscribe(this.emitCRUDEvent.bind(this)));
-    }
-    emitCRUDEvent(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;
+        if (action.type === 'view-change') {
+            const views = this.views.toArray();
+            const index = views.indexOf(action.view);
+            this.selectedView = action.view;
+            this.setViewIndex(index);
         }
-    }
-    intlChange() {
-        const currentView = this.selectedView;
-        this.selectedView = null;
-        if (!isPresent(this.workWeekStart) || !isPresent(this.workWeekEnd)) {
-            this.notifyOptionsChange();
+        else if (action.type === 'select-date') {
+            if (this.isInRange(action.date)) {
+                this.selectedDate = action.date;
+            }
         }
-        this.changeDetector.detectChanges();
-        this.selectedView = currentView;
-        if (NgZone.isInAngularZone()) {
-            this.changeDetector.markForCheck();
+        else if (action.type === 'today') {
+            const date = new Date();
+            if (this.isInRange(date)) {
+                this.selectedDate = date;
+            }
         }
         else {
-            this.changeDetector.detectChanges();
+            this.viewContext.notifyAction(action);
         }
     }
-    attachElementEventHandlers() {
-        if (!isDocumentAvailable()) {
-            return;
+    /**
+     * 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.
+     */
+    addEvent(group) {
+        const isFormGroup = group instanceof FormGroup;
+        if (!isFormGroup) {
+            const createControl = (source) => (acc, key) => {
+                acc[key] = new FormControl(source[key]);
+                return acc;
+            };
+            const fields = Object.keys(group).reduce(createControl(group), {});
+            group = new FormGroup(fields);
         }
-        const wrapper = this.wrapper.nativeElement;
+        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`.
+     *
+     */
+    editEvent(dataItem, options = {}) {
+        const { group, mode } = options;
+        this.editService.editEvent(dataItem, group, mode);
+    }
+    /**
+     * Closes the event editor, if open.
+     */
+    closeEvent() {
+        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.
+     */
+    isEditing() {
+        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>}
+     */
+    openRecurringConfirmationDialog(operation) {
+        return this.dialogsService.openRecurringConfirmationDialog(operation);
+    }
+    /**
+     * Opens the built-in removal confirmation dialog.
+     *
+     * @return {Observable<boolean>}
+     */
+    openRemoveConfirmationDialog() {
+        return this.dialogsService.openRemoveConfirmationDialog();
+    }
+    /**
+     * Saves the current view as PDF.
+     */
+    saveAsPDF() {
+        this.loadingComponent.toggle(true);
         this.zone.runOutsideAngular(() => {
-            const windowBlurSubscription = this.renderer.listen('window', 'blur', (args) => {
-                this.domEvents.windowBlur.emit(args);
-            });
-            const clickSubscription = this.renderer.listen(wrapper, 'click', (args) => {
-                this.domEvents.click.emit(args);
-            });
-            const keydownSubscription = this.renderer.listen(wrapper, 'keydown', args => {
-                this.domEvents.keydown.emit(args);
-            });
-            let focused = false;
-            const focusInSubscription = this.renderer.listen(wrapper, 'focusin', (args) => {
-                this.domEvents.focus.emit(args);
-                if (!focused) {
-                    this.domEvents.focusIn.emit(args);
-                    this.renderer.addClass(this.wrapper.nativeElement, 'k-state-focused');
-                    focused = true;
-                }
-            });
-            const focusOutSubscription = this.renderer.listen(wrapper, 'focusout', (args) => {
-                const next = args.relatedTarget || document.activeElement;
-                const outside = !closest(next, (node) => node === wrapper);
-                if (outside) {
-                    this.domEvents.focusOut.emit(args);
-                    this.renderer.removeClass(this.wrapper.nativeElement, 'k-state-focused');
-                    focused = false;
-                }
-            });
-            this.detachElementEventHandlers = () => {
-                windowBlurSubscription();
-                clickSubscription();
-                keydownSubscription();
-                focusInSubscription();
-                focusOutSubscription();
-            };
+            // 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(() => {
+                this.pdfService.save();
+            }, 0);
         });
     }
-};
-__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);
+    /**
+     * Scrolls the view to the specified time.
+     */
+    scrollToTime(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 %}
+     */
+    slotByPosition(x, y) {
+        return this.viewContext.executeMethod('slotByPosition', { x, 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.
+     */
+    eventFromElement(element) {
+        return this.viewContext.executeMethod('eventFromElement', { element });
+    }
+    /**
+     * Gets the currently active event, if any.
+     * The active event is the event that can currently receive focus.
+     */
+    get activeEvent() {
+        const activeElement = this.focusService.activeElement;
+        if (activeElement) {
+            return this.eventFromElement(activeElement.nativeElement);
+        }
+    }
+    /**
+     * 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`.
+     */
+    focusNext(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`.
+     */
+    focusPrev(position) {
+        const prevPosition = Object.assign({ offset: -1 }, position);
+        return this.focusService.focusNext(prevPosition);
+    }
+    /**
+     * Focuses the last focused event or the Scheduler element, if no events are available.
+     */
+    focus() {
+        return this.focusService.focus();
+    }
+    isInRange(date) {
+        return (!this.min || this.min <= date) && (!this.max || date <= this.max);
+    }
+    notifyOptionsChange(changes) {
+        const 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
+        });
+    }
+    get workWeek() {
+        let { start, end } = this.intlService.weekendRange();
+        const workWeekStart = isPresent(this.workWeekStart) ? this.workWeekStart : (end + 1) % DAYS_IN_WEEK;
+        const weekEnd = start > 0 ? start - 1 : Day.Saturday;
+        const workWeekEnd = isPresent(this.workWeekEnd) ? this.workWeekEnd : weekEnd;
+        return { start: workWeekStart, end: workWeekEnd };
+    }
+    resetViewIndex() {
+        const index = this.selectedViewIndex;
+        const newIndex = Math.max(0, Math.min(index, this.views.length - 1));
+        this.setViewIndex(newIndex);
+        this.onViewIndexChange();
+    }
+    onViewIndexChange() {
+        if (!this.views) {
+            return;
+        }
+        const views = this.views.toArray();
+        const selectedView = views[this.viewIndex];
+        if (selectedView) {
+            this.selectedView = selectedView;
+        }
+    }
+    setViewIndex(newIndex) {
+        const changed = this.selectedViewIndex !== newIndex;
+        if (changed) {
+            this.selectedViewIndex = newIndex;
+            this.selectedViewIndexChange.emit(newIndex);
+        }
+        return changed;
+    }
+    processEvents(dataItems) {
+        const timezone = this.timezone;
+        const fields = this.modelFields;
+        const items = dataItems
+            .map(dataItem => readEvent(dataItem, fields, this.resources))
+            .filter(event => !isRecurrenceMaster(event))
+            .map(event => {
+            const start = ZonedDate.fromLocalDate(event.start, timezone);
+            const end = ZonedDate.fromLocalDate(event.end, timezone);
+            return { start, end, event };
+        });
+        this.viewItems = items;
+        this.viewContext.notifyItems(items);
+    }
+    attachEditHandlers() {
+        if (!this.editService) {
+            return;
+        }
+        this.subs.add(this.editService.changes.subscribe(this.emitCRUDEvent.bind(this)));
+    }
+    emitCRUDEvent(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;
+        }
+    }
+    intlChange() {
+        const 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();
+        }
+    }
+    attachElementEventHandlers() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const wrapper = this.wrapper.nativeElement;
+        this.zone.runOutsideAngular(() => {
+            const windowBlurSubscription = this.renderer.listen('window', 'blur', (args) => {
+                this.domEvents.windowBlur.emit(args);
+            });
+            const clickSubscription = this.renderer.listen(wrapper, 'click', (args) => {
+                this.domEvents.click.emit(args);
+            });
+            const keydownSubscription = this.renderer.listen(wrapper, 'keydown', args => {
+                this.domEvents.keydown.emit(args);
+            });
+            let focused = false;
+            const focusInSubscription = this.renderer.listen(wrapper, 'focusin', (args) => {
+                this.domEvents.focus.emit(args);
+                if (!focused) {
+                    this.domEvents.focusIn.emit(args);
+                    this.renderer.addClass(this.wrapper.nativeElement, 'k-state-focused');
+                    focused = true;
+                }
+            });
+            const focusOutSubscription = this.renderer.listen(wrapper, 'focusout', (args) => {
+                const next = args.relatedTarget || document.activeElement;
+                const outside = !closest(next, (node) => node === wrapper);
+                if (outside) {
+                    this.domEvents.focusOut.emit(args);
+                    this.renderer.removeClass(this.wrapper.nativeElement, 'k-state-focused');
+                    focused = false;
+                }
+            });
+            this.detachElementEventHandlers = () => {
+                windowBlurSubscription();
+                clickSubscription();
+                keydownSubscription();
+                focusInSubscription();
+                focusOutSubscription();
+            };
+        });
+    }
+};
 __decorate([
-    Input(),
-    __metadata("design:type", Object)
+    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(),
@@ -2635,6 +3066,10 @@ __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)
@@ -2707,6 +3142,18 @@ __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)
@@ -2916,434 +3363,173 @@ SchedulerComponent = __decorate([
             i18n-recurrenceEditorDailyRepeatEvery="kendo.scheduler.recurrenceEditorDailyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
             recurrenceEditorDailyRepeatEvery='Repeat every'
 
-            i18n-recurrenceEditorWeeklyInterval="kendo.scheduler.recurrenceEditorWeeklyInterval|The text similar to 'week(s)' displayed in the scheduler recurrence editor."
-            recurrenceEditorWeeklyInterval='week(s)'
-
-            i18n-recurrenceEditorWeeklyRepeatEvery="kendo.scheduler.recurrenceEditorWeeklyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
-            recurrenceEditorWeeklyRepeatEvery='Repeat every'
-
-            i18n-recurrenceEditorWeeklyRepeatOn="kendo.scheduler.recurrenceEditorWeeklyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor."
-            recurrenceEditorWeeklyRepeatOn='Repeat on'
-
-            i18n-recurrenceEditorMonthlyDay="kendo.scheduler.recurrenceEditorMonthlyDay|The text similar to 'Day' displayed in the scheduler recurrence editor."
-            recurrenceEditorMonthlyDay='Day'
-
-            i18n-recurrenceEditorMonthlyInterval="kendo.scheduler.recurrenceEditorMonthlyInterval|The text similar to 'month(s)' displayed in the scheduler recurrence editor."
-            recurrenceEditorMonthlyInterval='month(s)'
-
-            i18n-recurrenceEditorMonthlyRepeatEvery="kendo.scheduler.recurrenceEditorMonthlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
-            recurrenceEditorMonthlyRepeatEvery='Repeat every'
-
-            i18n-recurrenceEditorMonthlyRepeatOn="kendo.scheduler.recurrenceEditorMonthlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor."
-            recurrenceEditorMonthlyRepeatOn='Repeat on'
-
-            i18n-recurrenceEditorYearlyOf="kendo.scheduler.recurrenceEditorYearlyOf|The text similar to 'of' displayed in the scheduler recurrence editor."
-            recurrenceEditorYearlyOf='of'
-
-            i18n-recurrenceEditorYearlyRepeatEvery="kendo.scheduler.recurrenceEditorYearlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
-            recurrenceEditorYearlyRepeatEvery='Repeat every'
-
-            i18n-recurrenceEditorYearlyRepeatOn="kendo.scheduler.recurrenceEditorYearlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor."
-            recurrenceEditorYearlyRepeatOn='Repeat on'
-
-            i18n-recurrenceEditorYearlyInterval="kendo.scheduler.recurrenceEditorYearlyInterval|The text similar to 'year(s)' displayed in the scheduler recurrence editor."
-            recurrenceEditorYearlyInterval='year(s)'
-
-            i18n-recurrenceEditorFrequenciesDaily="kendo.scheduler.recurrenceEditorFrequenciesDaily|The text similar to 'Daily' displayed in the scheduler recurrence editor."
-            recurrenceEditorFrequenciesDaily='Daily'
-
-            i18n-recurrenceEditorFrequenciesMonthly="kendo.scheduler.recurrenceEditorFrequenciesMonthly|The text similar to 'Monthly' displayed in the scheduler recurrence editor."
-            recurrenceEditorFrequenciesMonthly='Monthly'
-
-            i18n-recurrenceEditorFrequenciesNever="kendo.scheduler.recurrenceEditorFrequenciesNever|The text similar to 'Never' displayed in the scheduler recurrence editor."
-            recurrenceEditorFrequenciesNever='Never'
-
-            i18n-recurrenceEditorFrequenciesWeekly="kendo.scheduler.recurrenceEditorFrequenciesWeekly|The text similar to 'Weekly' displayed in the scheduler recurrence editor."
-            recurrenceEditorFrequenciesWeekly='Weekly'
-
-            i18n-recurrenceEditorFrequenciesYearly="kendo.scheduler.recurrenceEditorFrequenciesYearly|The text similar to 'Yearly' displayed in the scheduler recurrence editor."
-            recurrenceEditorFrequenciesYearly='Yearly'
-
-            i18n-recurrenceEditorOffsetPositionsFirst="kendo.scheduler.recurrenceEditorOffsetPositionsFirst|The text similar to 'First' displayed in the scheduler recurrence editor."
-            recurrenceEditorOffsetPositionsFirst='First'
-
-            i18n-recurrenceEditorOffsetPositionsSecond="kendo.scheduler.recurrenceEditorOffsetPositionsSecond|The text similar to 'Second' displayed in the scheduler recurrence editor."
-            recurrenceEditorOffsetPositionsSecond='Second'
-
-            i18n-recurrenceEditorOffsetPositionsThird="kendo.scheduler.recurrenceEditorOffsetPositionsThird|The text similar to 'Third' displayed in the scheduler recurrence editor."
-            recurrenceEditorOffsetPositionsThird='Third'
-
-            i18n-recurrenceEditorOffsetPositionsFourth="kendo.scheduler.recurrenceEditorOffsetPositionsFourth|The text similar to 'Fourth' displayed in the scheduler recurrence editor."
-            recurrenceEditorOffsetPositionsFourth='Fourth'
-
-            i18n-recurrenceEditorOffsetPositionsLast="kendo.scheduler.recurrenceEditorOffsetPositionsLast|The text similar to 'Last' displayed in the scheduler recurrence editor."
-            recurrenceEditorOffsetPositionsLast='Last'
-
-            i18n-recurrenceEditorWeekdaysDay="kendo.scheduler.recurrenceEditorWeekdaysDay|The text similar to 'Day' displayed in the repeat by section of the monthly recurrence pattern."
-            recurrenceEditorWeekdaysDay='Day'
-
-            i18n-recurrenceEditorWeekdaysWeekday="kendo.scheduler.recurrenceEditorWeekdaysWeekday|The text similar to 'Weekday' displayed in the repeat by section of the monthly recurrence pattern."
-            recurrenceEditorWeekdaysWeekday='Weekday'
-
-            i18n-recurrenceEditorWeekdaysWeekendday="kendo.scheduler.recurrenceEditorWeekdaysWeekendday|The text similar to 'Weekend Day' displayed in the repeat by section of the monthly recurrence pattern."
-            recurrenceEditorWeekdaysWeekendday='Weekend Day'
-
-            i18n-recurrenceEditorEndAfter="kendo.scheduler.recurrenceEditorEndAfter|The text similar to 'After' displayed in the scheduler recurrence editor."
-            recurrenceEditorEndAfter='After'
-
-            i18n-recurrenceEditorEndOccurrence="kendo.scheduler.recurrenceEditorEndOccurrence|The text similar to 'occurrence(s)' displayed in the scheduler recurrence editor."
-            recurrenceEditorEndOccurrence='occurrence(s)'
-
-            i18n-recurrenceEditorEndLabel="kendo.scheduler.recurrenceEditorEndLabel|The text similar to 'End' displayed in the scheduler recurrence editor."
-            recurrenceEditorEndLabel='End'
-
-            i18n-recurrenceEditorEndNever="kendo.scheduler.recurrenceEditorEndNever|The text similar to 'Never' displayed in the scheduler recurrence editor."
-            recurrenceEditorEndNever='Never'
-
-            i18n-recurrenceEditorEndOn="kendo.scheduler.recurrenceEditorEndOn|The text similar to 'On' displayed in the scheduler recurrence editor."
-            recurrenceEditorEndOn='On'
-
-            i18n-destroy="kendo.scheduler.destroy|The text of the 'Delete' button displayed in the scheduler remove confirmation dialog."
-            destroy='Delete'
-
-            i18n-deleteConfirmation="kendo.scheduler.deleteConfirmation|The text similar to 'Are you sure you want to delete this event?' displayed in scheduler remove confirmation dialog."
-            deleteConfirmation='Are you sure you want to delete this event?'
-
-            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."
-            editRecurringConfirmation='Do you want to edit only this event occurrence or the whole series?'
-
-            i18n-editOccurrence="kendo.scheduler.editOccurrence|The text of the 'Edit current occurrence' button displayed in the scheduler recurring confirmation dialog."
-            editOccurrence='Edit current occurrence'
-
-            i18n-editSeries="kendo.scheduler.editSeries|The text of the 'Edit the series' button displayed in the scheduler recurring confirmation dialog."
-            editSeries='Edit the series'
-
-            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."
-            deleteRecurringConfirmation='Do you want to delete only this event occurrence or the whole series?'
-
-            i18n-deleteOccurrence="kendo.scheduler.deleteOccurrence|The text of the 'Delete current occurrence' button displayed in the scheduler recurring confirmation dialog."
-            deleteOccurrence='Delete current occurrence'
-
-            i18n-deleteSeries="kendo.scheduler.deleteSeries|The text similar of the 'Delete the series' button displayed in the scheduler recurring confirmation dialog."
-            deleteSeries='Delete the series'
-
-            i18n-deleteDialogTitle="kendo.scheduler.deleteDialogTitle|The title of the remove confirmation dialog, similar to 'Delete Event'."
-            deleteDialogTitle='Delete Event'
-
-            i18n-deleteRecurringDialogTitle="kendo.scheduler.deleteRecurringDialogTitle|The title of the recurring remove confirmation dialog, similar to 'Delete Recurring Item'"
-            deleteRecurringDialogTitle='Delete Recurring Item'
-
-            i18n-editRecurringDialogTitle="kendo.scheduler.editRecurringDialogTitle|The title of the recurring edit confirmation dialog, similar to 'Edit Recurring Item'"
-            editRecurringDialogTitle='Edit Recurring Item'
-        >
-        </ng-container>
-
-        <kendo-scheduler-toolbar
-            [dateRange]="dateRangeStream"
-            [selectedDate]="selectedDateStream"
-            [views]="views"
-            [selectedView]="selectedView"
-            [template]="toolbarTemplate"
-            (navigate)="onNavigationAction($event)"
-            [min]="min"
-            [max]="max"
-        ></kendo-scheduler-toolbar>
-
-        <ng-container *ngTemplateOutlet="selectedView?.template">
-        </ng-container>
-
-        <ng-container #confirmationDialogContainer>
-        </ng-container>
-
-        <kendo-scheduler-edit-dialog
-            [resources]="resources"
-            [editTemplate]="editDialogTemplate"
-            [timezone]="timezone"
-            [weekStart]="weekStart"
-            [fields]="modelFields"
-        ></kendo-scheduler-edit-dialog>
-
-        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-
-        <div [loading]="loading" kendoSchedulerLoading>
-        </div>
-    `
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        ViewContextService,
-        ViewStateService,
-        EditService,
-        DialogsService,
-        IntlService,
-        ChangeDetectorRef,
-        NgZone,
-        PDFService,
-        LocalizationService,
-        DomEventsService,
-        Renderer2,
-        FocusService])
-], SchedulerComponent);
-
-/** @hidden */
-const intersects = (startTime, endTime, periodStart, periodEnd) => (startTime < periodStart && endTime > periodEnd) ||
-    (periodStart <= startTime && startTime < periodEnd) ||
-    (periodStart < endTime && endTime <= periodEnd && startTime < endTime);
-/** @hidden */
-const dateInRange = (date, start, end) => start.getTime() <= date.getTime() && date.getTime() <= end.getTime();
-/** @hidden */
-const roundAllDayEnd = ({ start, end }) => {
-    const startDate = start.stripTime();
-    const 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;
-}
-/**
- * @hidden
- * TODO Move to date-math
- */
-const addUTCDays = (date, offset) => {
-    const 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) {
-    const data = resource.data;
-    for (let dataIdx = 0; dataIdx < data.length; dataIdx++) {
-        if (getField(data[dataIdx], resource.valueField) === value) {
-            return dataIdx;
-        }
-    }
-    return -1;
-}
-function resourceItem(value, resource) {
-    const index = getDataIdx(value, resource);
-    return index >= 0 ? resource.data[index] : {};
-}
-function resourceItems(values, resource) {
-    return values.map(value => resourceItem(value, resource));
-}
-function cloneResources(arr) {
-    const result = [];
-    for (let idx = 0; idx < arr.length; idx++) {
-        const 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) {
-    const value = getField(event, resource.field);
-    if (Array.isArray(value)) {
-        return resourceItems(value, resource);
-    }
-    return resourceItem(value, resource);
-}
-function addNotGroupedResources(event, resources, allResources) {
-    for (let resourceIdx = 0; resourceIdx < resources.length; resourceIdx++) {
-        const current = resources[resourceIdx];
-        for (let idx = 0; idx < allResources.length; idx++) {
-            const item = allResources[idx];
-            if (!current.resources[idx] && item.data) {
-                current.resources[idx] = resourceItemByValue(event, item);
-            }
-        }
-    }
-}
-/** @hidden */
-function eventResources(event, { taskResources, hasGroups, spans, allResources = [] }) {
-    let resources = [];
-    for (let resourceIdx = 0; resourceIdx < taskResources.length; resourceIdx++) {
-        const resource = taskResources[resourceIdx];
-        if (!resource.data) {
-            resources = [{ leafIdx: 0, resources: [] }];
-            continue;
-        }
-        const resourceIndex = allResources.indexOf(resource);
-        let values = getField(event, resource.field);
-        if (!Array.isArray(values)) {
-            values = [values];
-        }
-        const expandedResources = [];
-        for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
-            const dataIdx = getDataIdx(values[valueIdx], resource);
-            if (dataIdx < 0) {
-                return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
-            }
-            const item = resource.data[dataIdx];
-            // has groups - need all copies of the multiple resource
-            // no groups - just the first
-            if (resourceIdx === 0 && (hasGroups || valueIdx === 0)) {
-                const resourceItems = [];
-                resourceItems[resourceIndex] = resource.multiple && !hasGroups ? [item] : item;
-                resources.push({
-                    leafIdx: hasGroups ? dataIdx * spans[resourceIdx] : 0,
-                    color: getField(item, resource.colorField),
-                    resources: resourceItems
-                });
-            }
-            else if (hasGroups) { // don't create multiple resource groups if no groups for multiple resources
-                let currentResources = resources;
-                if (values.length > 1) {
-                    currentResources = cloneResources(resources);
-                    expandedResources.push.apply(expandedResources, currentResources);
-                }
-                for (let currentIdx = 0; currentIdx < currentResources.length; currentIdx++) {
-                    currentResources[currentIdx].leafIdx += dataIdx * spans[resourceIdx];
-                    currentResources[currentIdx].resources[resourceIndex] = item;
-                }
-            }
-            else if (valueIdx > 0) {
-                for (let idx = 0; idx < resources.length; idx++) {
-                    resources[idx].resources[resourceIndex].push(item);
-                }
-            }
-        }
-        if (expandedResources.length) {
-            resources = expandedResources;
-        }
-    }
-    addNotGroupedResources(event, resources, allResources);
-    return resources;
-}
-/** @hidden */
-function assignTasksResources(tasks, options) {
-    for (let idx = 0; idx < tasks.length; idx++) {
-        const task = tasks[idx];
-        task.resources = eventResources(task.event, options);
-    }
-}
-/** @hidden */
-function findRowIndex(events, data) {
-    if (data.rowIndex !== undefined) {
-        return data.rowIndex;
-    }
-    for (let 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 */
-const rectContains = (rect, left, top) => rect.left <= left && left <= rect.left + rect.width && rect.top <= top && top <= rect.top + rect.height;
-/** @hidden */
-const rectContainsX = (rect, left) => rect.left <= left && left <= rect.left + rect.width;
-/** @hidden */
-const toPx = value => `${value}px`;
-/** @hidden */
-const elementOffset = (element) => {
-    if (!element) {
-        return null;
-    }
-    const box = element.getBoundingClientRect();
-    const 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 */
-const pointDistance = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
-/** @hidden */
-const ignoreContentChild = child => child.nodeName === 'KENDO-RESIZE-SENSOR' || hasClasses(child, 'k-loading-mask');
-/** @hidden */
-const setCoordinates = (element, coordinates) => {
-    for (let field in coordinates) {
-        if (coordinates.hasOwnProperty(field)) {
-            element.style[field] = toPx(coordinates[field]);
-        }
-    }
-};
-/** @hidden */
-const convertNgClassBindings = (bindingValues) => {
-    const result = [];
-    if (isString(bindingValues)) {
-        result.push(bindingValues);
-    }
-    else if (isArray(bindingValues)) {
-        result.push.apply(result, bindingValues);
-    }
-    else if (isObject(bindingValues)) {
-        for (let field in bindingValues) {
-            if (bindingValues.hasOwnProperty(field) && bindingValues[field]) {
-                result.push(field);
-            }
-        }
-    }
-    return result;
-};
-/**
- * @hidden
- */
-function formatEventTime(start, end, isAllDay, localeId) {
-    const startTimeFormat = { skeleton: 'yMMMMEEEEdhm' };
-    const startDateFormat = { skeleton: 'yMMMMEEEEd' };
-    const endFormat = isEqualDate(start, end) ? 't' : startTimeFormat;
-    return isAllDay ?
-        `${formatDate(start, startDateFormat, localeId)}` :
-        `${formatDate(start, startTimeFormat, localeId)}–${formatDate(end, endFormat, localeId)}`;
-}
-/**
- * @hidden
- */
-function formValueOrDefault(group, field, defaultValue) {
-    const control = group.get(field);
-    if (!control) {
-        return defaultValue;
-    }
-    return control.value || defaultValue;
-}
-/**
- * @hidden
- */
-const isWorkWeekDay = (day, start, end) => {
-    if (end < start) {
-        return day <= end || start <= day;
-    }
-    return start <= day && day <= end;
-};
+            i18n-recurrenceEditorWeeklyInterval="kendo.scheduler.recurrenceEditorWeeklyInterval|The text similar to 'week(s)' displayed in the scheduler recurrence editor."
+            recurrenceEditorWeeklyInterval='week(s)'
+
+            i18n-recurrenceEditorWeeklyRepeatEvery="kendo.scheduler.recurrenceEditorWeeklyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
+            recurrenceEditorWeeklyRepeatEvery='Repeat every'
+
+            i18n-recurrenceEditorWeeklyRepeatOn="kendo.scheduler.recurrenceEditorWeeklyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor."
+            recurrenceEditorWeeklyRepeatOn='Repeat on'
+
+            i18n-recurrenceEditorMonthlyDay="kendo.scheduler.recurrenceEditorMonthlyDay|The text similar to 'Day' displayed in the scheduler recurrence editor."
+            recurrenceEditorMonthlyDay='Day'
+
+            i18n-recurrenceEditorMonthlyInterval="kendo.scheduler.recurrenceEditorMonthlyInterval|The text similar to 'month(s)' displayed in the scheduler recurrence editor."
+            recurrenceEditorMonthlyInterval='month(s)'
+
+            i18n-recurrenceEditorMonthlyRepeatEvery="kendo.scheduler.recurrenceEditorMonthlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
+            recurrenceEditorMonthlyRepeatEvery='Repeat every'
+
+            i18n-recurrenceEditorMonthlyRepeatOn="kendo.scheduler.recurrenceEditorMonthlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor."
+            recurrenceEditorMonthlyRepeatOn='Repeat on'
+
+            i18n-recurrenceEditorYearlyOf="kendo.scheduler.recurrenceEditorYearlyOf|The text similar to 'of' displayed in the scheduler recurrence editor."
+            recurrenceEditorYearlyOf='of'
+
+            i18n-recurrenceEditorYearlyRepeatEvery="kendo.scheduler.recurrenceEditorYearlyRepeatEvery|The text similar to 'Repeat every' displayed in the scheduler recurrence editor."
+            recurrenceEditorYearlyRepeatEvery='Repeat every'
+
+            i18n-recurrenceEditorYearlyRepeatOn="kendo.scheduler.recurrenceEditorYearlyRepeatOn|The text similar to 'Repeat on' displayed in the scheduler recurrence editor."
+            recurrenceEditorYearlyRepeatOn='Repeat on'
+
+            i18n-recurrenceEditorYearlyInterval="kendo.scheduler.recurrenceEditorYearlyInterval|The text similar to 'year(s)' displayed in the scheduler recurrence editor."
+            recurrenceEditorYearlyInterval='year(s)'
+
+            i18n-recurrenceEditorFrequenciesDaily="kendo.scheduler.recurrenceEditorFrequenciesDaily|The text similar to 'Daily' displayed in the scheduler recurrence editor."
+            recurrenceEditorFrequenciesDaily='Daily'
+
+            i18n-recurrenceEditorFrequenciesMonthly="kendo.scheduler.recurrenceEditorFrequenciesMonthly|The text similar to 'Monthly' displayed in the scheduler recurrence editor."
+            recurrenceEditorFrequenciesMonthly='Monthly'
+
+            i18n-recurrenceEditorFrequenciesNever="kendo.scheduler.recurrenceEditorFrequenciesNever|The text similar to 'Never' displayed in the scheduler recurrence editor."
+            recurrenceEditorFrequenciesNever='Never'
+
+            i18n-recurrenceEditorFrequenciesWeekly="kendo.scheduler.recurrenceEditorFrequenciesWeekly|The text similar to 'Weekly' displayed in the scheduler recurrence editor."
+            recurrenceEditorFrequenciesWeekly='Weekly'
+
+            i18n-recurrenceEditorFrequenciesYearly="kendo.scheduler.recurrenceEditorFrequenciesYearly|The text similar to 'Yearly' displayed in the scheduler recurrence editor."
+            recurrenceEditorFrequenciesYearly='Yearly'
+
+            i18n-recurrenceEditorOffsetPositionsFirst="kendo.scheduler.recurrenceEditorOffsetPositionsFirst|The text similar to 'First' displayed in the scheduler recurrence editor."
+            recurrenceEditorOffsetPositionsFirst='First'
+
+            i18n-recurrenceEditorOffsetPositionsSecond="kendo.scheduler.recurrenceEditorOffsetPositionsSecond|The text similar to 'Second' displayed in the scheduler recurrence editor."
+            recurrenceEditorOffsetPositionsSecond='Second'
+
+            i18n-recurrenceEditorOffsetPositionsThird="kendo.scheduler.recurrenceEditorOffsetPositionsThird|The text similar to 'Third' displayed in the scheduler recurrence editor."
+            recurrenceEditorOffsetPositionsThird='Third'
+
+            i18n-recurrenceEditorOffsetPositionsFourth="kendo.scheduler.recurrenceEditorOffsetPositionsFourth|The text similar to 'Fourth' displayed in the scheduler recurrence editor."
+            recurrenceEditorOffsetPositionsFourth='Fourth'
+
+            i18n-recurrenceEditorOffsetPositionsLast="kendo.scheduler.recurrenceEditorOffsetPositionsLast|The text similar to 'Last' displayed in the scheduler recurrence editor."
+            recurrenceEditorOffsetPositionsLast='Last'
+
+            i18n-recurrenceEditorWeekdaysDay="kendo.scheduler.recurrenceEditorWeekdaysDay|The text similar to 'Day' displayed in the repeat by section of the monthly recurrence pattern."
+            recurrenceEditorWeekdaysDay='Day'
+
+            i18n-recurrenceEditorWeekdaysWeekday="kendo.scheduler.recurrenceEditorWeekdaysWeekday|The text similar to 'Weekday' displayed in the repeat by section of the monthly recurrence pattern."
+            recurrenceEditorWeekdaysWeekday='Weekday'
+
+            i18n-recurrenceEditorWeekdaysWeekendday="kendo.scheduler.recurrenceEditorWeekdaysWeekendday|The text similar to 'Weekend Day' displayed in the repeat by section of the monthly recurrence pattern."
+            recurrenceEditorWeekdaysWeekendday='Weekend Day'
+
+            i18n-recurrenceEditorEndAfter="kendo.scheduler.recurrenceEditorEndAfter|The text similar to 'After' displayed in the scheduler recurrence editor."
+            recurrenceEditorEndAfter='After'
+
+            i18n-recurrenceEditorEndOccurrence="kendo.scheduler.recurrenceEditorEndOccurrence|The text similar to 'occurrence(s)' displayed in the scheduler recurrence editor."
+            recurrenceEditorEndOccurrence='occurrence(s)'
+
+            i18n-recurrenceEditorEndLabel="kendo.scheduler.recurrenceEditorEndLabel|The text similar to 'End' displayed in the scheduler recurrence editor."
+            recurrenceEditorEndLabel='End'
+
+            i18n-recurrenceEditorEndNever="kendo.scheduler.recurrenceEditorEndNever|The text similar to 'Never' displayed in the scheduler recurrence editor."
+            recurrenceEditorEndNever='Never'
+
+            i18n-recurrenceEditorEndOn="kendo.scheduler.recurrenceEditorEndOn|The text similar to 'On' displayed in the scheduler recurrence editor."
+            recurrenceEditorEndOn='On'
+
+            i18n-destroy="kendo.scheduler.destroy|The text of the 'Delete' button displayed in the scheduler remove confirmation dialog."
+            destroy='Delete'
+
+            i18n-deleteConfirmation="kendo.scheduler.deleteConfirmation|The text similar to 'Are you sure you want to delete this event?' displayed in scheduler remove confirmation dialog."
+            deleteConfirmation='Are you sure you want to delete this event?'
+
+            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."
+            editRecurringConfirmation='Do you want to edit only this event occurrence or the whole series?'
+
+            i18n-editOccurrence="kendo.scheduler.editOccurrence|The text of the 'Edit current occurrence' button displayed in the scheduler recurring confirmation dialog."
+            editOccurrence='Edit current occurrence'
+
+            i18n-editSeries="kendo.scheduler.editSeries|The text of the 'Edit the series' button displayed in the scheduler recurring confirmation dialog."
+            editSeries='Edit the series'
+
+            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."
+            deleteRecurringConfirmation='Do you want to delete only this event occurrence or the whole series?'
+
+            i18n-deleteOccurrence="kendo.scheduler.deleteOccurrence|The text of the 'Delete current occurrence' button displayed in the scheduler recurring confirmation dialog."
+            deleteOccurrence='Delete current occurrence'
+
+            i18n-deleteSeries="kendo.scheduler.deleteSeries|The text similar of the 'Delete the series' button displayed in the scheduler recurring confirmation dialog."
+            deleteSeries='Delete the series'
+
+            i18n-deleteDialogTitle="kendo.scheduler.deleteDialogTitle|The title of the remove confirmation dialog, similar to 'Delete Event'."
+            deleteDialogTitle='Delete Event'
+
+            i18n-deleteRecurringDialogTitle="kendo.scheduler.deleteRecurringDialogTitle|The title of the recurring remove confirmation dialog, similar to 'Delete Recurring Item'"
+            deleteRecurringDialogTitle='Delete Recurring Item'
+
+            i18n-editRecurringDialogTitle="kendo.scheduler.editRecurringDialogTitle|The title of the recurring edit confirmation dialog, similar to 'Edit Recurring Item'"
+            editRecurringDialogTitle='Edit Recurring Item'
+        >
+        </ng-container>
+
+        <kendo-scheduler-toolbar
+            [dateRange]="dateRangeStream"
+            [selectedDate]="selectedDateStream"
+            [views]="views"
+            [selectedView]="selectedView"
+            [template]="toolbarTemplate"
+            (navigate)="onNavigationAction($event)"
+            [min]="min"
+            [max]="max"
+        ></kendo-scheduler-toolbar>
+
+        <ng-container *ngTemplateOutlet="selectedView?.template">
+        </ng-container>
+
+        <ng-container #confirmationDialogContainer>
+        </ng-container>
+
+        <kendo-scheduler-edit-dialog
+            [resources]="resources"
+            [editTemplate]="editDialogTemplate"
+            [timezone]="timezone"
+            [weekStart]="weekStart"
+            [fields]="modelFields"
+        ></kendo-scheduler-edit-dialog>
+
+        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+
+        <div [loading]="loading" kendoSchedulerLoading>
+        </div>
+    `
+    }),
+    __metadata("design:paramtypes", [ElementRef,
+        ViewContextService,
+        ViewStateService,
+        EditService,
+        DialogsService,
+        IntlService,
+        ChangeDetectorRef,
+        NgZone,
+        PDFService,
+        LocalizationService,
+        DomEventsService,
+        Renderer2,
+        FocusService])
+], SchedulerComponent);
 
 // TODO
 // Extract as public method
@@ -4255,6 +4441,7 @@ ToolbarViewSelectorComponent = __decorate([
         </select>
         <span class="k-scheduler-views k-button-group">
             <button kendoButton
+                type="button"
                 *ngFor="let view of ctx.views"
                 [selected]="isSelected(view)"
                 [attr.aria-pressed]="isSelected(view)"
@@ -6209,7 +6396,7 @@ const SCROLL_INTERVAL = 50;
 const MIN_MOVE_DISTANCE = 10;
 /** @hidden */
 class BaseView {
-    constructor(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) {
+    constructor(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, cdr) {
         this.viewContext = viewContext;
         this.viewState = viewState;
         this.intl = intl;
@@ -6219,6 +6406,7 @@ class BaseView {
         this.element = element;
         this.pdfService = pdfService;
         this.localization = localization;
+        this.cdr = cdr;
         this.items = new BehaviorSubject(null);
         this.horizontalResources = [];
         this.verticalResources = [];
@@ -6232,8 +6420,17 @@ class BaseView {
         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 = () => false;
         this.setSlotClass = this.setSlotClass.bind(this);
         this.setHintClass = this.setHintClass.bind(this);
         this.weekStart = intl.firstDay();
@@ -6350,6 +6547,20 @@ class BaseView {
         }
         return result;
     }
+    // Similar to https://tc39.es/proposal-temporal/docs/plaindate.html
+    // Stores a "plain date" in the UTC parts of a regular `Date`.
+    toPlainDate(date) {
+        const 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`.
+    toPlainDateTime(date, time) {
+        if (!date || !time) {
+            return null;
+        }
+        return this.toPlainDate(dateWithTime(date, time));
+    }
     optionsChange(options) {
         this.schedulerEventTemplate = options.eventTemplate;
         this.schedulerGroupHeaderTemplate = options.groupHeaderTemplate;
@@ -6357,6 +6568,8 @@ class BaseView {
         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;
@@ -6383,6 +6596,7 @@ class BaseView {
         this.toggleElement(true);
         this.reflow();
         this.viewState.notifyLayoutEnd();
+        this.viewState.emitEvent(slotDragEventName.refreshSlotSelection);
     }
     assignResources() {
         assignTasksResources(this.tasks, {
@@ -6423,16 +6637,16 @@ class BaseView {
         });
     }
     onPress(args) {
-        const resizable = this.editable && this.editable.resize !== false;
-        const draggable = this.editable && this.editable.drag !== false;
+        const editResizable = this.editable && this.editable.resize !== false;
+        const editDraggable = this.editable && this.editable.drag !== false;
         const target = args.originalEvent.target;
         if (hasClasses(target, 'k-resize-handle')) {
-            if (!resizable) {
+            if (!editResizable) {
                 return;
             }
             this.initResize(args);
         }
-        else if (draggable) {
+        else if (editDraggable) {
             const task = this.targetTask(target);
             if (task) {
                 if (!args.isTouch) {
@@ -6442,6 +6656,9 @@ class BaseView {
                 this.pressTarget = task;
             }
         }
+        if (this.selectable) {
+            this.initDragSelect(args);
+        }
         this.dragArgs = args;
     }
     onDrag(args) {
@@ -6456,12 +6673,15 @@ class BaseView {
                 args.originalEvent.preventDefault();
                 this.scrollContainer(this.drag, args);
             }
+            if (this.dragSelecting) {
+                this.dragSelect(args);
+            }
         }
         this.dragArgs = args;
     }
-    onRelease() {
+    onRelease(args) {
         clearInterval(this.scrollInterval);
-        const { resizing, dragging } = this;
+        const { resizing, dragging, dragSelecting } = this;
         if (resizing) {
             this.emitEvent('resizeEnd', {
                 event: resizing.task.event,
@@ -6488,6 +6708,20 @@ class BaseView {
             this.resizing = null;
             this.dragging = null;
         }
+        if (dragSelecting) {
+            const { start, end } = normaliseRangeStartAndEnd(this.dragSelectOrigin, this.dragSelecting);
+            const 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;
@@ -6635,6 +6869,51 @@ class BaseView {
             this.updateHintContainer();
         }
     }
+    initDragSelect(args) {
+        this.updateDragContainer(args);
+        if (!this.containerOffset) {
+            return;
+        }
+        const { x, y } = this.coordinatesOffset(args.pageX, args.pageY);
+        const slot = this.slotByPosition(x, y, this.container);
+        if (!slot) {
+            return;
+        }
+        const range = {
+            start: this.convertDate(slot.start),
+            end: this.convertDate(slot.end),
+            isAllDay: slot.isDaySlot,
+            resources: this.resourcesByIndex(slot.id.resourceIndex),
+            originalEvent: args.originalEvent
+        };
+        const slotDragStartEvent = new SlotDragStartEvent(null, range);
+        this.viewState.notifySlotSelectionStart(slotDragStartEvent);
+        if (!slotDragStartEvent.isDefaultPrevented()) {
+            this.dragSelecting = slot;
+            this.dragSelectOrigin = slot;
+            this.cdr.markForCheck();
+        }
+    }
+    dragSelect(args) {
+        const { x, y } = this.coordinatesOffset(args.pageX, args.pageY);
+        const slot = this.slotByPosition(x, y, this.container);
+        if (!slot) {
+            return;
+        }
+        if (this.dragSelecting !== slot) {
+            this.dragSelecting = slot;
+            const { start, end } = normaliseRangeStartAndEnd(this.dragSelectOrigin, this.dragSelecting);
+            const 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();
+        }
+    }
     dragHintClasses() {
         const hintClass = this.dragging.hintClass;
         let result = [];
@@ -7115,8 +7394,8 @@ const WEEKS_COUNT = 6;
  * @hidden
  */
 let MonthViewRendererComponent = class MonthViewRendererComponent extends BaseView {
-    constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization) {
-        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization);
+    constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector) {
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
         this.resizeHintFormat = { skeleton: 'Md' };
         this.weeks = [];
     }
@@ -7164,6 +7443,12 @@ let MonthViewRendererComponent = class MonthViewRendererComponent extends BaseVi
             });
         }
     }
+    cellTitle(value) {
+        return this.intl.formatDate(value, 'D');
+    }
+    addDay(dayStart) {
+        return addDays(dayStart, 1);
+    }
     optionsChange(changes) {
         this.schedulerMonthDaySlotTemplate = changes.monthDaySlotTemplate;
         super.optionsChange(changes);
@@ -7328,7 +7613,7 @@ MonthViewRendererComponent = __decorate([
                     </table>
                 </div>
                 <div class="k-scheduler-content" #content>
-                     <table class="k-scheduler-table" #contentTable role="presentation">
+                     <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
@@ -7337,8 +7622,15 @@ MonthViewRendererComponent = __decorate([
                                          [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
                                          [start]="day"
                                          [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                         [title]="cellTitle(day)"
+                                         [class.k-state-selected]="isSlotSelected({
+                                             start: toPlainDate(day),
+                                             end: addDay(toPlainDate(day)),
+                                             isAllDay: true,
+                                             resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                         })"
                                         >
-                                        <span class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef">{{ day | kendoDate: 'dd' }}</span>
+                                        <span aria-hidden="true" class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef">{{ day | kendoDate: 'dd' }}</span>
                                         <ng-container *ngIf="monthDaySlotTemplateRef" [ngTemplateOutlet]="monthDaySlotTemplateRef"
                                             [ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }"></ng-container>
                                      </td>
@@ -7395,7 +7687,8 @@ MonthViewRendererComponent = __decorate([
         ElementRef,
         Renderer2,
         PDFService,
-        LocalizationService])
+        LocalizationService,
+        ChangeDetectorRef])
 ], MonthViewRendererComponent);
 
 /**
@@ -9111,7 +9404,7 @@ const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberO
  */
 class DayTimeViewComponent extends BaseView {
     constructor(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) {
-        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization);
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
         this.changeDetector = changeDetector;
         this.numberOfDays = 1;
         this.startTime = '00:00';
@@ -9597,8 +9890,8 @@ let MultiDayViewRendererComponent = class MultiDayViewRendererComponent extends
         }
         super.updateHintContainer();
     }
-    onRelease() {
-        super.onRelease();
+    onRelease(args) {
+        super.onRelease(args);
         this.dragContainers = null;
     }
     updateDragContainer(args) {
@@ -9759,7 +10052,7 @@ MultiDayViewRendererComponent = __decorate([
                             </tr>
                         </table>
                         <div style="position: relative;" *ngIf="!verticalResources.length">
-                            <table class="k-scheduler-table k-scheduler-header-all-day" aria-hidden="true">
+                            <table class="k-scheduler-table k-scheduler-header-all-day k-user-select-none" aria-hidden="true">
                                 <tr>
                                     <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
                                         <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
@@ -9767,6 +10060,12 @@ MultiDayViewRendererComponent = __decorate([
                                             [start]="slot.start"
                                             [end]="slot.end"
                                             [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDate(slot.start),
+                                                end: toPlainDate(slot.end),
+                                                isAllDay: true,
+                                                resources: resourcesByIndex(resourceIndex)
+                                            })"
                                             [ngClass]="allDaySlotClass(slot, resourceIndex)">
                                             <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
                                                 [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
@@ -9848,7 +10147,7 @@ MultiDayViewRendererComponent = __decorate([
                         </ng-container>
                     </table>
                 </div>
-                <div class="k-scheduler-content" #content>
+                <div class="k-scheduler-content k-user-select-none" #content>
                     <ng-container *ngIf="showCurrentTime">
                         <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
                             #currentTimeMarker class="k-current-time">
@@ -9861,6 +10160,12 @@ MultiDayViewRendererComponent = __decorate([
                                     daySlot
                                     [start]="slot.start"
                                     [end]="slot.end"
+                                    [class.k-state-selected]="isSlotSelected({
+                                        start: toPlainDate(slot.start),
+                                        end: toPlainDate(slot.end),
+                                        isAllDay: true,
+                                        resources: resourcesByIndex(verticalIndex)
+                                    })"
                                     [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
                                     <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
                                         [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
@@ -9879,6 +10184,12 @@ MultiDayViewRendererComponent = __decorate([
                                             [workWeekStart]="workWeekStart"
                                             [workWeekEnd]="workWeekEnd"
                                             [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDateTime(daySlot.start, slot.start),
+                                                end: toPlainDateTime(daySlot.start, slot.end),
+                                                isAllDay: false,
+                                                resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                            })"
                                     >
                                         <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
                                             [ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
@@ -10184,7 +10495,7 @@ let DayTimeModule = class DayTimeModule {
 };
 DayTimeModule = __decorate([
     NgModule({
-        imports: [CommonModule, SharedModule],
+        imports: [CommonModule, SharedModule, ViewsSharedModule],
         exports: [
             DIRECTIVES
         ],
@@ -10494,7 +10805,7 @@ TimelineMultiDayViewComponent = __decorate([
                             class="k-current-time" #currentTimeMarker>
                         </div>
                     </ng-container>
-                    <table class="k-scheduler-table" #contentTable role="presentation">
+                    <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                         <colgroup>
                             <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
                         </colgroup>
@@ -10511,7 +10822,14 @@ TimelineMultiDayViewComponent = __decorate([
                                             [workDayEnd]="workDayEndTime"
                                             [workWeekStart]="workWeekStart"
                                             [workWeekEnd]="workWeekEnd"
+                                            selectableSlot
                                             [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDateTime(daySlot.start, slot.start),
+                                                end: toPlainDateTime(daySlot.start, slot.end),
+                                                isAllDay: false,
+                                                resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                            })"
                                     >
                                         <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
                                             [ngTemplateOutletContext]="{ date: timeSlot.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
@@ -13873,6 +14191,107 @@ ShortcutsDirective = __decorate([
         DialogsService])
 ], ShortcutsDirective);
 
+/**
+ * A directive which manages the in-memory selection state of the Scheduler slots
+ * ([see example]({% slug slotselection_scheduler %}#toc-built-in-directive)).
+ */
+let SlotSelectableDirective = class SlotSelectableDirective {
+    constructor(scheduler, cdr) {
+        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((v) => {
+            this.slotSelectionChange.emit(v);
+        }));
+        const start$ = this.scheduler.slotDragStart;
+        const drag$ = this.scheduler.slotDrag;
+        const end$ = this.scheduler.slotDragEnd;
+        const startSource = start$.pipe(filter(e => !e.isDefaultPrevented()));
+        this.subscriptions.add(startSource.subscribe(e => this.initDragSelect(e)));
+        this.subscriptions.add(drag$.subscribe(e => this.onDrag(e)));
+        this.subscriptions.add(end$.subscribe(() => this.onRelease()));
+    }
+    ngOnInit() {
+        this.scheduler.isSlotSelected = this.isSlotSelected.bind(this);
+    }
+    ngOnChanges(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
+             */
+            const resources = this.scheduler.resources ? [this.scheduler.resources[0].data[0]] : [undefined];
+            this.selectedRange = Object.assign({}, { isAllDay: false, resources }, changes.slotSelection.currentValue);
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    isSlotSelected({ start, end, isAllDay, resources }) {
+        if (!start || !end || !this.selectedRange) {
+            return false;
+        }
+        const match = resourcesMatch(this.selectedRange.resources, resources, true);
+        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);
+    }
+    initDragSelect({ start, end, isAllDay, resources, originalEvent }) {
+        this.selectionOriginResources = resources.slice();
+        this.selectedRange = { start, end, isAllDay, resources: resources.slice(), originalEvent };
+        this.cdr.markForCheck();
+    }
+    onDrag({ start, end, resources }) {
+        const match = resourcesMatch(this.selectionOriginResources, resources, false); // Not strict - allow matching [ undefined ] and [ undefined ]
+        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();
+    }
+    onRelease() {
+        this.selectionOriginResources = null;
+        if (this.selectedRange) {
+            this.slotSelectionChangeSource.emit(this.selectedRange);
+        }
+    }
+    /**
+     * @hidden
+     * Checks if the selected range contains a local date range.
+     */
+    isInRange(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);
+
 const TEMPLATES = [
     AgendaDateTemplateDirective,
     AgendaTimeTemplateDirective,
@@ -13893,6 +14312,7 @@ const declarations = [
     DataBindingDirective,
     ShortcutsDirective,
     ReactiveEditingDirective,
+    SlotSelectableDirective,
     SchedulerDateTimePickerComponent,
     RecurrenceEditorComponent,
     RecurrenceEndRuleEditorComponent,
@@ -14534,4 +14954,4 @@ PDFModule = __decorate([
  * 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 };