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

package/dist/es/editing/date-time-picker.component.js

@@ -71,7 +71,8 @@ var SchedulerDateTimePickerComponent = /** @class */ (function () {
                 SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
             ],
             selector: 'kendo-scheduler-datetime-picker',
-            template: "\n    <kendo-datepicker\n        #datepicker\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-datepicker>\n    <kendo-timepicker *ngIf='!isAllDay'\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-timepicker>\n    "
+            template: "\n    <kendo-datepicker\n        #datepicker\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-datepicker>\n    <kendo-timepicker *ngIf='!isAllDay'\n        [(value)]='date'\n        (valueChange)='onValueChange($event)'\n    ></kendo-timepicker>\n    ",
+            styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "]
         })
     ], SchedulerDateTimePickerComponent);
     return SchedulerDateTimePickerComponent;

package/dist/es/editing/edit-dialog.component.js

@@ -284,7 +284,7 @@ var EditDialogComponent = /** @class */ (function () {
     EditDialogComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-scheduler-edit-dialog',
-            template: "\n        <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor(\"editorTitle\") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]=\"autoFocusedElement\">\n            <ng-container *ngIf='!editTemplate'>\n                <div class='k-scheduler-edit-form'>\n                    <div class='k-edit-form-container'>\n                        <form novalidate [formGroup]='formGroup'>\n                            <div class='k-edit-label'>\n                                <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <input #title id='k-event-title' class='k-textbox' placeholder='Title' [formControl]='formGroup.get(fields.title)' />\n                            </div>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"startDateTimePicker.focus()\">{{ textFor('editorEventStart') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='formGroup.get(fields.start)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isStartTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"startTzPicker.focus()\">{{ textFor('editorEventStartTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #startTzPicker [formControl]='formGroup.get(fields.startTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"endDateTimePicker.focus()\">{{ textFor('editorEventEnd') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='formGroup.get(fields.end)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isEndTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"endTzPicker.focus()\">{{ textFor('editorEventEndTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #endTzPicker [formControl]='formGroup.get(fields.endTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-field' *ngIf=\"hasAllDay\">\n                                <input type='checkbox' id='k-is-allday-chkbox' class='k-checkbox' [formControl]='formGroup.get(fields.isAllDay)' />\n                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>\n                            </div>\n\n                            <div class='k-edit-field' *ngIf=\"hasStartTimeZone\">\n                                <input type='checkbox' id='k-set-timezone' class='k-checkbox'\n                                formControlName='startTimezoneCheckbox' />\n                                <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>\n\n                                <ng-container *ngIf=\"isStartTimeZoneVisible && hasEndTimeZone\">\n                                    <input type='checkbox' id='k-use-separate' class='k-checkbox' formControlName='endTimezoneCheckbox' />\n                                    <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>\n                                </ng-container>\n                            </div>\n\n                            <ng-container *ngIf=\"isEditingSeries\">\n                                <kendo-recurrence-editor\n                                    [formControl]='formGroup.get(fields.recurrenceRule)'\n                                    [start]='recurrenceStart'\n                                    [timezone]='eventTimezone'\n                                    [weekStart]='weekStart'\n                                ></kendo-recurrence-editor>\n                            </ng-container>\n\n                            <ng-container *ngIf='getFormValue(fields.description)'>\n                                <div class='k-edit-label'>\n                                    <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>\n                                </div>\n                                <div class='k-edit-field'>\n                                    <textarea id='k-event-description' class='k-textbox' [formControl]='formGroup.get(fields.description)'></textarea>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngFor='let resource of resources'>\n                                <ng-container *ngIf='getFormValue(resource.field)'>\n                                    <div class='k-edit-label'>\n                                        <label (click)=\"onResourceClick(resource)\">\n                                            {{ resource.name ? resource.name : resource.field }}\n                                        </label>\n                                    </div>\n                                    <div class='k-edit-field'>\n                                        <kendo-multiple-resource-editor\n                                            *ngIf='resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-multiple-resource-editor>\n                                        <kendo-single-resource-editor\n                                            *ngIf='!resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-single-resource-editor>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n                        </form>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf='editTemplate'>\n                <form novalidate [formGroup]='formGroup'>\n                    <ng-container [ngTemplateOutlet]='editTemplate.templateRef'\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: formGroup,\n                            formGroup: formGroup,\n                            dataItem: editedEvent,\n                            editMode: editMode,\n                            isNew: isNew\n                        }\">\n                    </ng-container>\n                </form>\n            </ng-container>\n\n            <kendo-dialog-actions>\n                <button class=\"k-button\" (click)=\"onCancel($event)\">{{ textFor('cancel') }}</button>\n                <button class=\"k-button k-primary\" (click)=\"onSave($event)\" [disabled]=\"!formGroup.valid\">{{ textFor('save') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
+            template: "\n        <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor(\"editorTitle\") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]=\"autoFocusedElement\">\n            <ng-container *ngIf='!editTemplate'>\n                <div class='k-scheduler-edit-form'>\n                    <div class='k-edit-form-container'>\n                        <form novalidate [formGroup]='formGroup'>\n                            <div class='k-edit-label'>\n                                <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='formGroup.get(fields.title)' />\n                            </div>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"startDateTimePicker.focus()\">{{ textFor('editorEventStart') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='formGroup.get(fields.start)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isStartTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"startTzPicker.focus()\">{{ textFor('editorEventStartTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #startTzPicker [formControl]='formGroup.get(fields.startTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-label'>\n                                <label (click)=\"endDateTimePicker.focus()\">{{ textFor('editorEventEnd') }}</label>\n                            </div>\n                            <div class='k-edit-field'>\n                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='formGroup.get(fields.end)'\n                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>\n                                </kendo-scheduler-datetime-picker>\n                            </div>\n\n                            <ng-container *ngIf=\"isEndTimeZoneVisible\">\n                                <div class='k-edit-label'>\n                                    <label (click)=\"endTzPicker.focus()\">{{ textFor('editorEventEndTimeZone') }}</label>\n                                </div>\n\n                                <div class='k-edit-field'>\n                                    <kendo-timezone-editor #endTzPicker [formControl]='formGroup.get(fields.endTimezone)'></kendo-timezone-editor>\n                                </div>\n                            </ng-container>\n\n                            <div class='k-edit-field' *ngIf=\"hasAllDay\">\n                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='formGroup.get(fields.isAllDay)' />\n                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>\n                            </div>\n\n                            <div class='k-edit-field' *ngIf=\"hasStartTimeZone\">\n                                <input type='checkbox' id='k-set-timezone' kendoCheckBox\n                                formControlName='startTimezoneCheckbox' />\n                                <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>\n\n                                <ng-container *ngIf=\"isStartTimeZoneVisible && hasEndTimeZone\">\n                                    <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />\n                                    <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>\n                                </ng-container>\n                            </div>\n\n                            <ng-container *ngIf=\"isEditingSeries\">\n                                <kendo-recurrence-editor\n                                    [formControl]='formGroup.get(fields.recurrenceRule)'\n                                    [start]='recurrenceStart'\n                                    [timezone]='eventTimezone'\n                                    [weekStart]='weekStart'\n                                ></kendo-recurrence-editor>\n                            </ng-container>\n\n                            <ng-container *ngIf='getFormValue(fields.description)'>\n                                <div class='k-edit-label'>\n                                    <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>\n                                </div>\n                                <div class='k-edit-field'>\n                                    <textarea id='k-event-description' kendoTextArea [formControl]='formGroup.get(fields.description)'></textarea>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngFor='let resource of resources'>\n                                <ng-container *ngIf='getFormValue(resource.field)'>\n                                    <div class='k-edit-label'>\n                                        <label (click)=\"onResourceClick(resource)\">\n                                            {{ resource.name ? resource.name : resource.field }}\n                                        </label>\n                                    </div>\n                                    <div class='k-edit-field'>\n                                        <kendo-multiple-resource-editor\n                                            *ngIf='resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-multiple-resource-editor>\n                                        <kendo-single-resource-editor\n                                            *ngIf='!resource.multiple'\n                                            [formControl]='formGroup.get(resource.field)'\n                                            [resource]='resource'>\n                                        </kendo-single-resource-editor>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n                        </form>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf='editTemplate'>\n                <form novalidate [formGroup]='formGroup'>\n                    <ng-container [ngTemplateOutlet]='editTemplate.templateRef'\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: formGroup,\n                            formGroup: formGroup,\n                            dataItem: editedEvent,\n                            editMode: editMode,\n                            isNew: isNew\n                        }\">\n                    </ng-container>\n                </form>\n            </ng-container>\n\n            <kendo-dialog-actions>\n                <button kendoButton (click)=\"onCancel($event)\">{{ textFor('cancel') }}</button>\n                <button kendoButton themeColor=\"primary\" (click)=\"onSave($event)\" [disabled]=\"!formGroup.valid\">{{ textFor('save') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [NgZone,
             EditService,

package/dist/es/editing/recurrence/end-rule-radio-button.directive.js

@@ -16,6 +16,7 @@ var EndRuleRadioButtonDirective = /** @class */ (function () {
         this.changeDetector = changeDetector;
         this.type = 'radio';
         this.radioClass = true;
+        this.radioSizeClass = true;
         this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
     }
     EndRuleRadioButtonDirective.prototype.ngOnInit = function () {
@@ -56,6 +57,10 @@ var EndRuleRadioButtonDirective = /** @class */ (function () {
         HostBinding('class.k-radio'),
         tslib_1.__metadata("design:type", Boolean)
     ], EndRuleRadioButtonDirective.prototype, "radioClass", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-radio-md'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], EndRuleRadioButtonDirective.prototype, "radioSizeClass", void 0);
     tslib_1.__decorate([
         Input("kendoRecurrenceEndRuleRadioButton"),
         tslib_1.__metadata("design:type", String)

package/dist/es/editing/recurrence/recurrence-monthly-yearly-editor.component.js

@@ -267,7 +267,7 @@ var RecurrenceMonthlyYearlyEditorComponent = /** @class */ (function () {
     RecurrenceMonthlyYearlyEditorComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-recurrence-monthly-yearly-editor',
-            template: "\n        <div class='k-edit-label'>\n            <label (click)=\"onRepeatOnLabelClick()\">{{ textForRepeatOn() }}</label>\n        </div>\n        <div class='k-edit-field'>\n            <ul class='k-reset' [style.width.px]='650'>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />\n\n                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>\n                        <ng-template [ngIf]=\"currentFreq === 'monthly'\">\n                            {{ textFor('monthlyDay') }}\n                        </ng-template>\n                    </label>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthMonthDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'monthday')\"\n                            [disabled]=\"isDisabled('monthday')\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n\n                    <kendo-numerictextbox\n                        [style.width.px]='70'\n                        [min]=\"numericOptions.min\"\n                        [max]=\"numericOptions.max\"\n                        [decimals]=\"0\"\n                        [format]=\"numericOptions.format\"\n                        [autoCorrect]=\"numericOptions.autoCorrect\"\n                        [readonly]=\"numericOptions.readonly\"\n                        [selectOnFocus]=\"numericOptions.selectOnFocus\"\n                        [spinners]=\"numericOptions.spinners\"\n                        [step]=\"numericOptions.step\"\n                        [title]=\"numericOptions.title\"\n                        [value]='monthDay'\n                        (valueChange)='onMonthDayChange($event)'\n                        [disabled]=\"isDisabled('monthday')\">\n                    </kendo-numerictextbox>\n                </li>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />\n                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>\n\n                    <kendo-dropdownlist\n                        [data]='offsetPositions'\n                        textField='text'\n                        valueField='value'\n                        [value]='offset'\n                        [valuePrimitive]='true'\n                        (valueChange)='onOffsetPositionChange($event)'\n                        [disabled]=\"isDisabled('weekday')\">\n                    </kendo-dropdownlist>\n\n                    <kendo-dropdownlist\n                        [data]=\"extendedWeekDays\"\n                        textField='text'\n                        valueField='value'\n                        [value]='weekDay'\n                        [valuePrimitive]='true'\n                        (valueChange)='onWeekDayChange($event)'\n                        [disabled]=\"isDisabled('weekday')\">\n                    </kendo-dropdownlist>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <span>{{ textFor('yearlyOf') }}</span>\n\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthWeekDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'weekday')\"\n                            [disabled]=\"isDisabled('weekday')\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n                </li>\n            </ul>\n        </div>\n    "
+            template: "\n        <div class='k-edit-label'>\n            <label (click)=\"onRepeatOnLabelClick()\">{{ textForRepeatOn() }}</label>\n        </div>\n        <div class='k-edit-field'>\n            <ul class='k-reset' [style.width.px]='650'>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />\n\n                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>\n                        <ng-template [ngIf]=\"currentFreq === 'monthly'\">\n                            {{ textFor('monthlyDay') }}\n                        </ng-template>\n                    </label>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthMonthDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'monthday')\"\n                            [disabled]=\"isDisabled('monthday')\"\n                            [style.width.px]=\"170\"\n                            [style.margin]=\"'0 .4ex 0 1ex'\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n\n                    <kendo-numerictextbox\n                        [style.width.px]='70'\n                        [min]=\"numericOptions.min\"\n                        [max]=\"numericOptions.max\"\n                        [decimals]=\"0\"\n                        [format]=\"numericOptions.format\"\n                        [autoCorrect]=\"numericOptions.autoCorrect\"\n                        [readonly]=\"numericOptions.readonly\"\n                        [selectOnFocus]=\"numericOptions.selectOnFocus\"\n                        [spinners]=\"numericOptions.spinners\"\n                        [step]=\"numericOptions.step\"\n                        [title]=\"numericOptions.title\"\n                        [value]='monthDay'\n                        (valueChange)='onMonthDayChange($event)'\n                        [disabled]=\"isDisabled('monthday')\"\n                        [style.margin]=\"'0 .4ex 0 1ex'\">\n                    </kendo-numerictextbox>\n                </li>\n                <li>\n                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />\n                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>\n\n                    <kendo-dropdownlist\n                        [data]='offsetPositions'\n                        textField='text'\n                        valueField='value'\n                        [value]='offset'\n                        [valuePrimitive]='true'\n                        (valueChange)='onOffsetPositionChange($event)'\n                        [disabled]=\"isDisabled('weekday')\"\n                        [style.width.px]=\"170\"\n                        [style.margin]=\"'0 .4ex 0 1ex'\">\n                    </kendo-dropdownlist>\n\n                    <kendo-dropdownlist\n                        [data]=\"extendedWeekDays\"\n                        textField='text'\n                        valueField='value'\n                        [value]='weekDay'\n                        [valuePrimitive]='true'\n                        (valueChange)='onWeekDayChange($event)'\n                        [disabled]=\"isDisabled('weekday')\"\n                        [style.width.px]=\"170\"\n                        [style.margin]=\"'0 .4ex 0 1ex'\">\n                    </kendo-dropdownlist>\n\n                    <ng-template [ngIf]=\"currentFreq === 'yearly'\">\n                        <span>{{ textFor('yearlyOf') }}</span>\n\n                        <kendo-dropdownlist\n                            [data]='months'\n                            textField='text'\n                            valueField='value'\n                            [value]='currentMonthWeekDay'\n                            [valuePrimitive]='true'\n                            (valueChange)=\"onMonthChange($event, 'weekday')\"\n                            [disabled]=\"isDisabled('weekday')\"\n                            [style.width.px]=\"170\"\n                            [style.margin]=\"'0 .4ex 0 1ex'\">\n                        </kendo-dropdownlist>\n                    </ng-template>\n                </li>\n            </ul>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [RecurrenceService,
             LocalizationService])

package/dist/es/editing/recurrence/repeat-on-radio-button.directive.js

@@ -16,6 +16,7 @@ var RepeatOnRadioButtonDirective = /** @class */ (function () {
         this.changeDetector = changeDetector;
         this.type = 'radio';
         this.radioClass = true;
+        this.radioSizeClass = true;
         this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
     }
     Object.defineProperty(RepeatOnRadioButtonDirective.prototype, "repeatOnRule", {
@@ -65,6 +66,10 @@ var RepeatOnRadioButtonDirective = /** @class */ (function () {
         HostBinding('class.k-radio'),
         tslib_1.__metadata("design:type", Boolean)
     ], RepeatOnRadioButtonDirective.prototype, "radioClass", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-radio-md'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], RepeatOnRadioButtonDirective.prototype, "radioSizeClass", void 0);
     tslib_1.__decorate([
         Input("kendoRecurrenceRepeatOnRadioButton"),
         tslib_1.__metadata("design:type", String),

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

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { SlotDragEvent } from './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;
+}(SlotDragEvent));
+export { SlotDragEndEvent };

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

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

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

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { PreventableEvent } from './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;
+}(PreventableEvent));
+export { SlotDragStartEvent };

package/dist/es/events.js

@@ -20,3 +20,6 @@ export { DragEvent } from './events/drag-event';
 export { DragEndEvent } from './events/drag-end-event';
 export { EditEvent } from './events/edit-event';
 export { AddEvent } from './events/add-event';
+export { SlotDragStartEvent } from './events/slot-drag-start-event';
+export { SlotDragEvent } from './events/slot-drag-event';
+export { SlotDragEndEvent } from './events/slot-drag-end-event';

package/dist/es/index.js

@@ -59,6 +59,7 @@ export { HintContainerComponent } from './views/common/hint-container.component'
 export { RepeatPipe } from './views/common/repeat.pipe';
 export { ResizeHintComponent } from './views/common/resize-hint.component';
 export { ResourceIteratorPipe } from './views/common/resource-iterator.pipe';
+export { SlotSelectableDirective } from './views/common/slot-selectable.directive';
 export { ViewFooterComponent } from './views/common/view-footer.component';
 export { ViewsSharedModule } from './views/common/views-shared.module';
 export { WorkHoursFooterDirective } from './views/common/work-hours-footer.directive';

package/dist/es/package-metadata.js

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

package/dist/es/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';
 var todayDate = function () { return getDate(new Date()); };
 var ɵ0 = todayDate;
 var DAYS_IN_WEEK = 7;
@@ -85,6 +88,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.
          */
@@ -136,6 +145,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 = alwaysFalse;
         /**
          * @hidden
          */
@@ -210,6 +224,18 @@ var SchedulerComponent = /** @class */ (function () {
          * 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.
          */
@@ -400,6 +426,30 @@ var SchedulerComponent = /** @class */ (function () {
                 _this.resizeSensor.acceptSize();
             }
         }));
+        this.subs.add(this.viewState.slotSelectionStart
+            .subscribe(function (e) {
+            if (hasObservers(_this.slotDragStart)) {
+                _this.zone.run(function () {
+                    _this.slotDragStart.emit(Object.assign(e, { sender: _this }));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionDrag
+            .subscribe(function (value) {
+            if (hasObservers(_this.slotDrag)) {
+                _this.zone.run(function () {
+                    _this.slotDrag.emit(new SlotDragEvent(_this, value));
+                });
+            }
+        }));
+        this.subs.add(this.viewState.slotSelectionEnd
+            .subscribe(function (value) {
+            if (hasObservers(_this.slotDragEnd)) {
+                _this.zone.run(function () {
+                    _this.slotDragEnd.emit(new SlotDragEndEvent(_this, value));
+                });
+            }
+        }));
         this.onViewIndexChange();
         this.notifyOptionsChange = this.notifyOptionsChange.bind(this);
         this.subs.add(this.allDayEventTemplate.changes.subscribe(this.notifyOptionsChange));
@@ -451,7 +501,7 @@ var SchedulerComponent = /** @class */ (function () {
         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);
         }
@@ -704,6 +754,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,
@@ -711,6 +762,7 @@ var SchedulerComponent = /** @class */ (function () {
             columnWidth: this.columnWidth,
             eventClass: this.eventClass,
             eventStyles: this.eventStyles,
+            isSlotSelected: this.isSlotSelected,
             changes: changes
         });
     };
@@ -864,6 +916,10 @@ var SchedulerComponent = /** @class */ (function () {
         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)
@@ -977,6 +1033,10 @@ var SchedulerComponent = /** @class */ (function () {
         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)
@@ -1049,6 +1109,18 @@ var SchedulerComponent = /** @class */ (function () {
         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/es/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';
 var TEMPLATES = [
     AgendaDateTemplateDirective,
     AgendaTimeTemplateDirective,
@@ -75,6 +76,7 @@ var declarations = [
     DataBindingDirective,
     ShortcutsDirective,
     ReactiveEditingDirective,
+    SlotSelectableDirective,
     SchedulerDateTimePickerComponent,
     RecurrenceEditorComponent,
     RecurrenceEndRuleEditorComponent,
@@ -104,6 +106,8 @@ var publicDirectives = [
 ].concat(declarations);
 var importedKendoModules = [
     ButtonsModule,
+    CheckBoxModule,
+    TextAreaModule,
     DateInputsModule,
     DialogModule,
     NumericTextBoxModule,

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

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

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

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* 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.
+ */
+var IsSlotSelectedArgs = /** @class */ (function () {
+    function IsSlotSelectedArgs() {
+    }
+    return IsSlotSelectedArgs;
+}());
+export { IsSlotSelectedArgs };
+/**
+ * @hidden
+ */
+export var slotDragEventName;
+(function (slotDragEventName) {
+    slotDragEventName["initDragSelect"] = "initDragSelect";
+    slotDragEventName["dragSelect"] = "dragSelect";
+    slotDragEventName["refreshSlotSelection"] = "refreshSlotSelection";
+    slotDragEventName["dragSelectRelease"] = "dragSelectRelease";
+})(slotDragEventName || (slotDragEventName = {}));

package/dist/es/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';