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

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637916885,
+    publishDate: 1644228429,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/scheduler.component.d.ts

@@ -38,6 +38,10 @@ import { DomEventsService } from './views/common/dom-events.service';
 import { CreateEvent } from './events/create-event';
 import { SchedulerEvent } from './types/scheduler-event';
 import { EventKeydownEvent } from './events/event-keydown-event';
+import { IsSlotSelectedArgs } from './types/slot-selection';
+import { SlotDragStartEvent } from './events/slot-drag-start-event';
+import { SlotDragEvent } from './events/slot-drag-event';
+import { SlotDragEndEvent } from './events/slot-drag-end-event';
 /**
  * Represents the [Kendo UI Scheduler component for Angular]({% slug overview_scheduler %}).
  *
@@ -85,6 +89,12 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
      * Specifies if the Scheduler is editable.
      */
     editable: boolean | EditableSettings;
+    /**
+     * 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.
+     */
+    selectable: boolean;
     /**
      * The minimum date that can be selected by using the navigation of the Scheduler.
      */
@@ -323,6 +333,11 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
      * ```
      */
     eventStyles: (args: EventStyleArgs) => any;
+    /**
+     * 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.
+     */
+    isSlotSelected: (args: IsSlotSelectedArgs) => boolean;
     /**
      * @hidden
      */
@@ -397,6 +412,18 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
      * Fires when the user stops dragging a Scheduler event.
      */
     dragEnd: EventEmitter<DragEndEvent>;
+    /**
+     * Fires when the user starts drag-selecting a Scheduler slot range.
+     */
+    slotDragStart: EventEmitter<SlotDragStartEvent>;
+    /**
+     * Fires when the user is drag-selecting a Scheduler slot range.
+     */
+    slotDrag: EventEmitter<SlotDragEvent>;
+    /**
+     * Fires when the user stops drag-selecting a Scheduler slot range.
+     */
+    slotDragEnd: EventEmitter<SlotDragEndEvent>;
     /**
      * Fires when the user clicks the **PDF export** command button.
      */

package/dist/es2015/scheduler.component.js

@@ -42,6 +42,9 @@ import { LoadingComponent } from './loading.component';
 import { FocusService } from './navigation';
 import { DomEventsService } from './views/common/dom-events.service';
 import { closest } from './common/dom-queries';
+import { alwaysFalse } from './views/utils';
+import { SlotDragEvent } from './events/slot-drag-event';
+import { SlotDragEndEvent } from './events/slot-drag-end-event';
 const todayDate = () => getDate(new Date());
 const ɵ0 = todayDate;
 const DAYS_IN_WEEK = 7;
@@ -85,6 +88,12 @@ let SchedulerComponent = class SchedulerComponent {
          * 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.
          */
@@ -136,6 +145,11 @@ let SchedulerComponent = class SchedulerComponent {
          * 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
          */
@@ -210,6 +224,18 @@ let SchedulerComponent = class SchedulerComponent {
          * 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.
          */
@@ -367,6 +393,30 @@ let SchedulerComponent = class SchedulerComponent {
                 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));
@@ -416,7 +466,7 @@ let SchedulerComponent = class SchedulerComponent {
         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'
+            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles', 'isSlotSelected', 'selectable'
         ], changes)) {
             this.notifyOptionsChange(changes);
         }
@@ -663,6 +713,7 @@ let SchedulerComponent = class SchedulerComponent {
             slotDivisions: this.slotDivisions,
             eventHeight: this.eventHeight,
             editable: this.editable,
+            selectable: this.selectable,
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
             slotClass: this.slotClass,
@@ -670,6 +721,7 @@ let SchedulerComponent = class SchedulerComponent {
             columnWidth: this.columnWidth,
             eventClass: this.eventClass,
             eventStyles: this.eventStyles,
+            isSlotSelected: this.isSlotSelected,
             changes: changes
         });
     }
@@ -818,6 +870,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], SchedulerComponent.prototype, "editable", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], SchedulerComponent.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Date)
@@ -931,6 +987,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], SchedulerComponent.prototype, "eventStyles", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Function)
+], SchedulerComponent.prototype, "isSlotSelected", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1003,6 +1063,18 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], SchedulerComponent.prototype, "dragEnd", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], SchedulerComponent.prototype, "slotDragStart", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], SchedulerComponent.prototype, "slotDrag", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], SchedulerComponent.prototype, "slotDragEnd", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)

package/dist/es2015/scheduler.module.js

@@ -35,7 +35,7 @@ import { EditDialogComponent } from './editing/edit-dialog.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
-import { NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
+import { CheckBoxModule, NumericTextBoxModule, TextAreaModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { SchedulerDateTimePickerComponent } from './editing/date-time-picker.component';
 import { RecurrenceEditorComponent } from './editing/recurrence/recurrence-editor.component';
@@ -55,6 +55,7 @@ import { EditDialogTemplateDirective } from './editing/edit-dialog-template.dire
 import { LoadingComponent } from './loading.component';
 import { SharedModule } from './shared.module';
 import { ShortcutsDirective } from './navigation/shortcuts.directive';
+import { SlotSelectableDirective } from './views/common/slot-selectable.directive';
 const TEMPLATES = [
     AgendaDateTemplateDirective,
     AgendaTimeTemplateDirective,
@@ -75,6 +76,7 @@ const declarations = [
     DataBindingDirective,
     ShortcutsDirective,
     ReactiveEditingDirective,
+    SlotSelectableDirective,
     SchedulerDateTimePickerComponent,
     RecurrenceEditorComponent,
     RecurrenceEndRuleEditorComponent,
@@ -106,6 +108,8 @@ const publicDirectives = [
 ];
 const importedKendoModules = [
     ButtonsModule,
+    CheckBoxModule,
+    TextAreaModule,
     DateInputsModule,
     DialogModule,
     NumericTextBoxModule,

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

@@ -77,7 +77,7 @@ ToolbarViewSelectorComponent = tslib_1.__decorate([
         template: `
         <select *ngIf="ctx.views?.length > 1"
                 (change)="onChange($event)"
-                class="k-views-dropdown k-dropdown">
+                class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker">
             <option *ngFor="let view of ctx.views"
                 [selected]="isSelected(view) == true"
                 [value]="view.name"

package/dist/es2015/types/datepicker-options.interface.d.ts

@@ -10,7 +10,7 @@ import { Day } from '@progress/kendo-date-math';
 export interface DatePickerOptions {
     /**
      * Defines the active view that the Calendar initially renders
-     * ([see example]({% slug activeview_datepicker %})).
+     * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
      * By default, the active view is `month`.
      *
      * > You have to set `activeView` within the `topView`-`bottomView` range.
@@ -18,7 +18,7 @@ export interface DatePickerOptions {
     activeView?: CalendarView;
     /**
      * Defines the bottommost Calendar view to which the user can navigate
-     * ([see example]({% slug dates_datepicker %}#toc-partial-dates)).
+     * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
      */
     bottomView?: CalendarView;
     /**
@@ -29,7 +29,7 @@ export interface DatePickerOptions {
     disabledDatesValidation?: boolean;
     /**
      * Specifies the focused date of the Calendar component
-     * ([see example]({% slug dates_datepicker %})).
+     * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
      */
     focusedDate?: Date;
     /**
@@ -82,12 +82,12 @@ export interface DatePickerOptions {
     title?: string;
     /**
      * Defines the topmost Calendar view to which the user can navigate
-     * ([see example]({% slug dates_datepicker %}#toc-partial-dates)).
+     * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
      */
     topView?: CalendarView;
     /**
      * Determines whether to display a week number column in the `month` view of the Calendar
-     * ([see example]({% slug weeknumcolumn_datepicker %})).
+     * ([see example]({% slug calendar_type_datepicker %}#toc-week-number-column)).
      */
     weekNumber?: boolean;
     /**

package/dist/es2015/types/slot-selection.d.ts

@@ -0,0 +1,71 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ *
+ * A callback that executes for each visible slot of the Scheduler component.
+ * If it returns `true`, the `k-state-selected` CSS class will be added to the cell, making it visibly selected.
+ */
+export declare type SlotSelectionCallback = (args: IsSlotSelectedArgs) => boolean;
+/**
+ * The arguments for the [`isSlotSelected`]({% slug api_scheduler_schedulercomponent %}#toc-isslotselected) callback.
+ */
+export declare class IsSlotSelectedArgs implements SlotRange {
+    /**
+     * The start date of the slot.
+     */
+    start: Date;
+    /**
+     * The end date of the slot.
+     */
+    end: Date;
+    /**
+     * Indicates if the slot is an all-day slot, or a time slot.
+     */
+    isAllDay: boolean;
+    /**
+     * The resources for the slot, if grouping by resource; otherwise all Scheduler resources.
+     */
+    resources: any[];
+}
+/**
+ * Defines a range of regular or all-day slots.
+ * Used to describe the selected slots in the [`slotSelectionChange`]({% slug api_scheduler_slotselectabledirective %}#toc-selectionchange) event and to set the selected slots with the [`kendoSchedulerSlotSelectable`]({% slug api_scheduler_slotselectabledirective %}) directive.
+ */
+export interface SlotRange {
+    /**
+     * The start date of the slot selection.
+     */
+    start: Date;
+    /**
+     * The end date of the slot selection.
+     */
+    end: Date;
+    /**
+     * Indicates if the slot selection consists of all-day slots, or of time slots.
+     * The default value is `false`.
+     */
+    isAllDay?: boolean;
+    /**
+     * The resources that correspond to the slot selection.
+     * The default value is `[]`.
+     */
+    resources?: any[];
+}
+/**
+ * @hidden
+ */
+export interface ExtendedSlotRange extends SlotRange {
+    originalEvent: PointerEvent;
+}
+/**
+ * @hidden
+ */
+export declare enum slotDragEventName {
+    initDragSelect = "initDragSelect",
+    dragSelect = "dragSelect",
+    refreshSlotSelection = "refreshSlotSelection",
+    dragSelectRelease = "dragSelectRelease"
+}

package/dist/es2015/types/slot-selection.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
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The arguments for the [`isSlotSelected`]({% slug api_scheduler_schedulercomponent %}#toc-isslotselected) callback.
+ */
+export class IsSlotSelectedArgs {
+}
+/**
+ * @hidden
+ */
+export var slotDragEventName;
+(function (slotDragEventName) {
+    slotDragEventName["initDragSelect"] = "initDragSelect";
+    slotDragEventName["dragSelect"] = "dragSelect";
+    slotDragEventName["refreshSlotSelection"] = "refreshSlotSelection";
+    slotDragEventName["dragSelectRelease"] = "dragSelectRelease";
+})(slotDragEventName || (slotDragEventName = {}));

package/dist/es2015/types.d.ts

@@ -21,3 +21,5 @@ export { EventStyleArgs } from './types/event-style-args.interface';
 export { SchedulerSlot } from './types/scheduler-slot.interface';
 export { NumericTextBoxOptions } from './types/numeric-options.interface';
 export { DatePickerOptions } from './types/datepicker-options.interface';
+export { SlotRange } from './types/slot-selection';
+export { IsSlotSelectedArgs } from './types/slot-selection';

package/dist/es2015/types.js

@@ -3,3 +3,4 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export * from './types/scheduler-view';
+export { IsSlotSelectedArgs } from './types/slot-selection';

package/dist/es2015/views/common/base-view.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 { OnInit, AfterViewInit, OnDestroy, OnChanges, NgZone, ElementRef, Renderer2, TemplateRef } from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy, OnChanges, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { Day } from '@progress/kendo-date-math';
 import { Subscription, Subject, BehaviorSubject } from 'rxjs';
@@ -10,9 +10,12 @@ import { DateRange, NavigationAction, ViewItem } from '../../types';
 import { BaseSlotService } from '../view-items/base-slot.service';
 import { ViewContextService } from '../view-context.service';
 import { ViewStateService } from '../view-state.service';
+import Draggable from '@telerik/kendo-draggable';
 import { HintContainerComponent } from '../common/hint-container.component';
 import { PDFService } from '../../pdf/pdf.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { TimeSlotDirective } from '../day-time/event-slot.directive';
+import { SlotSelectionCallback } from '../../types/slot-selection';
 /** @hidden */
 export declare abstract class BaseView implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     protected viewContext: ViewContextService;
@@ -24,6 +27,7 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected element: ElementRef;
     protected pdfService: PDFService;
     protected localization: LocalizationService;
+    protected cdr: ChangeDetectorRef;
     еventTemplate: TemplateRef<any>;
     groupHeaderTemplate: TemplateRef<any>;
     selectedDateFormat: string;
@@ -49,6 +53,7 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     dragHints: any[];
     resizeHints: any[];
     editable: any;
+    selectable: boolean;
     getField: any;
     protected changes: BehaviorSubject<any>;
     protected viewRangeChange: BehaviorSubject<any>;
@@ -67,10 +72,21 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected selectedDate: Date;
     protected resourcesCache: any;
     protected timezone: string;
-    protected draggable: any;
+    protected draggable: Draggable;
+    /**
+     * The event which is currently being resized.
+     */
     protected resizing: any;
     protected dragging: any;
     protected dragArgs: any;
+    /**
+     * The slot which is currently being dragged over while selecting a range of slots.
+     */
+    protected dragSelecting: TimeSlotDirective;
+    /**
+     * The slot where the drag-selecting originated. Used for flipping the start and end of the emitted range.
+     */
+    protected dragSelectOrigin: TimeSlotDirective;
     protected container: any;
     protected containerOffset: any;
     protected pressLocation: any;
@@ -78,7 +94,8 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected scrollInterval: any;
     protected autoHeight: boolean;
     protected rtl: boolean;
-    constructor(viewContext: ViewContextService, viewState: ViewStateService, intl: IntlService, slotService: BaseSlotService, zone: NgZone, renderer: Renderer2, element: ElementRef, pdfService: PDFService, localization: LocalizationService);
+    isSlotSelected: SlotSelectionCallback;
+    constructor(viewContext: ViewContextService, viewState: ViewStateService, intl: IntlService, slotService: BaseSlotService, zone: NgZone, renderer: Renderer2, element: ElementRef, pdfService: PDFService, localization: LocalizationService, cdr: ChangeDetectorRef);
     protected abstract onSelectDate(date: Date): void;
     protected abstract onAction(action: NavigationAction): void;
     protected abstract onTasksChange(): void;
@@ -88,7 +105,7 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected abstract dateRange(date: Date): DateRange;
     protected abstract dragHintSize(startSlot: any, endSlot: any): any;
     protected abstract dragRanges(slot: any): any;
-    protected abstract slotByPosition(x: number, y: number, container?: any): any;
+    protected abstract slotByPosition(x: number, y: number, container?: any): TimeSlotDirective;
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
     ngAfterViewInit(): void;
@@ -98,6 +115,8 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     dragResourcesByIndex(index: number): any[];
     getEventClasses(item: any, resources: any, isAllDay?: boolean): any;
     getEventStyles(item: any, itemResource: any, isAllDay?: boolean): any;
+    toPlainDate(date: Date): Date;
+    toPlainDateTime(date: Date, time: Date): Date;
     protected optionsChange(options: any): void;
     protected toggleElement(visible: boolean): void;
     protected onStable(): any;
@@ -106,7 +125,7 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected bindEvents(): void;
     protected onPress(args: any): void;
     protected onDrag(args: any): void;
-    protected onRelease(): void;
+    protected onRelease(args: any): void;
     protected setHintClass(className: string): void;
     protected updateHintClass(): void;
     protected removeHintClass(): void;
@@ -116,6 +135,8 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected initDrag(args: any): void;
     protected updateDragContainer(args: any): void;
     protected drag(args: any): void;
+    protected initDragSelect(args: any): void;
+    protected dragSelect(args: any): void;
     protected dragHintClasses(): any;
     protected dragHintEventStyleArgs(): any;
     protected draggedIsAllDay(task: any, _slot: any): boolean;