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

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

@@ -142,7 +142,7 @@ var TimelineMultiDayViewComponent = /** @class */ (function (_super) {
             providers: [
                 DayTimeSlotService
             ],
-            template: "\n        <div class=\"k-scheduler-layout k-scheduler-flex-layout\" [ngClass]=\"classNames\">\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #timesHeader>\n                    <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                        <tr><th></th></tr>\n                        <tr><th class=\"k-slot-cell\"></th></tr>\n                        <tr *ngFor=\"let resource of horizontalResources; trackBy: itemIndex;\">\n                            <th></th>\n                        </tr>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-header k-state-default\" #header >\n                    <div class=\"k-scheduler-header-wrap\" #headerWrap>\n                        <ng-container *ngIf=\"showCurrentTime\">\n                            <div *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                                #currentTimeArrow class=\"k-current-time k-current-time-arrow-down\">\n                            </div>\n                        </ng-container>\n                        <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                            <colgroup>\n                                <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                            </colgroup>\n                            <tr *ngFor=\"let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                <th *ngFor=\"let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;\"\n                                    class=\"k-slot-cell\" [attr.colspan]=\"horizontalColspan(resourceIndex)\">\n                                    <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(item, resource.textField) }}</ng-container>\n                                    <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                                </th>\n                            </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\">\n                                     <ng-container *ngFor=\"let daySlot of daySlots; let index = index; trackBy: itemIndex;\">\n                                         <th [attr.colspan]=\"timeSlots.length\" class=\"k-slot-cell\">\n                                             <span *ngIf=\"!dateHeaderTemplateRef\" class=\"k-link\" [ngClass]=\"{ 'k-nav-day': numberOfDays > 1 }\" [attr.data-dayslot-index]=\"index\">{{ daySlot.start | kendoDate: 'm'}}</span>\n                                             <ng-container *ngIf=\"dateHeaderTemplateRef\" [ngTemplateOutlet]=\"dateHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: daySlot.start }\"></ng-container>\n                                         </th>\n                                     </ng-container>\n                                 </ng-container>\n                             </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;\">\n                                    <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                        <ng-container *ngFor=\"let timeSlot of timeSlots; let index = index; trackBy: itemIndex;\">\n                                            <th *ngIf=\"timeSlot.isMajor\" [attr.colspan]=\"timeColspan(index)\" >{{ timeSlot.start | kendoDate: 't' }}</th>\n                                        </ng-container>\n                                    </ng-container>\n                                 </ng-container>\n                             </tr>\n                        </table>\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #times>\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <tr *ngIf=\"!verticalResources.length\">\n                            <th rowspan=\"1\" #titleCell>\n                                {{ allEventsMessage }}\n                            </th>\n                        </tr>\n                        <ng-container *ngIf=\"verticalResources.length\">\n                            <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;\">\n                                <tr #verticalResourceRows>\n                                    <ng-container *ngFor=\"let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                        <th *ngIf=\"verticalItem(leafIndex, resourceIndex)\" [attr.rowspan]=\"verticalRowspan(resourceIndex)\" class=\"k-slot-cell\">\n                                            <div>\n                                                <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>\n                                                <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                                    [ngTemplateOutletContext]=\"{ resource: verticalItem(leafIndex, resourceIndex) }\"></ng-container>\n                                            </div>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </ng-container>\n                        </ng-container>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-content\" #content>\n                    <ng-container *ngIf=\"showCurrentTime\">\n                        <div *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                            class=\"k-current-time\" #currentTimeMarker>\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table\" #contentTable role=\"presentation\">\n                        <colgroup>\n                            <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                        </colgroup>\n                        <tr *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;\">\n                            <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;\">\n                                <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                    <td *ngFor=\"let slot of timeSlots; let index = index; trackBy: itemIndex;\"\n                                            [ngClass]=\"timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)\"\n                                            timeSlot #timeSlot=\"timeSlot\"\n                                            [date]=\"daySlot.start\"\n                                            [invariantStart]=\"slot.start\"\n                                            [invariantEnd]=\"slot.end\"\n                                            [workDayStart]=\"workDayStartTime\"\n                                            [workDayEnd]=\"workDayEndTime\"\n                                            [workWeekStart]=\"workWeekStart\"\n                                            [workWeekEnd]=\"workWeekEnd\"\n                                            [id]=\"{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }\"\n                                    >\n                                        <ng-container *ngIf=\"timeSlotTemplateRef\" [ngTemplateOutlet]=\"timeSlotTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ date: timeSlot.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }\">\n                                        </ng-container>\n                                    </td>\n                                </ng-container>\n                            </ng-container>\n                        </tr>\n                    </table>\n                    <ng-container *ngFor=\"let item of items | async; trackBy: itemIndex;\">\n                        <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                            [ngClass]=\"getEventClasses(item, itemResource.resources)\"\n                            [ngStyle]=\"getEventStyles(item, itemResource)\"\n                            [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                            dayTimeViewItem\n                                [editable]=\"editable\"\n                                [item]=\"item\"\n                                [index]=\"item.index\"\n                                [rangeIndex]=\"item.rangeIndex\"\n                                [eventTemplate]=\"eventTemplateRef\"\n                                [resources]=\"itemResource.resources\"\n                                [resourceIndex]=\"itemResource.leafIdx\">\n                        </div>\n                    </ng-container>\n                    <kendo-hint-container #hintContainer>\n                        <ng-template>\n                            <div *ngFor=\"let hint of dragHints; trackBy: itemIndex;\"\n                                class=\"k-event-drag-hint\"\n                                dayTimeViewItem\n                                    [ngStyle]=\"hint.style\"\n                                    [ngClass]=\"hint.class\"\n                                    [dragHint]=\"true\"\n                                    [eventTemplate]=\"eventTemplateRef\"\n                                    [item]=\"hint.item\"\n                                    [resources]=\"hint.resources\">\n                            </div>\n                            <div *ngIf=\"resizeHints && resizeHints.length\"\n                                kendoResizeHint\n                                [hint]=\"resizeHints[0]\"\n                                [ngClass]=\"resizeHints[0].class\"\n                                [format]=\"resizeHintFormat\">\n                            </div>\n                        </ng-template>\n                    </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-scheduler-layout k-scheduler-flex-layout\" [ngClass]=\"classNames\">\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #timesHeader>\n                    <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                        <tr><th></th></tr>\n                        <tr><th class=\"k-slot-cell\"></th></tr>\n                        <tr *ngFor=\"let resource of horizontalResources; trackBy: itemIndex;\">\n                            <th></th>\n                        </tr>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-header k-state-default\" #header >\n                    <div class=\"k-scheduler-header-wrap\" #headerWrap>\n                        <ng-container *ngIf=\"showCurrentTime\">\n                            <div *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                                #currentTimeArrow class=\"k-current-time k-current-time-arrow-down\">\n                            </div>\n                        </ng-container>\n                        <table class=\"k-scheduler-table\" aria-hidden=\"true\">\n                            <colgroup>\n                                <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                            </colgroup>\n                            <tr *ngFor=\"let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                <th *ngFor=\"let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;\"\n                                    class=\"k-slot-cell\" [attr.colspan]=\"horizontalColspan(resourceIndex)\">\n                                    <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(item, resource.textField) }}</ng-container>\n                                    <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{ resource: item }\"></ng-container>\n                                </th>\n                            </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\">\n                                     <ng-container *ngFor=\"let daySlot of daySlots; let index = index; trackBy: itemIndex;\">\n                                         <th [attr.colspan]=\"timeSlots.length\" class=\"k-slot-cell\">\n                                             <span *ngIf=\"!dateHeaderTemplateRef\" class=\"k-link\" [ngClass]=\"{ 'k-nav-day': numberOfDays > 1 }\" [attr.data-dayslot-index]=\"index\">{{ daySlot.start | kendoDate: 'm'}}</span>\n                                             <ng-container *ngIf=\"dateHeaderTemplateRef\" [ngTemplateOutlet]=\"dateHeaderTemplateRef\" [ngTemplateOutletContext]=\"{ date: daySlot.start }\"></ng-container>\n                                         </th>\n                                     </ng-container>\n                                 </ng-container>\n                             </tr>\n                             <tr>\n                                 <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;\">\n                                    <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                        <ng-container *ngFor=\"let timeSlot of timeSlots; let index = index; trackBy: itemIndex;\">\n                                            <th *ngIf=\"timeSlot.isMajor\" [attr.colspan]=\"timeColspan(index)\" >{{ timeSlot.start | kendoDate: 't' }}</th>\n                                        </ng-container>\n                                    </ng-container>\n                                 </ng-container>\n                             </tr>\n                        </table>\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-scheduler-pane\">\n                <div class=\"k-scheduler-times\" #times>\n                    <table class=\"k-scheduler-table\" #timesTable aria-hidden=\"true\">\n                        <tr *ngIf=\"!verticalResources.length\">\n                            <th rowspan=\"1\" #titleCell>\n                                {{ allEventsMessage }}\n                            </th>\n                        </tr>\n                        <ng-container *ngIf=\"verticalResources.length\">\n                            <ng-container *ngFor=\"let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;\">\n                                <tr #verticalResourceRows>\n                                    <ng-container *ngFor=\"let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;\">\n                                        <th *ngIf=\"verticalItem(leafIndex, resourceIndex)\" [attr.rowspan]=\"verticalRowspan(resourceIndex)\" class=\"k-slot-cell\">\n                                            <div>\n                                                <ng-container *ngIf=\"!groupHeaderTemplateRef\">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>\n                                                <ng-container *ngIf=\"groupHeaderTemplateRef\" [ngTemplateOutlet]=\"groupHeaderTemplateRef\"\n                                                    [ngTemplateOutletContext]=\"{ resource: verticalItem(leafIndex, resourceIndex) }\"></ng-container>\n                                            </div>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </ng-container>\n                        </ng-container>\n                    </table>\n                </div>\n                <div class=\"k-scheduler-content\" #content>\n                    <ng-container *ngIf=\"showCurrentTime\">\n                        <div *ngFor=\"let resource of horizontalResources | resourceIterator; trackBy: itemIndex;\"\n                            class=\"k-current-time\" #currentTimeMarker>\n                        </div>\n                    </ng-container>\n                    <table class=\"k-scheduler-table k-user-select-none\" #contentTable role=\"presentation\">\n                        <colgroup>\n                            <col *ngFor=\"let slotIndex of slotsCount | repeat; trackBy: itemIndex;\" [ngStyle]=\"{ 'width.px': columnWidth }\" />\n                        </colgroup>\n                        <tr *ngFor=\"let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;\">\n                            <ng-container *ngFor=\"let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;\">\n                                <ng-container *ngFor=\"let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;\">\n                                    <td *ngFor=\"let slot of timeSlots; let index = index; trackBy: itemIndex;\"\n                                            [ngClass]=\"timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)\"\n                                            timeSlot #timeSlot=\"timeSlot\"\n                                            [date]=\"daySlot.start\"\n                                            [invariantStart]=\"slot.start\"\n                                            [invariantEnd]=\"slot.end\"\n                                            [workDayStart]=\"workDayStartTime\"\n                                            [workDayEnd]=\"workDayEndTime\"\n                                            [workWeekStart]=\"workWeekStart\"\n                                            [workWeekEnd]=\"workWeekEnd\"\n                                            selectableSlot\n                                            [id]=\"{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }\"\n                                            [class.k-state-selected]=\"isSlotSelected({\n                                                start: toPlainDateTime(daySlot.start, slot.start),\n                                                end: toPlainDateTime(daySlot.start, slot.end),\n                                                isAllDay: false,\n                                                resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)\n                                            })\"\n                                    >\n                                        <ng-container *ngIf=\"timeSlotTemplateRef\" [ngTemplateOutlet]=\"timeSlotTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{ date: timeSlot.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }\">\n                                        </ng-container>\n                                    </td>\n                                </ng-container>\n                            </ng-container>\n                        </tr>\n                    </table>\n                    <ng-container *ngFor=\"let item of items | async; trackBy: itemIndex;\">\n                        <div *ngFor=\"let itemResource of item.resources; trackBy: itemIndex;\"\n                            [ngClass]=\"getEventClasses(item, itemResource.resources)\"\n                            [ngStyle]=\"getEventStyles(item, itemResource)\"\n                            [kendoSchedulerFocusIndex]=\"itemResource.leafIdx\"\n                            dayTimeViewItem\n                                [editable]=\"editable\"\n                                [item]=\"item\"\n                                [index]=\"item.index\"\n                                [rangeIndex]=\"item.rangeIndex\"\n                                [eventTemplate]=\"eventTemplateRef\"\n                                [resources]=\"itemResource.resources\"\n                                [resourceIndex]=\"itemResource.leafIdx\">\n                        </div>\n                    </ng-container>\n                    <kendo-hint-container #hintContainer>\n                        <ng-template>\n                            <div *ngFor=\"let hint of dragHints; trackBy: itemIndex;\"\n                                class=\"k-event-drag-hint\"\n                                dayTimeViewItem\n                                    [ngStyle]=\"hint.style\"\n                                    [ngClass]=\"hint.class\"\n                                    [dragHint]=\"true\"\n                                    [eventTemplate]=\"eventTemplateRef\"\n                                    [item]=\"hint.item\"\n                                    [resources]=\"hint.resources\">\n                            </div>\n                            <div *ngIf=\"resizeHints && resizeHints.length\"\n                                kendoResizeHint\n                                [hint]=\"resizeHints[0]\"\n                                [ngClass]=\"resizeHints[0].class\"\n                                [format]=\"resizeHintFormat\">\n                            </div>\n                        </ng-template>\n                    </kendo-hint-container>\n                </div>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             ChangeDetectorRef,

package/dist/es/views/utils.js

@@ -72,6 +72,24 @@ export function toUTCDateTime(localDate) {
 export function dateWithTime(target, time) {
     return new Date(target.getFullYear(), target.getMonth(), target.getDate(), time.getHours(), time.getMinutes());
 }
+/**
+ * @hidden
+ * Flips the start and end values of a slot selection based on whether
+ * the last dragged-over slot is before or after the slot where the selection began.
+ */
+export function normaliseRangeStartAndEnd(selectionOrigin, currentSlot) {
+    var start;
+    var end;
+    if (currentSlot.end <= selectionOrigin.end) {
+        end = selectionOrigin.end;
+        start = currentSlot.start;
+    }
+    else {
+        start = selectionOrigin.start;
+        end = currentSlot.end;
+    }
+    return { start: start, end: end };
+}
 function getDataIdx(value, resource) {
     var data = resource.data;
     for (var dataIdx = 0; dataIdx < data.length; dataIdx++) {
@@ -180,6 +198,33 @@ export function assignTasksResources(tasks, options) {
         task.resources = eventResources(task.event, options);
     }
 }
+/**
+ * @hidden
+ */
+export function isEmptyResource(resources) {
+    return Array.isArray(resources) && resources.length === 1 && resources[0] === undefined;
+}
+/**
+ * @hidden
+ */
+export function resourcesMatch(res1, res2) {
+    if (res1.length !== res2.length) {
+        return false;
+    }
+    if (isEmptyResource(res1) && isEmptyResource(res2)) {
+        return true;
+    }
+    return res1.every(function (r1) { return res2.some(function (r2) { return r2.value === r1.value; }); });
+}
+/**
+ * @hidden
+ */
+export function isSameRange(range1, range2) {
+    return (range1.start.getTime() === range2.start.getTime() &&
+        range1.end.getTime() === range2.end.getTime() &&
+        range1.isAllDay === range2.isAllDay &&
+        resourcesMatch(range1.resources, range2.resources));
+}
 /** @hidden */
 export function findRowIndex(events, data) {
     if (data.rowIndex !== undefined) {
@@ -284,3 +329,7 @@ export var isWorkWeekDay = function (day, start, end) {
     }
     return start <= day && day <= end;
 };
+/**
+ * @hidden
+ */
+export var alwaysFalse = function () { return false; };

package/dist/es/views/view-state.service.js

@@ -23,12 +23,18 @@ var ViewStateService = /** @class */ (function () {
         this.viewEventSource = new Subject();
         this.layoutEndSource = new Subject();
         this.optionsChangeSource = new Subject();
+        this.slotSelectionStartSource = new Subject();
+        this.slotSelectionStartDragSource = new Subject();
+        this.slotSelectionStartEndSource = new Subject();
         this.dateRange = this.dateRangeSource.asObservable();
         this.nextDate = this.nextDateSource.asObservable();
         this.navigate = this.navigateSource.asObservable();
         this.viewEvent = this.viewEventSource.asObservable();
         this.layoutEnd = this.layoutEndSource.asObservable();
         this.optionsChange = this.optionsChangeSource.asObservable();
+        this.slotSelectionStart = this.slotSelectionStartSource.asObservable();
+        this.slotSelectionDrag = this.slotSelectionStartDragSource.asObservable();
+        this.slotSelectionEnd = this.slotSelectionStartEndSource.asObservable();
     }
     /**
      * Publishes the date that will be displayed by the Scheduler
@@ -72,6 +78,18 @@ var ViewStateService = /** @class */ (function () {
             args: args
         });
     };
+    /** @hidden */
+    ViewStateService.prototype.notifySlotSelectionStart = function (selection) {
+        this.slotSelectionStartSource.next(selection);
+    };
+    /** @hidden */
+    ViewStateService.prototype.notifySlotSelectionDrag = function (selection) {
+        this.slotSelectionStartDragSource.next(selection);
+    };
+    /** @hidden */
+    ViewStateService.prototype.notifySlotSelectionEnd = function (selection) {
+        this.slotSelectionStartEndSource.next(selection);
+    };
     ViewStateService = tslib_1.__decorate([
         Injectable(),
         tslib_1.__metadata("design:paramtypes", [])

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

@@ -85,7 +85,13 @@ SchedulerDateTimePickerComponent = tslib_1.__decorate([
         [(value)]='date'
         (valueChange)='onValueChange($event)'
     ></kendo-timepicker>
-    `
+    `,
+        styles: [`
+        kendo-datepicker,
+        kendo-timepicker {
+            width: 170px;
+        }
+    `]
     })
 ], SchedulerDateTimePickerComponent);
 export { SchedulerDateTimePickerComponent };

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

@@ -257,7 +257,7 @@ EditDialogComponent = tslib_1.__decorate([
                                 <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
                             </div>
                             <div class='k-edit-field'>
-                                <input #title id='k-event-title' class='k-textbox' placeholder='Title' [formControl]='formGroup.get(fields.title)' />
+                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='formGroup.get(fields.title)' />
                             </div>
 
                             <div class='k-edit-label'>
@@ -299,17 +299,17 @@ EditDialogComponent = tslib_1.__decorate([
                             </ng-container>
 
                             <div class='k-edit-field' *ngIf="hasAllDay">
-                                <input type='checkbox' id='k-is-allday-chkbox' class='k-checkbox' [formControl]='formGroup.get(fields.isAllDay)' />
+                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='formGroup.get(fields.isAllDay)' />
                                 <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
                             </div>
 
                             <div class='k-edit-field' *ngIf="hasStartTimeZone">
-                                <input type='checkbox' id='k-set-timezone' class='k-checkbox'
+                                <input type='checkbox' id='k-set-timezone' kendoCheckBox
                                 formControlName='startTimezoneCheckbox' />
                                 <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
 
                                 <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
-                                    <input type='checkbox' id='k-use-separate' class='k-checkbox' formControlName='endTimezoneCheckbox' />
+                                    <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
                                     <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
                                 </ng-container>
                             </div>
@@ -328,7 +328,7 @@ EditDialogComponent = tslib_1.__decorate([
                                     <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
                                 </div>
                                 <div class='k-edit-field'>
-                                    <textarea id='k-event-description' class='k-textbox' [formControl]='formGroup.get(fields.description)'></textarea>
+                                    <textarea id='k-event-description' kendoTextArea [formControl]='formGroup.get(fields.description)'></textarea>
                                 </div>
                             </ng-container>
 
@@ -373,8 +373,8 @@ EditDialogComponent = tslib_1.__decorate([
             </ng-container>
 
             <kendo-dialog-actions>
-                <button class="k-button" (click)="onCancel($event)">{{ textFor('cancel') }}</button>
-                <button class="k-button k-primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
+                <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
+                <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
     `

package/dist/es2015/editing/recurrence/end-rule-radio-button.directive.d.ts

@@ -14,6 +14,7 @@ export declare class EndRuleRadioButtonDirective implements OnInit, AfterContent
     private changeDetector;
     type: string;
     radioClass: boolean;
+    radioSizeClass: boolean;
     endRuleId: string;
     private destroyChange;
     private endRule;

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

@@ -16,6 +16,7 @@ let EndRuleRadioButtonDirective = class EndRuleRadioButtonDirective {
         this.changeDetector = changeDetector;
         this.type = 'radio';
         this.radioClass = true;
+        this.radioSizeClass = true;
         this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
     }
     ngOnInit() {
@@ -53,6 +54,10 @@ tslib_1.__decorate([
     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/es2015/editing/recurrence/recurrence-monthly-yearly-editor.component.js

@@ -263,7 +263,9 @@ RecurrenceMonthlyYearlyEditorComponent = tslib_1.__decorate([
                             [value]='currentMonthMonthDay'
                             [valuePrimitive]='true'
                             (valueChange)="onMonthChange($event, 'monthday')"
-                            [disabled]="isDisabled('monthday')">
+                            [disabled]="isDisabled('monthday')"
+                            [style.width.px]="170"
+                            [style.margin]="'0 .4ex 0 1ex'">
                         </kendo-dropdownlist>
                     </ng-template>
 
@@ -281,7 +283,8 @@ RecurrenceMonthlyYearlyEditorComponent = tslib_1.__decorate([
                         [title]="numericOptions.title"
                         [value]='monthDay'
                         (valueChange)='onMonthDayChange($event)'
-                        [disabled]="isDisabled('monthday')">
+                        [disabled]="isDisabled('monthday')"
+                        [style.margin]="'0 .4ex 0 1ex'">
                     </kendo-numerictextbox>
                 </li>
                 <li>
@@ -295,7 +298,9 @@ RecurrenceMonthlyYearlyEditorComponent = tslib_1.__decorate([
                         [value]='offset'
                         [valuePrimitive]='true'
                         (valueChange)='onOffsetPositionChange($event)'
-                        [disabled]="isDisabled('weekday')">
+                        [disabled]="isDisabled('weekday')"
+                        [style.width.px]="170"
+                        [style.margin]="'0 .4ex 0 1ex'">
                     </kendo-dropdownlist>
 
                     <kendo-dropdownlist
@@ -305,7 +310,9 @@ RecurrenceMonthlyYearlyEditorComponent = tslib_1.__decorate([
                         [value]='weekDay'
                         [valuePrimitive]='true'
                         (valueChange)='onWeekDayChange($event)'
-                        [disabled]="isDisabled('weekday')">
+                        [disabled]="isDisabled('weekday')"
+                        [style.width.px]="170"
+                        [style.margin]="'0 .4ex 0 1ex'">
                     </kendo-dropdownlist>
 
                     <ng-template [ngIf]="currentFreq === 'yearly'">
@@ -318,7 +325,9 @@ RecurrenceMonthlyYearlyEditorComponent = tslib_1.__decorate([
                             [value]='currentMonthWeekDay'
                             [valuePrimitive]='true'
                             (valueChange)="onMonthChange($event, 'weekday')"
-                            [disabled]="isDisabled('weekday')">
+                            [disabled]="isDisabled('weekday')"
+                            [style.width.px]="170"
+                            [style.margin]="'0 .4ex 0 1ex'">
                         </kendo-dropdownlist>
                     </ng-template>
                 </li>

package/dist/es2015/editing/recurrence/repeat-on-radio-button.directive.d.ts

@@ -14,6 +14,7 @@ export declare class RepeatOnRadioButtonDirective implements OnInit, AfterConten
     private changeDetector;
     type: string;
     radioClass: boolean;
+    radioSizeClass: boolean;
     repeatOnRule: string;
     private destroyChange;
     private _repeatOnRule;

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

@@ -16,6 +16,7 @@ let RepeatOnRadioButtonDirective = class RepeatOnRadioButtonDirective {
         this.changeDetector = changeDetector;
         this.type = 'radio';
         this.radioClass = true;
+        this.radioSizeClass = true;
         this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
     }
     /* tslint:disable-next-line:no-input-rename */
@@ -58,6 +59,10 @@ tslib_1.__decorate([
     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/es2015/events/slot-drag-end-event.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SlotDragEvent } from './slot-drag-event';
+/**
+ * Arguments for the `slotDragEnd` event.
+ */
+export declare class SlotDragEndEvent extends SlotDragEvent {
+}

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

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SlotDragEvent } from './slot-drag-event';
+/**
+ * Arguments for the `slotDragEnd` event.
+ */
+export class SlotDragEndEvent extends SlotDragEvent {
+}

package/dist/es2015/events/slot-drag-event.d.ts

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SchedulerComponent } from '../scheduler.component';
+import { ExtendedSlotRange } from '../types/slot-selection';
+/**
+ * Arguments for the `slotDrag` event.
+ */
+export declare class SlotDragEvent implements ExtendedSlotRange {
+    /**
+     * 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.
+     */
+    isAllDay: boolean;
+    /**
+     * The resources for the slot, if grouping by resource; otherwise all Scheduler resources.
+     */
+    resources: any[];
+    /**
+     * The original DOM event.
+     */
+    originalEvent: PointerEvent;
+    /**
+     * A reference to the Scheduler instance that triggered the event.
+     */
+    sender: SchedulerComponent;
+    /**
+     * @hidden
+     */
+    constructor(sender: SchedulerComponent, args: ExtendedSlotRange);
+}

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

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* 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.
+ */
+export class SlotDragEvent {
+    /**
+     * @hidden
+     */
+    constructor(sender, args) {
+        this.sender = sender;
+        Object.assign(this, args);
+    }
+}

package/dist/es2015/events/slot-drag-start-event.d.ts

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SchedulerComponent } from '../scheduler.component';
+import { ExtendedSlotRange } from '../types/slot-selection';
+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.
+ */
+export declare class SlotDragStartEvent extends PreventableEvent implements ExtendedSlotRange {
+    /**
+     * 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.
+     */
+    isAllDay: boolean;
+    /**
+     * The resources for the slot, if grouping by resource; otherwise all Scheduler resources.
+     */
+    resources: any[];
+    /**
+     * The original DOM event.
+     */
+    originalEvent: PointerEvent;
+    /**
+     * A reference to the Scheduler instance that triggered the event.
+     */
+    sender: SchedulerComponent;
+    /**
+     * @hidden
+     */
+    constructor(sender: SchedulerComponent, args: ExtendedSlotRange);
+}

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

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+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.
+ */
+export class SlotDragStartEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(sender, args) {
+        super();
+        this.sender = sender;
+        Object.assign(this, args);
+    }
+}

package/dist/es2015/events.d.ts

@@ -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/es2015/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/es2015/index.d.ts

@@ -46,6 +46,7 @@ export { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 export { ToolbarComponent } from './toolbar/toolbar.component';
 export { ToolbarModule, publicDirectives } from './toolbar/toolbar.module';
 export { ToolbarViewSelectorComponent } from './toolbar/view-selector.component';
+export { ExtendedSlotRange } from './types/slot-selection';
 export { AgendaHeaderItemComponent } from './views/agenda/agenda-header-item.component';
 export { AgendaHeaderComponent } from './views/agenda/agenda-header.component';
 export { AgendaTaskItemComponent } from './views/agenda/agenda-task-item.component';
@@ -59,6 +60,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/es2015/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';