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

package/dist/npm/events/slot-drag-end-event.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var slot_drag_event_1 = require("./slot-drag-event");
+/**
+ * Arguments for the `slotDragEnd` event.
+ */
+var SlotDragEndEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(SlotDragEndEvent, _super);
+    function SlotDragEndEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SlotDragEndEvent;
+}(slot_drag_event_1.SlotDragEvent));
+exports.SlotDragEndEvent = SlotDragEndEvent;

package/dist/npm/events/slot-drag-event.js

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Arguments for the `slotDrag` event.
+ */
+var SlotDragEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function SlotDragEvent(sender, args) {
+        this.sender = sender;
+        Object.assign(this, args);
+    }
+    return SlotDragEvent;
+}());
+exports.SlotDragEvent = SlotDragEvent;

package/dist/npm/events/slot-drag-start-event.js

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var preventable_event_1 = require("./preventable-event");
+/**
+ * Arguments for the `slotDragStart` event.
+ * The event is preventable and if prevented, subsequent `slotDrag`, `slotDragEnd`, and `slotSelectionChange` will not be fired.
+ */
+var SlotDragStartEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(SlotDragStartEvent, _super);
+    /**
+     * @hidden
+     */
+    function SlotDragStartEvent(sender, args) {
+        var _this = _super.call(this) || this;
+        _this.sender = sender;
+        Object.assign(_this, args);
+        return _this;
+    }
+    return SlotDragStartEvent;
+}(preventable_event_1.PreventableEvent));
+exports.SlotDragStartEvent = SlotDragStartEvent;

package/dist/npm/events.js

@@ -40,3 +40,9 @@ var edit_event_1 = require("./events/edit-event");
 exports.EditEvent = edit_event_1.EditEvent;
 var add_event_1 = require("./events/add-event");
 exports.AddEvent = add_event_1.AddEvent;
+var slot_drag_start_event_1 = require("./events/slot-drag-start-event");
+exports.SlotDragStartEvent = slot_drag_start_event_1.SlotDragStartEvent;
+var slot_drag_event_1 = require("./events/slot-drag-event");
+exports.SlotDragEvent = slot_drag_event_1.SlotDragEvent;
+var slot_drag_end_event_1 = require("./events/slot-drag-end-event");
+exports.SlotDragEndEvent = slot_drag_end_event_1.SlotDragEndEvent;

package/dist/npm/index.js

@@ -120,6 +120,8 @@ var resize_hint_component_1 = require("./views/common/resize-hint.component");
 exports.ResizeHintComponent = resize_hint_component_1.ResizeHintComponent
 var resource_iterator_pipe_1 = require("./views/common/resource-iterator.pipe");
 exports.ResourceIteratorPipe = resource_iterator_pipe_1.ResourceIteratorPipe
+var slot_selectable_directive_1 = require("./views/common/slot-selectable.directive");
+exports.SlotSelectableDirective = slot_selectable_directive_1.SlotSelectableDirective
 var view_footer_component_1 = require("./views/common/view-footer.component");
 exports.ViewFooterComponent = view_footer_component_1.ViewFooterComponent
 var views_shared_module_1 = require("./views/common/views-shared.module");

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.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'
 };

package/dist/npm/scheduler.component.js

@@ -44,6 +44,9 @@ var loading_component_1 = require("./loading.component");
 var navigation_1 = require("./navigation");
 var dom_events_service_1 = require("./views/common/dom-events.service");
 var dom_queries_1 = require("./common/dom-queries");
+var utils_1 = require("./views/utils");
+var slot_drag_event_1 = require("./events/slot-drag-event");
+var slot_drag_end_event_1 = require("./events/slot-drag-end-event");
 var todayDate = function () { return kendo_date_math_1.getDate(new Date()); };
 var ɵ0 = todayDate;
 exports.ɵ0 = ɵ0;
@@ -88,6 +91,12 @@ var SchedulerComponent = /** @class */ (function () {
          * 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.
          */
@@ -139,6 +148,11 @@ var SchedulerComponent = /** @class */ (function () {
          * 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 = utils_1.alwaysFalse;
         /**
          * @hidden
          */
@@ -213,6 +227,18 @@ var SchedulerComponent = /** @class */ (function () {
          * Fires when the user stops dragging a Scheduler event.
          */
         this.dragEnd = new core_1.EventEmitter();
+        /**
+         * Fires when the user starts drag-selecting a Scheduler slot range.
+         */
+        this.slotDragStart = new core_1.EventEmitter();
+        /**
+         * Fires when the user is drag-selecting a Scheduler slot range.
+         */
+        this.slotDrag = new core_1.EventEmitter();
+        /**
+         * Fires when the user stops drag-selecting a Scheduler slot range.
+         */
+        this.slotDragEnd = new core_1.EventEmitter();
         /**
          * Fires when the user clicks the **PDF export** command button.
          */
@@ -403,6 +429,30 @@ var SchedulerComponent = /** @class */ (function () {
                 _this.resizeSensor.acceptSize();
             }
         }));
+        this.subs.add(this.viewState.slotSelectionStart
+            .subscribe(function (e) {
+            if (kendo_angular_common_2.hasObservers(_this.slotDragStart)) {
+                _this.zone.run(function () {
+                    _this.slotDragStart.emit(Object.assign(e, { sender: _this }));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionDrag
+            .subscribe(function (value) {
+            if (kendo_angular_common_2.hasObservers(_this.slotDrag)) {
+                _this.zone.run(function () {
+                    _this.slotDrag.emit(new slot_drag_event_1.SlotDragEvent(_this, value));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionEnd
+            .subscribe(function (value) {
+            if (kendo_angular_common_2.hasObservers(_this.slotDragEnd)) {
+                _this.zone.run(function () {
+                    _this.slotDragEnd.emit(new slot_drag_end_event_1.SlotDragEndEvent(_this, value));
+                });
+            }
+        }));
         this.onViewIndexChange();
         this.notifyOptionsChange = this.notifyOptionsChange.bind(this);
         this.subs.add(this.allDayEventTemplate.changes.subscribe(this.notifyOptionsChange));
@@ -454,7 +504,7 @@ var SchedulerComponent = /** @class */ (function () {
         if (kendo_angular_common_2.anyChanged([
             'group', 'resources', 'min', 'max', 'showWorkHours', 'startTime', 'scrollTime', 'endTime', 'eventHeight',
             'workDayStart', 'workDayEnd', 'workWeekStart', 'workWeekEnd', 'weekStart', 'slotDuration', 'slotDivisions',
-            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles'
+            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles', 'isSlotSelected', 'selectable'
         ], changes)) {
             this.notifyOptionsChange(changes);
         }
@@ -707,6 +757,7 @@ var SchedulerComponent = /** @class */ (function () {
             slotDivisions: this.slotDivisions,
             eventHeight: this.eventHeight,
             editable: this.editable,
+            selectable: this.selectable,
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
             slotClass: this.slotClass,
@@ -714,6 +765,7 @@ var SchedulerComponent = /** @class */ (function () {
             columnWidth: this.columnWidth,
             eventClass: this.eventClass,
             eventStyles: this.eventStyles,
+            isSlotSelected: this.isSlotSelected,
             changes: changes
         });
     };
@@ -867,6 +919,10 @@ var SchedulerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], SchedulerComponent.prototype, "editable", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], SchedulerComponent.prototype, "selectable", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Date)
@@ -980,6 +1036,10 @@ var SchedulerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
     ], SchedulerComponent.prototype, "eventStyles", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], SchedulerComponent.prototype, "isSlotSelected", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -1052,6 +1112,18 @@ var SchedulerComponent = /** @class */ (function () {
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], SchedulerComponent.prototype, "dragEnd", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SchedulerComponent.prototype, "slotDragStart", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SchedulerComponent.prototype, "slotDrag", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SchedulerComponent.prototype, "slotDragEnd", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)

package/dist/npm/scheduler.module.js

@@ -57,6 +57,7 @@ var edit_dialog_template_directive_1 = require("./editing/edit-dialog-template.d
 var loading_component_1 = require("./loading.component");
 var shared_module_1 = require("./shared.module");
 var shortcuts_directive_1 = require("./navigation/shortcuts.directive");
+var slot_selectable_directive_1 = require("./views/common/slot-selectable.directive");
 var TEMPLATES = [
     agenda_date_template_directive_1.AgendaDateTemplateDirective,
     agenda_time_template_directive_1.AgendaTimeTemplateDirective,
@@ -77,6 +78,7 @@ var declarations = [
     data_binding_directive_1.DataBindingDirective,
     shortcuts_directive_1.ShortcutsDirective,
     reactive_editing_directive_1.ReactiveEditingDirective,
+    slot_selectable_directive_1.SlotSelectableDirective,
     date_time_picker_component_1.SchedulerDateTimePickerComponent,
     recurrence_editor_component_1.RecurrenceEditorComponent,
     recurrence_end_rule_editor_component_1.RecurrenceEndRuleEditorComponent,

package/dist/npm/toolbar/view-selector.component.js

@@ -79,7 +79,7 @@ var ToolbarViewSelectorComponent = /** @class */ (function () {
         core_1.Component({
             // tslint:disable-next-line:component-selector
             selector: '[kendoSchedulerToolbarViewSelector]',
-            template: "\n        <select *ngIf=\"ctx.views?.length > 1\"\n                (change)=\"onChange($event)\"\n                class=\"k-views-dropdown k-dropdown\">\n            <option *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view) == true\"\n                [value]=\"view.name\"\n            >\n                {{ view.title }}\n            </option>\n        </select>\n        <span class=\"k-scheduler-views k-button-group\">\n            <button kendoButton\n                *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view)\"\n                [attr.aria-pressed]=\"isSelected(view)\"\n                (click)=\"select(view)\"\n            >\n                <span class=\"k-button-text\">\n                    {{ view.title }}\n                </span>\n            </button>\n        </span>\n    "
+            template: "\n        <select *ngIf=\"ctx.views?.length > 1\"\n                (change)=\"onChange($event)\"\n                class=\"k-views-dropdown k-dropdown\">\n            <option *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view) == true\"\n                [value]=\"view.name\"\n            >\n                {{ view.title }}\n            </option>\n        </select>\n        <span class=\"k-scheduler-views k-button-group\">\n            <button kendoButton\n                type=\"button\"\n                *ngFor=\"let view of ctx.views\"\n                [selected]=\"isSelected(view)\"\n                [attr.aria-pressed]=\"isSelected(view)\"\n                (click)=\"select(view)\"\n            >\n                <span class=\"k-button-text\">\n                    {{ view.title }}\n                </span>\n            </button>\n        </span>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [toolbar_service_1.ToolbarService])
     ], ToolbarViewSelectorComponent);

package/dist/npm/types/slot-selection.js

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * The arguments for the [`isSlotSelected`]({% slug api_scheduler_schedulercomponent %}#toc-isslotselected) callback.
+ */
+var IsSlotSelectedArgs = /** @class */ (function () {
+    function IsSlotSelectedArgs() {
+    }
+    return IsSlotSelectedArgs;
+}());
+exports.IsSlotSelectedArgs = IsSlotSelectedArgs;
+/**
+ * @hidden
+ */
+var slotDragEventName;
+(function (slotDragEventName) {
+    slotDragEventName["initDragSelect"] = "initDragSelect";
+    slotDragEventName["dragSelect"] = "dragSelect";
+    slotDragEventName["refreshSlotSelection"] = "refreshSlotSelection";
+    slotDragEventName["dragSelectRelease"] = "dragSelectRelease";
+})(slotDragEventName = exports.slotDragEventName || (exports.slotDragEventName = {}));

package/dist/npm/types.js

@@ -10,3 +10,5 @@ var edit_mode_enum_1 = require("./types/edit-mode.enum");
 exports.EditMode = edit_mode_enum_1.EditMode;
 var crud_operation_enum_1 = require("./types/crud-operation.enum");
 exports.CrudOperation = crud_operation_enum_1.CrudOperation;
+var slot_selection_1 = require("./types/slot-selection");
+exports.IsSlotSelectedArgs = slot_selection_1.IsSlotSelectedArgs;

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

@@ -16,13 +16,15 @@ var utils_1 = require("../utils");
 var constants_1 = require("../constants");
 var kendo_draggable_1 = require("@telerik/kendo-draggable");
 var hint_container_component_1 = require("../common/hint-container.component");
+var slot_selection_1 = require("../../types/slot-selection");
+var slot_drag_start_event_1 = require("../../events/slot-drag-start-event");
 var SCROLL_CHANGE = 15;
 var MIN_DISTANCE = 60;
 var SCROLL_INTERVAL = 50;
 var MIN_MOVE_DISTANCE = 10;
 /** @hidden */
 var BaseView = /** @class */ (function () {
-    function BaseView(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) {
+    function BaseView(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, cdr) {
         this.viewContext = viewContext;
         this.viewState = viewState;
         this.intl = intl;
@@ -32,6 +34,7 @@ var BaseView = /** @class */ (function () {
         this.element = element;
         this.pdfService = pdfService;
         this.localization = localization;
+        this.cdr = cdr;
         this.items = new rxjs_1.BehaviorSubject(null);
         this.horizontalResources = [];
         this.verticalResources = [];
@@ -45,8 +48,17 @@ var BaseView = /** @class */ (function () {
         this.spans = [];
         this.domEvents = [];
         this.resourcesCache = {};
+        /**
+         * The slot which is currently being dragged over while selecting a range of slots.
+         */
+        this.dragSelecting = null;
+        /**
+         * The slot where the drag-selecting originated. Used for flipping the start and end of the emitted range.
+         */
+        this.dragSelectOrigin = null;
         this.autoHeight = false;
         this.rtl = false;
+        this.isSlotSelected = function () { return false; };
         this.setSlotClass = this.setSlotClass.bind(this);
         this.setHintClass = this.setHintClass.bind(this);
         this.weekStart = intl.firstDay();
@@ -177,6 +189,20 @@ var BaseView = /** @class */ (function () {
         }
         return result;
     };
+    // Similar to https://tc39.es/proposal-temporal/docs/plaindate.html
+    // Stores a "plain date" in the UTC parts of a regular `Date`.
+    BaseView.prototype.toPlainDate = function (date) {
+        var result = utils_1.toUTCDateTime(this.convertDate(date));
+        return result;
+    };
+    // Similar to https://tc39.es/proposal-temporal/docs/plaindatetime.html
+    // Stores a "plain date-time" in the UTC parts of a regular `Date`.
+    BaseView.prototype.toPlainDateTime = function (date, time) {
+        if (!date || !time) {
+            return null;
+        }
+        return this.toPlainDate(utils_1.dateWithTime(date, time));
+    };
     BaseView.prototype.optionsChange = function (options) {
         this.schedulerEventTemplate = options.eventTemplate;
         this.schedulerGroupHeaderTemplate = options.groupHeaderTemplate;
@@ -184,6 +210,8 @@ var BaseView = /** @class */ (function () {
         this.max = options.max;
         this.editable = options.editable;
         this.timezone = options.timezone;
+        this.selectable = options.selectable;
+        this.isSlotSelected = options.isSlotSelected;
         if (!options.changes || kendo_angular_common_1.anyChanged(['group', 'resources'], options.changes, false) ||
             options.group !== this.group || options.resources !== this.resources) {
             this.group = options.group;
@@ -210,6 +238,7 @@ var BaseView = /** @class */ (function () {
         this.toggleElement(true);
         this.reflow();
         this.viewState.notifyLayoutEnd();
+        this.viewState.emitEvent(slot_selection_1.slotDragEventName.refreshSlotSelection);
     };
     BaseView.prototype.assignResources = function () {
         utils_1.assignTasksResources(this.tasks, {
@@ -251,16 +280,16 @@ var BaseView = /** @class */ (function () {
         });
     };
     BaseView.prototype.onPress = function (args) {
-        var resizable = this.editable && this.editable.resize !== false;
-        var draggable = this.editable && this.editable.drag !== false;
+        var editResizable = this.editable && this.editable.resize !== false;
+        var editDraggable = this.editable && this.editable.drag !== false;
         var target = args.originalEvent.target;
         if (dom_queries_1.hasClasses(target, 'k-resize-handle')) {
-            if (!resizable) {
+            if (!editResizable) {
                 return;
             }
             this.initResize(args);
         }
-        else if (draggable) {
+        else if (editDraggable) {
             var task = this.targetTask(target);
             if (task) {
                 if (!args.isTouch) {
@@ -270,6 +299,9 @@ var BaseView = /** @class */ (function () {
                 this.pressTarget = task;
             }
         }
+        if (this.selectable) {
+            this.initDragSelect(args);
+        }
         this.dragArgs = args;
     };
     BaseView.prototype.onDrag = function (args) {
@@ -284,12 +316,15 @@ var BaseView = /** @class */ (function () {
                 args.originalEvent.preventDefault();
                 this.scrollContainer(this.drag, args);
             }
+            if (this.dragSelecting) {
+                this.dragSelect(args);
+            }
         }
         this.dragArgs = args;
     };
-    BaseView.prototype.onRelease = function () {
+    BaseView.prototype.onRelease = function (args) {
         clearInterval(this.scrollInterval);
-        var _a = this, resizing = _a.resizing, dragging = _a.dragging;
+        var _a = this, resizing = _a.resizing, dragging = _a.dragging, dragSelecting = _a.dragSelecting;
         if (resizing) {
             this.emitEvent('resizeEnd', {
                 event: resizing.task.event,
@@ -316,6 +351,20 @@ var BaseView = /** @class */ (function () {
             this.resizing = null;
             this.dragging = null;
         }
+        if (dragSelecting) {
+            var _b = utils_1.normaliseRangeStartAndEnd(this.dragSelectOrigin, this.dragSelecting), start = _b.start, end = _b.end;
+            var range = {
+                start: this.convertDate(start),
+                end: this.convertDate(end),
+                isAllDay: this.dragSelecting.isDaySlot,
+                resources: this.resourcesByIndex(this.dragSelecting.id.resourceIndex),
+                originalEvent: args.originalEvent
+            };
+            this.viewState.notifySlotSelectionEnd(range);
+            this.dragSelectOrigin = null;
+            this.dragSelecting = null;
+            this.cdr.markForCheck();
+        }
         this.container = null;
         this.dragArgs = null;
         this.pressLocation = null;
@@ -467,6 +516,51 @@ var BaseView = /** @class */ (function () {
             this.updateHintContainer();
         }
     };
+    BaseView.prototype.initDragSelect = function (args) {
+        this.updateDragContainer(args);
+        if (!this.containerOffset) {
+            return;
+        }
+        var _a = this.coordinatesOffset(args.pageX, args.pageY), x = _a.x, y = _a.y;
+        var slot = this.slotByPosition(x, y, this.container);
+        if (!slot) {
+            return;
+        }
+        var range = {
+            start: this.convertDate(slot.start),
+            end: this.convertDate(slot.end),
+            isAllDay: slot.isDaySlot,
+            resources: this.resourcesByIndex(slot.id.resourceIndex),
+            originalEvent: args.originalEvent
+        };
+        var slotDragStartEvent = new slot_drag_start_event_1.SlotDragStartEvent(null, range);
+        this.viewState.notifySlotSelectionStart(slotDragStartEvent);
+        if (!slotDragStartEvent.isDefaultPrevented()) {
+            this.dragSelecting = slot;
+            this.dragSelectOrigin = slot;
+            this.cdr.markForCheck();
+        }
+    };
+    BaseView.prototype.dragSelect = function (args) {
+        var _a = this.coordinatesOffset(args.pageX, args.pageY), x = _a.x, y = _a.y;
+        var slot = this.slotByPosition(x, y, this.container);
+        if (!slot) {
+            return;
+        }
+        if (this.dragSelecting !== slot) {
+            this.dragSelecting = slot;
+            var _b = utils_1.normaliseRangeStartAndEnd(this.dragSelectOrigin, this.dragSelecting), start = _b.start, end = _b.end;
+            var range = {
+                start: this.convertDate(start),
+                end: this.convertDate(end),
+                isAllDay: slot.isDaySlot,
+                resources: this.resourcesByIndex(slot.id.resourceIndex),
+                originalEvent: args.originalEvent
+            };
+            this.viewState.notifySlotSelectionDrag(range);
+            this.cdr.markForCheck();
+        }
+    };
     BaseView.prototype.dragHintClasses = function () {
         var hintClass = this.dragging.hintClass;
         var result = [];

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

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

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

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

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

@@ -10,6 +10,7 @@ var common_1 = require("@angular/common");
 var shared_module_1 = require("../../shared.module");
 var event_slot_directive_1 = require("./event-slot.directive");
 var day_time_view_item_component_1 = require("./day-time-view-item.component");
+var views_shared_module_1 = require("../common/views-shared.module");
 var DIRECTIVES = [event_slot_directive_1.TimeSlotDirective, event_slot_directive_1.DaySlotDirective, day_time_view_item_component_1.DayTimeViewItemComponent];
 /**
  * @hidden
@@ -19,7 +20,7 @@ var DayTimeModule = /** @class */ (function () {
     }
     DayTimeModule = tslib_1.__decorate([
         core_1.NgModule({
-            imports: [common_1.CommonModule, shared_module_1.SharedModule],
+            imports: [common_1.CommonModule, shared_module_1.SharedModule, views_shared_module_1.ViewsSharedModule],
             exports: [
                 DIRECTIVES
             ],