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

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

@@ -10,17 +10,19 @@ import { Subscription, BehaviorSubject, combineLatest, fromEvent, merge } from '
 import { switchMap, take, map, filter, tap } from 'rxjs/operators';
 import { closestInScope, hasClasses, preventLockedScroll, scrollbarWidth, wheelDeltaY, hasScrollbar } from '../../common/dom-queries';
 import { groupResources, getField, setField, fromClick, fromDoubleClick } from '../../common/util';
-import { assignTasksResources, toPx, elementOffset, pointDistance, ignoreContentChild, resourceItemByValue, convertNgClassBindings } from '../utils';
+import { assignTasksResources, toPx, elementOffset, pointDistance, ignoreContentChild, resourceItemByValue, convertNgClassBindings, toUTCDateTime, dateWithTime, normaliseRangeStartAndEnd } from '../utils';
 import { BORDER_WIDTH } from '../constants';
 import Draggable from '@telerik/kendo-draggable';
 import { HintContainerComponent } from '../common/hint-container.component';
+import { slotDragEventName } from '../../types/slot-selection';
+import { SlotDragStartEvent } from '../../events/slot-drag-start-event';
 const SCROLL_CHANGE = 15;
 const MIN_DISTANCE = 60;
 const SCROLL_INTERVAL = 50;
 const MIN_MOVE_DISTANCE = 10;
 /** @hidden */
 export 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;
@@ -30,6 +32,7 @@ export class BaseView {
         this.element = element;
         this.pdfService = pdfService;
         this.localization = localization;
+        this.cdr = cdr;
         this.items = new BehaviorSubject(null);
         this.horizontalResources = [];
         this.verticalResources = [];
@@ -43,8 +46,17 @@ export 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();
@@ -161,6 +173,20 @@ export 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;
@@ -168,6 +194,8 @@ export 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;
@@ -194,6 +222,7 @@ export class BaseView {
         this.toggleElement(true);
         this.reflow();
         this.viewState.notifyLayoutEnd();
+        this.viewState.emitEvent(slotDragEventName.refreshSlotSelection);
     }
     assignResources() {
         assignTasksResources(this.tasks, {
@@ -234,16 +263,16 @@ export 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) {
@@ -253,6 +282,9 @@ export class BaseView {
                 this.pressTarget = task;
             }
         }
+        if (this.selectable) {
+            this.initDragSelect(args);
+        }
         this.dragArgs = args;
     }
     onDrag(args) {
@@ -267,12 +299,15 @@ export 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,
@@ -299,6 +334,20 @@ export 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;
@@ -446,6 +495,51 @@ export 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 = [];

package/dist/es2015/views/common/slot-selectable.directive.d.ts

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnChanges, OnDestroy, OnInit, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { SchedulerComponent } from '../../scheduler.component';
+import { SlotRange } from '../../types/slot-selection';
+/**
+ * A directive which manages the in-memory selection state of the Scheduler slots
+ * ([see example]({% slug slotselection_scheduler %}#toc-built-in-directive)).
+ */
+export declare class SlotSelectableDirective implements OnInit, OnChanges, OnDestroy {
+    private scheduler;
+    private cdr;
+    /**
+     * The currently selected slot range.
+     */
+    slotSelection: SlotRange;
+    /**
+     * Fires when the currently selected slot range has changed through user interaction.
+     */
+    slotSelectionChange: EventEmitter<SlotRange>;
+    /**
+     * @hidden
+     * The resources of the cell where the selection started.
+     * When dragging over the slots of a different resource in grouped mode, the ongoing selection will not be affected.
+     */
+    private selectionOriginResources;
+    private selectedRange;
+    private slotSelectionChangeSource;
+    private subscriptions;
+    constructor(scheduler: SchedulerComponent, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private isSlotSelected;
+    private initDragSelect;
+    private onDrag;
+    private onRelease;
+    /**
+     * @hidden
+     * Checks if the selected range contains a local date range.
+     */
+    private isInRange;
+}

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

@@ -0,0 +1,112 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { intersects, isSameRange, resourcesMatch } from '../utils';
+import { SchedulerComponent } from '../../scheduler.component';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
+import { isChanged } from '@progress/kendo-angular-common';
+/**
+ * A directive which manages the in-memory selection state of the Scheduler slots
+ * ([see example]({% slug slotselection_scheduler %}#toc-built-in-directive)).
+ */
+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);
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], SlotSelectableDirective.prototype, "slotSelection", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], SlotSelectableDirective.prototype, "slotSelectionChange", void 0);
+SlotSelectableDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoSchedulerSlotSelectable]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [SchedulerComponent,
+        ChangeDetectorRef])
+], SlotSelectableDirective);
+export { SlotSelectableDirective };

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

@@ -24,7 +24,7 @@ const ɵ2 = getNextDate;
  */
 export 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';

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

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

package/dist/es2015/views/month/month-view-renderer.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnChanges, NgZone, ElementRef, Renderer2, TemplateRef } from '@angular/core';
+import { OnChanges, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { DateRange, NavigationAction, ViewItem } from '../../types';
 import { ViewContextService } from '../view-context.service';
@@ -20,13 +20,14 @@ export declare class MonthViewRendererComponent extends BaseView implements OnCh
     weeks: any[];
     readonly monthDaySlotTemplateRef: TemplateRef<any>;
     private schedulerMonthDaySlotTemplate;
-    constructor(viewContext: ViewContextService, viewState: ViewStateService, intl: IntlService, slotService: MonthSlotService, zone: NgZone, element: ElementRef, renderer: Renderer2, pdfService: PDFService, localization: LocalizationService);
+    constructor(viewContext: ViewContextService, viewState: ViewStateService, intl: IntlService, slotService: MonthSlotService, zone: NgZone, element: ElementRef, renderer: Renderer2, pdfService: PDFService, localization: LocalizationService, changeDetector: ChangeDetectorRef);
     ngOnChanges(changes: any): void;
     horizontalColspan(resourceIndex: number): any;
     verticalRowspan(resourceIndex: number): any;
     verticalItem(leafIndex: number, resourceIndex: number): any;
     daySlotClass(day: any, resourceIndex: any): string;
     cellTitle(value: Date): string;
+    addDay(dayStart: Date): Date;
     protected optionsChange(changes: any): void;
     protected createTasks(items: ViewItem[], dateRange: DateRange): any[];
     protected onTasksChange(): void;

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef } from '@angular/core';
+import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { isChanged } from '@progress/kendo-angular-common';
 import { addDays, addMonths, firstDayInWeek, firstDayOfMonth, getDate, toLocalDate } from '@progress/kendo-date-math';
@@ -22,8 +22,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 = [];
     }
@@ -74,6 +74,9 @@ 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);
@@ -238,7 +241,7 @@ MonthViewRendererComponent = tslib_1.__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">
@@ -248,8 +251,14 @@ MonthViewRendererComponent = tslib_1.__decorate([
                                          [start]="day"
                                          [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
                                          [title]="cellTitle(day)"
-                                         >
-                                        <span aria-hidden="true" class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef" >{{ day | kendoDate: 'dd' }}</span>
+                                         [class.k-state-selected]="isSlotSelected({
+                                             start: toPlainDate(day),
+                                             end: addDay(toPlainDate(day)),
+                                             isAllDay: true,
+                                             resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                         })"
+                                        >
+                                        <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>
@@ -306,6 +315,7 @@ MonthViewRendererComponent = tslib_1.__decorate([
         ElementRef,
         Renderer2,
         PDFService,
-        LocalizationService])
+        LocalizationService,
+        ChangeDetectorRef])
 ], MonthViewRendererComponent);
 export { MonthViewRendererComponent };

package/dist/es2015/views/multi-day/multi-day-view-renderer.component.d.ts

@@ -52,7 +52,7 @@ export declare class MultiDayViewRendererComponent extends DayTimeViewComponent
     protected reflow(): void;
     protected dragHorizontal(slot: any): boolean;
     protected updateHintContainer(): void;
-    protected onRelease(): void;
+    protected onRelease(args: any): void;
     protected updateDragContainer(args: any): void;
     protected containerByPosition({ x, y }: any): any;
     protected readonly containers: any[];

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

@@ -145,8 +145,8 @@ let MultiDayViewRendererComponent = class MultiDayViewRendererComponent extends
         }
         super.updateHintContainer();
     }
-    onRelease() {
-        super.onRelease();
+    onRelease(args) {
+        super.onRelease(args);
         this.dragContainers = null;
     }
     updateDragContainer(args) {
@@ -307,7 +307,7 @@ MultiDayViewRendererComponent = tslib_1.__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"
@@ -315,6 +315,12 @@ MultiDayViewRendererComponent = tslib_1.__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>
@@ -396,7 +402,7 @@ MultiDayViewRendererComponent = tslib_1.__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">
@@ -409,6 +415,12 @@ MultiDayViewRendererComponent = tslib_1.__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>
@@ -427,6 +439,12 @@ MultiDayViewRendererComponent = tslib_1.__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) }">

package/dist/es2015/views/timeline/timeline-multi-day-view.component.js

@@ -214,7 +214,7 @@ TimelineMultiDayViewComponent = tslib_1.__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>
@@ -231,7 +231,14 @@ TimelineMultiDayViewComponent = tslib_1.__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 ) }">

package/dist/es2015/views/utils.d.ts

@@ -4,6 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { ZonedDate } from '@progress/kendo-date-math';
 import { FormGroup } from '@angular/forms';
+import { Resource } from '../types';
+import { SlotRange } from '../types/slot-selection';
 /** @hidden */
 export declare const intersects: (startTime: Date, endTime: Date, periodStart: Date, periodEnd: Date) => boolean;
 /** @hidden */
@@ -35,11 +37,34 @@ export declare function toUTCDateTime(localDate: Date): Date;
 /** @hidden */
 export declare function dateWithTime(target: Date, time: Date): Date;
 /** @hidden */
+export interface SimpleRange {
+    start: Date;
+    end: Date;
+}
+/**
+ * @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.
+ */
+export declare function normaliseRangeStartAndEnd(selectionOrigin: SimpleRange, currentSlot: SimpleRange): SimpleRange;
+/** @hidden */
 export declare function resourceItemByValue(event: any, resource: any): any;
 /** @hidden */
 export declare function eventResources(event: any, { taskResources, hasGroups, spans, allResources }: any): any[];
 /** @hidden */
 export declare function assignTasksResources(tasks: any[], options: any): void;
+/**
+ * @hidden
+ */
+export declare function areValidResources(resources: Resource[]): boolean;
+/**
+ * @hidden
+ */
+export declare function resourcesMatch(res1: any[], res2: any[], strict: boolean): boolean;
+/**
+ * @hidden
+ */
+export declare function isSameRange(range1: SlotRange, range2: SlotRange): boolean;
 /** @hidden */
 export declare function findRowIndex(events: any[], data: any): number;
 /** @hidden */
@@ -74,3 +99,7 @@ export declare function formValueOrDefault(group: FormGroup, field: string, defa
  * @hidden
  */
 export declare const isWorkWeekDay: (day: number, start: number, end: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const alwaysFalse: () => boolean;