@progress/kendo-angular-dateinputs 16.0.0-develop.12 → 16.0.0-develop.14

package/fesm2020/progress-kendo-angular-dateinputs.mjs

@@ -9,7 +9,7 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i12 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1714462722,
-    version: '16.0.0-develop.12',
+    publishDate: 1715100988,
+    version: '16.0.0-develop.14',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -103,6 +103,10 @@ const currentFocusTarget = (blurArgs) => blurArgs.relatedTarget || document.acti
  * @hidden
  */
 const isPresent = (value) => value !== undefined && value !== null;
+/**
+ * @hidden
+ */
+const isNullOrDate = (value) => value === null || value instanceof Date;
 /**
  * @hidden
  */
@@ -630,7 +634,7 @@ class CenturyViewService {
         return range(0, count).map(i => addCenturies(start, i));
     }
     data(options) {
-        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate } = options;
+        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, allowReverse } = options;
         if (!viewDate) {
             return EMPTY_DATA$3;
         }
@@ -646,10 +650,30 @@ class CenturyViewService {
                 if (!this.isInRange(cellDate, min, max) || nextCentury) {
                     return null;
                 }
-                const isRangeStart = this.isEqual(cellDate, selectionRange.start);
-                const isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                let isRangeStart = false;
+                let isRangeEnd = false;
+                if (allowReverse) {
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start <= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end <= selectionRange.start)) {
+                        isRangeStart = true;
+                    }
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start >= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end >= selectionRange.start)) {
+                        isRangeEnd = true;
+                    }
+                }
+                else {
+                    isRangeStart = this.isEqual(cellDate, selectionRange.start);
+                    isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                }
                 const isInMiddle = !isRangeStart && !isRangeEnd;
-                const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                let isRangeMid;
+                if (allowReverse) {
+                    isRangeMid = isInMiddle && (isInSelectionRange(cellDate, selectionRange) || isInSelectionRange(cellDate, { start: selectionRange.end, end: selectionRange.start }));
+                }
+                else {
+                    isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                }
                 return {
                     formattedValue: this.value(cellDate),
                     id: `${cellUID}${cellDate.getTime()}`,
@@ -663,7 +687,8 @@ class CenturyViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -816,7 +841,7 @@ class DecadeViewService {
         return range(0, count).map(i => addDecades(start, i));
     }
     data(options) {
-        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate } = options;
+        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, allowReverse } = options;
         if (!viewDate) {
             return EMPTY_DATA$2;
         }
@@ -832,10 +857,30 @@ class DecadeViewService {
                 if (!this.isInRange(cellDate, min, max) || nextDecade) {
                     return null;
                 }
-                const isRangeStart = this.isEqual(cellDate, selectionRange.start);
-                const isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                let isRangeStart = false;
+                let isRangeEnd = false;
+                if (allowReverse) {
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start <= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end <= selectionRange.start)) {
+                        isRangeStart = true;
+                    }
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start >= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end >= selectionRange.start)) {
+                        isRangeEnd = true;
+                    }
+                }
+                else {
+                    isRangeStart = this.isEqual(cellDate, selectionRange.start);
+                    isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                }
                 const isInMiddle = !isRangeStart && !isRangeEnd;
-                const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                let isRangeMid;
+                if (allowReverse) {
+                    isRangeMid = isInMiddle && (isInSelectionRange(cellDate, selectionRange) || isInSelectionRange(cellDate, { start: selectionRange.end, end: selectionRange.start }));
+                }
+                else {
+                    isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                }
                 return {
                     formattedValue: this.value(cellDate),
                     id: `${cellUID}${cellDate.getTime()}`,
@@ -849,7 +894,8 @@ class DecadeViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -982,7 +1028,7 @@ class MonthViewService {
         return range(0, count).map(i => addMonths(start, i));
     }
     data(options) {
-        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, isDateDisabled = () => false } = options;
+        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, isDateDisabled = () => false, allowReverse } = options;
         if (!viewDate) {
             return EMPTY_DATA$1;
         }
@@ -1004,10 +1050,30 @@ class MonthViewService {
                 if (outOfRange) {
                     return null;
                 }
-                const isRangeStart = this.isEqual(cellDate, selectionRange.start);
-                const isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                let isRangeStart = false;
+                let isRangeEnd = false;
+                if (allowReverse) {
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start <= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end <= selectionRange.start)) {
+                        isRangeStart = true;
+                    }
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start >= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end >= selectionRange.start)) {
+                        isRangeEnd = true;
+                    }
+                }
+                else {
+                    isRangeStart = this.isEqual(cellDate, selectionRange.start);
+                    isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                }
                 const isInMiddle = !isRangeStart && !isRangeEnd;
-                const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                let isRangeMid;
+                if (allowReverse) {
+                    isRangeMid = isInMiddle && (isInSelectionRange(cellDate, selectionRange) || isInSelectionRange(cellDate, { start: selectionRange.end, end: selectionRange.start }));
+                }
+                else {
+                    isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                }
                 return {
                     formattedValue: this.value(cellDate),
                     id: `${cellUID}${otherMonth ? cellDate.getTime() + '1' : cellDate.getTime()}`,
@@ -1023,7 +1089,8 @@ class MonthViewService {
                     title: this.cellTitle(cellDate),
                     value: cellDate,
                     isDisabled: isDateDisabled(cellDate),
-                    isOtherMonth: otherMonth
+                    isOtherMonth: otherMonth,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -1168,7 +1235,7 @@ class YearViewService {
         return range(0, count).map(i => addYears(start, i));
     }
     data(options) {
-        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate } = options;
+        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, allowReverse } = options;
         if (!viewDate) {
             return EMPTY_DATA;
         }
@@ -1186,10 +1253,30 @@ class YearViewService {
                 if (!this.isInRange(cellDate, min, max) || changedYear) {
                     return null;
                 }
-                const isRangeStart = this.isEqual(cellDate, selectionRange.start);
-                const isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                let isRangeStart = false;
+                let isRangeEnd = false;
+                if (allowReverse) {
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start <= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end <= selectionRange.start)) {
+                        isRangeStart = true;
+                    }
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start >= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end >= selectionRange.start)) {
+                        isRangeEnd = true;
+                    }
+                }
+                else {
+                    isRangeStart = this.isEqual(cellDate, selectionRange.start);
+                    isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                }
                 const isInMiddle = !isRangeStart && !isRangeEnd;
-                const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                let isRangeMid;
+                if (allowReverse) {
+                    isRangeMid = isInMiddle && (isInSelectionRange(cellDate, selectionRange) || isInSelectionRange(cellDate, { start: selectionRange.end, end: selectionRange.start }));
+                }
+                else {
+                    isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                }
                 return {
                     formattedValue: months[cellDate.getMonth()],
                     id: `${cellUID}${cellDate.getTime()}`,
@@ -1203,7 +1290,8 @@ class YearViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -1727,7 +1815,8 @@ class ViewComponent {
             selectionRange: this.selectionRange,
             viewDate: viewDate,
             isDateDisabled: this.disabledDatesService.isDateDisabled,
-            direction: this.direction
+            direction: this.direction,
+            allowReverse: this.allowReverse
         });
     }
     intlChange() {
@@ -1793,7 +1882,7 @@ class ViewComponent {
     }
 }
 ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
+ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { allowReverse: "allowReverse", showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
@@ -1895,7 +1984,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </tr>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DisabledDatesService }]; }, propDecorators: { showOtherMonthDays: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DisabledDatesService }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], showOtherMonthDays: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -2202,7 +2293,7 @@ class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: WeekNamesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", allowReverse: "allowReverse", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views >= 2 ? 'none' : 'grid'"
@@ -2228,6 +2319,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 <tbody
                     class="k-calendar-tbody"
                     kendoCalendarView
+                    [allowReverse]="allowReverse"
                     [showOtherMonthDays]="showOtherMonthDays"
                     role="rowgroup"
                     direction="horizontal"
@@ -2284,7 +2376,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             }"
         >
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2316,6 +2408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 <tbody
                     class="k-calendar-tbody"
                     kendoCalendarView
+                    [allowReverse]="allowReverse"
                     [showOtherMonthDays]="showOtherMonthDays"
                     role="rowgroup"
                     direction="horizontal"
@@ -2374,18 +2467,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { showOtherMonthDays: [{
-                type: Input
-            }], handleMultiViewCalendarFocus: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleMultiViewCalendarFocus: [{
                 type: HostListener,
                 args: ["focus"]
             }], handleMultiViewCalendarBlur: [{
                 type: HostListener,
                 args: ["blur", ['$event']]
+            }], showOtherMonthDays: [{
+                type: Input
             }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], activeRangeEnd: [{
                 type: Input
             }], activeView: [{
@@ -3101,6 +3196,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse = false) {
+    if ((activeRangeEnd === 'start' && selectionRange.start?.getTime() === date?.getTime() && ((allowReverse && !selectionRange.end) || !allowReverse)) ||
+        (activeRangeEnd === 'end' && selectionRange.end?.getTime() === date?.getTime())) {
+        return { activeRangeEnd: activeRangeEnd, selectionRange: selectionRange };
+    }
+    if (allowReverse) {
+        if (activeRangeEnd === 'start') {
+            selectionRange.start = date;
+            activeRangeEnd = 'end';
+        }
+        else if (activeRangeEnd === 'end') {
+            selectionRange.end = date;
+            activeRangeEnd = 'start';
+        }
+    }
+    if (!allowReverse) {
+        if (activeRangeEnd === 'start' && date > selectionRange.end ||
+            activeRangeEnd === 'end' && date < selectionRange.start) {
+            selectionRange = { start: date, end: null };
+        }
+        else if (activeRangeEnd === 'start' && date <= selectionRange.end) {
+            selectionRange.start = date;
+            activeRangeEnd = 'end';
+        }
+        else if (activeRangeEnd === 'end' && date >= selectionRange.start) {
+            selectionRange.end = date;
+            activeRangeEnd = 'start';
+        }
+    }
+    return { activeRangeEnd: activeRangeEnd, selectionRange: selectionRange };
+}
+
 /**
  * @hidden
  */
@@ -3462,15 +3592,14 @@ class MultiViewCalendarComponent {
          * ([see example]({% slug disabled_dates_multiviewcalendar %}#toc-validation)).
          */
         this.disabledDatesRangeValidation = false;
+        this._selection = 'single';
         /**
-         * Sets the Calendar selection mode
-         * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+         * Allows reverse selection when using `range` selection.
+         * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
          *
-         * The available values are:
-         * * `single` (default)
-         * * `multiple`
+         * @default false
          */
-        this.selection = 'single';
+        this.allowReverse = false;
         /**
          * Sets or gets the `disabled` property of the Calendar and
          * determines whether the component is active
@@ -3565,6 +3694,11 @@ class MultiViewCalendarComponent {
          * ([see example](slug:events_multiviewcalendar)).
          */
         this.valueChange = new EventEmitter();
+        /**
+         * @hidden
+         * Fires when the range selection changes.
+         */
+        this.rangeSelectionChange = new EventEmitter();
         /**
          * Fires each time the MultiViewCalendar gets blurred
          * ([see example](slug:events_multiviewcalendar)).
@@ -3598,9 +3732,15 @@ class MultiViewCalendarComponent {
         this.prevView = Action.PrevView;
         this.nextView = Action.NextView;
         this.selectedDates = [];
+        this.shouldHoverWhenNoStart = false;
+        this.canHover = false;
+        this.changes = {};
+        this.valueSetter = false;
+        this.selectionSetter = false;
         this._min = new Date(MIN_DATE);
         this._max = new Date(MAX_DATE);
         this._focusedDate = getToday();
+        this._selectionRange = { start: null, end: null };
         this.resolvedPromise = Promise.resolve();
         this.onControlChange = noop$2;
         this.onControlTouched = noop$2;
@@ -3665,29 +3805,37 @@ class MultiViewCalendarComponent {
     get max() {
         return this._max;
     }
+    /**
+     * Sets the Calendar selection mode
+     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     *
+     * The available values are:
+     * * `single` (default)
+     * * `multiple`
+     * * `range`
+     */
+    set selection(_selection) {
+        this.selectionSetter = true;
+        this._selection = _selection;
+    }
+    get selection() {
+        return this._selection;
+    }
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
      * > The `value` has to be a valid
      * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode or an array of valid JavaScript Date instances when in `multiple` selection mode.
+     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+     * an object of type `SelectionRange` when in `range` selection mode.
      */
+    set value(candidate) {
+        this.valueSetter = true;
+        this._value = candidate;
+    }
     get value() {
         return this._value;
     }
-    set value(candidate) {
-        this.verifyValue(candidate);
-        this._value = Array.isArray(candidate) ?
-            candidate.filter(date => isPresent(date)).map(element => cloneDate(element)) :
-            cloneDate(candidate);
-        const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
-        if (!areDatesEqual(selection, this.selectedDates)) {
-            const lastSelected = last(selection);
-            this.rangePivot = cloneDate(lastSelected);
-            this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
-            this.selectedDates = selection;
-        }
-    }
     /**
      * @hidden
      */
@@ -3704,10 +3852,23 @@ class MultiViewCalendarComponent {
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
     }
+    /**
+     * Specify, which end of the defined selection range should be marked as active.
+     *
+     * > Value will be ignored if the selection range is undefined.
+     * > If range selection is used then the default value is 'start'.
+     */
+    set activeRangeEnd(_activeRangeEnd) {
+        this._activeRangeEnd = _activeRangeEnd;
+    }
+    get activeRangeEnd() {
+        return (this.selection === 'range' && !this._activeRangeEnd) ? 'start' : this._activeRangeEnd;
+    }
     /**
      * Sets or gets the `selectionRange` property of the Calendar and
      * defines the selection range of the component
      * ([see example]({% slug dates_multiviewcalendar %}#toc-selection-range)).
+     * > We recommend using the `value` property as it now supports `range` selection.
      */
     set selectionRange(range) {
         this._selectionRange = range;
@@ -3931,8 +4092,13 @@ class MultiViewCalendarComponent {
             return;
         }
         else if (onEnterKeyPress) {
-            this.selectionService.lastClicked = this.focusedDate;
-            this.performSelection(this.focusedDate, event);
+            if (this.selection !== 'range') {
+                this.selectionService.lastClicked = this.focusedDate;
+                this.performSelection(this.focusedDate, event);
+            }
+            else {
+                this.performRangeSelection(this.focusedDate);
+            }
         }
         if (this.views >= 2) {
             if ((escKey || (altKey && onArrowUpPress))) {
@@ -3955,7 +4121,7 @@ class MultiViewCalendarComponent {
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
         }
-        if (isArrowWithShiftPressed(event)) {
+        if (isArrowWithShiftPressed(event) && this.selection !== 'range') {
             event['anyArrow'] = true;
             this.performSelection(this.focusedDate, event);
         }
@@ -3969,21 +4135,30 @@ class MultiViewCalendarComponent {
         }));
     }
     ngOnChanges(changes) {
+        this.changes = changes;
         this.verifyChanges();
         this.bus.configure(this.bottomViewEnum, this.topViewEnum);
-        if (hasExistingValue(changes, 'focusedDate')) {
-            const focusedDate = changes.focusedDate.currentValue;
+    }
+    ngDoCheck() {
+        if (this.valueSetter || this.selectionSetter) {
+            this.setValue(this.value);
+            this.valueSetter = false;
+            this.selectionSetter = false;
+        }
+        if (hasExistingValue(this.changes, 'focusedDate')) {
+            const focusedDate = this.changes.focusedDate.currentValue;
             this.focusedDate = dateInRange(focusedDate, this.min, this.max);
         }
-        if (changes.min || changes.max || changes.rangeValidation || changes.disabledDates || changes.disabledDatesRangeValidation) {
+        if (this.changes.min || this.changes.max || this.changes.rangeValidation || this.changes.disabledDates || this.changes.disabledDatesRangeValidation) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.disabledDatesRangeValidateFn = this.disabledDatesRangeValidation ? disabledDatesRangeValidator(this.disabledDatesService.isDateDisabled) : noop$2;
             this.onValidatorChange();
         }
-        if (changes.min || changes.max || changes.focusedDate || changes.activeView) {
+        if (this.changes.min || this.changes.max || this.changes.focusedDate || this.changes.activeView) {
             this.updateButtonState();
         }
+        this.changes = {};
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -4042,11 +4217,48 @@ class MultiViewCalendarComponent {
         if (this.disabledDatesService.isDateDisabled(this.focusedDate)) {
             return;
         }
+        if (this.selection === 'range') {
+            return;
+        }
         this.selectedDates = availableDates.map(date => cloneDate(date));
         this.value = this.parseSelectionToValue(availableDates);
         this.onControlChange(this.parseSelectionToValue(availableDates));
         this.valueChange.emit(this.parseSelectionToValue(availableDates));
     }
+    /**
+     * @hidden
+     */
+    onCellEnter(cellEnter, date) {
+        this.emitCellEvent(cellEnter, date);
+        if (this.selection === 'range' && (this.canHover || this.shouldHoverWhenNoStart)) {
+            this.zone.run(() => {
+                if (this.canHover && !this.shouldHoverWhenNoStart) {
+                    if (this.allowReverse) {
+                        if (this.activeRangeEnd === 'end' && this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: date };
+                        }
+                        if (this.activeRangeEnd === 'start' && this.selectionRange.end) {
+                            this.selectionRange = { start: date, end: this.selectionRange.end };
+                        }
+                    }
+                    else {
+                        if (this.activeRangeEnd === 'end' && this.selectionRange.start && date >= this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: date };
+                        }
+                        if (this.selectionRange.start && date < this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: null };
+                        }
+                    }
+                }
+                else if (this.shouldHoverWhenNoStart && date <= this.selectionRange.end) {
+                    this.selectionRange = { start: date, end: this.selectionRange.end };
+                }
+                else {
+                    this.selectionRange = { start: null, end: this.selectionRange.end };
+                }
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -4151,8 +4363,13 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
-        this.selectionService.lastClicked = date;
-        this.performSelection(date, modifiers);
+        if (this.selection === 'range') {
+            this.performRangeSelection(date);
+        }
+        else {
+            this.selectionService.lastClicked = date;
+            this.performSelection(date, modifiers);
+        }
         const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
@@ -4166,10 +4383,23 @@ class MultiViewCalendarComponent {
             return;
         }
         this.zone.run(() => {
-            this.handleDateChange({
-                selectedDates: dates,
-                focusedDate: last(dates)
-            });
+            if (this.selection === 'multiple') {
+                this.handleDateChange({
+                    selectedDates: dates,
+                    focusedDate: last(dates),
+                });
+            }
+            if (this.selection === 'range') {
+                this.activeRangeEnd = 'start';
+                const shouldEmitValueChange = this.selectionRange.start?.getTime() !== dates[0].getTime() ||
+                    this.selectionRange.end?.getTime() !== last(dates).getTime();
+                this.selectionRange.start = dates[0];
+                this.selectionRange.end = last(dates);
+                this.value = this.selectionRange;
+                if (shouldEmitValueChange) {
+                    this.valueChange.emit(this.value);
+                }
+            }
         });
     }
     setClasses(element) {
@@ -4192,15 +4422,23 @@ class MultiViewCalendarComponent {
         if (!isDevMode()) {
             return;
         }
-        if (this.selection === 'single' && candidate && !(candidate instanceof Date)) {
-            throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+        if (this.selection === 'single' && candidate && !(isNullOrDate(candidate))) {
+            throw new Error(`When using 'single' selection the 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
         }
-        else if (this.selection === 'multiple' && candidate && Array.isArray(candidate)) {
-            const onlyDates = candidate.every(value => value instanceof Date);
-            if (!onlyDates) {
-                throw new Error(`The 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+        else if (this.selection === 'multiple' && candidate) {
+            if (Array.isArray(candidate)) {
+                const onlyDates = candidate.every(value => value instanceof Date);
+                if (!onlyDates) {
+                    throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+                }
+            }
+            if (Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+                throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
             }
         }
+        else if (this.selection === 'range' && candidate && !(isNullOrDate(candidate['start']) && isNullOrDate(candidate['end']))) {
+            throw new Error(`The 'value' should be an object with start and end dates. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+        }
     }
     updateButtonState() {
         this.resolvedPromise.then(() => {
@@ -4213,6 +4451,72 @@ class MultiViewCalendarComponent {
         selection = selection || [];
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
+    setValue(candidate) {
+        this.verifyValue(candidate);
+        if (candidate === null) {
+            this._value = null;
+            this.selectedDates = [];
+        }
+        else if (Array.isArray(candidate)) {
+            this.selectionRange = { start: null, end: null };
+            this._value = candidate.filter(date => isPresent(date)).map(element => cloneDate(element));
+        }
+        else if (isObject(candidate) && Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+            this._value = { start: null, end: null };
+            this._value.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
+            this._value.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
+            this.selectionRange = Object.assign({}, this._value);
+            if (this._value?.start && !this._value?.end) {
+                this.activeRangeEnd = 'end';
+                this.canHover = true;
+            }
+            if (this._value?.end && !this._value?.start) {
+                this.activeRangeEnd = 'start';
+                this.canHover = true;
+            }
+            if (this.activeRangeEnd === 'end') {
+                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
+            }
+            else {
+                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            }
+        }
+        else {
+            this.selectionRange = { start: null, end: null };
+            this._value = cloneDate(candidate);
+        }
+        if (this.selection !== 'range') {
+            const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
+            if (!areDatesEqual(selection, this.selectedDates)) {
+                const lastSelected = last(selection);
+                this.rangePivot = cloneDate(lastSelected);
+                this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
+                this.selectedDates = selection;
+            }
+        }
+    }
+    performRangeSelection(date) {
+        const clonedRangeSelection = Object.assign({}, this.selectionRange);
+        const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
+            (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
+        this.zone.run(() => {
+            const rangeSelection = handleRangeSelection(date, clonedRangeSelection, this.activeRangeEnd, this.allowReverse);
+            this.activeRangeEnd = rangeSelection.activeRangeEnd;
+            if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
+                this.activeRangeEnd = 'start';
+            }
+            this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
+            if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||
+                this.value?.end?.getTime() !== rangeSelection.selectionRange?.end?.getTime())) {
+                this.value = rangeSelection.selectionRange;
+                this.valueChange.emit(this.value);
+                this.rangeSelectionChange.emit(rangeSelection);
+            }
+            this.cdr.markForCheck();
+        });
+    }
     performSelection(date, selectionModifiers) {
         const selection = this.selectionService.performSelection({
             date: date,
@@ -4230,7 +4534,7 @@ class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -4278,6 +4582,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [showOtherMonthDays]="showOtherMonthDays"
+        [allowReverse]="allowReverse"
         [id]="calendarHeaderIdLabel"
         [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
@@ -4302,7 +4607,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
-        (cellEnter)="emitCellEvent(cellEnter, $event)"
+        (cellEnter)="onCellEnter(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
         (focusCalendar)="handleFocus()"
@@ -4315,7 +4620,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [activeViewValue]="activeView"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "allowReverse", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -4371,6 +4676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [showOtherMonthDays]="showOtherMonthDays"
+        [allowReverse]="allowReverse"
         [id]="calendarHeaderIdLabel"
         [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
@@ -4395,7 +4701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
-        (cellEnter)="emitCellEvent(cellEnter, $event)"
+        (cellEnter)="onCellEnter(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
         (focusCalendar)="handleFocus()"
@@ -4430,6 +4736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -4474,6 +4782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], valueChange: [{
                 type: Output
+            }], rangeSelectionChange: [{
+                type: Output
             }], blurEvent: [{
                 type: Output,
                 args: ['blur']
@@ -5401,6 +5711,7 @@ class ViewListComponent {
         this.disabled = false;
         this.showFooter = false;
         this.weekDaysFormat = 'short';
+        this.cellEnter = new EventEmitter();
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.activeDateChange = new EventEmitter();
@@ -5550,7 +5861,7 @@ class ViewListComponent {
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
         [min]="min"
@@ -5597,6 +5908,9 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             <tbody class="k-calendar-tbody"
                    *kFor="let date of dates"
                    kendoCalendarView
+                   [allowReverse]="allowReverse"
+                   [activeRangeEnd]="activeRangeEnd"
+                   [selectionRange]="selectionRange"
                    [showOtherMonthDays]="showOtherMonthDays"
                    [headerTitle]="headerTitle"
                    role="rowgroup"
@@ -5613,6 +5927,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                    (focusedCellId)="focusedCellChange.emit($event)"
+                   (cellEnter)="cellEnter.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -5622,7 +5937,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         [activeViewValue]="activeViewValue"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5675,6 +5990,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             <tbody class="k-calendar-tbody"
                    *kFor="let date of dates"
                    kendoCalendarView
+                   [allowReverse]="allowReverse"
+                   [activeRangeEnd]="activeRangeEnd"
+                   [selectionRange]="selectionRange"
                    [showOtherMonthDays]="showOtherMonthDays"
                    [headerTitle]="headerTitle"
                    role="rowgroup"
@@ -5691,6 +6009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                    (focusedCellId)="focusedCellChange.emit($event)"
+                   (cellEnter)="cellEnter.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -5702,7 +6021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-footer>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
@@ -5738,8 +6059,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], weekDaysFormat: [{
                 type: Input
+            }], activeRangeEnd: [{
+                type: Input
+            }], selectionRange: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
+            }], cellEnter: [{
+                type: Output
             }], cellClick: [{
                 type: Output
             }], weekNumberCellClick: [{
@@ -6067,15 +6394,14 @@ class CalendarComponent {
          * @default false
          */
         this.footer = false;
+        this._selection = 'single';
         /**
-         * Sets the Calendar selection mode
-         * ([see example]({% slug multiple_selection_calendar %})).
+         * Allows reverse selection when using `range` selection.
+         * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
          *
-         * The available values are:
-         * * `single` (default)
-         * * `multiple`
+         * @default false
          */
-        this.selection = 'single';
+        this.allowReverse = false;
         /**
          * Sets or gets the `disabled` property of the Calendar and
          * determines whether the component is active
@@ -6160,8 +6486,10 @@ class CalendarComponent {
          */
         this.valueChange = new EventEmitter();
         this._size = DEFAULT_SIZE;
+        this._activeRangeEnd = 'start';
         this.isActive = false;
         this.cellUID = guid();
+        this.selectionRange = { start: null, end: null };
         this.selectedDates = [];
         this._min = new Date(MIN_DATE);
         this._max = new Date(MAX_DATE);
@@ -6171,11 +6499,15 @@ class CalendarComponent {
         this.onValidatorChange = noop$2;
         this.minValidateFn = noop$2;
         this.maxValidateFn = noop$2;
+        this.changes = {};
+        this.valueSetter = false;
+        this.selectionSetter = false;
         this.syncNavigation = true;
         this._type = 'infinite';
         this.domEvents = [];
         this.resolvedPromise = Promise.resolve(null);
         this.destroyed = false;
+        this.canHover = false;
         validatePackage(packageMetadata);
         this.id = `kendo-calendarid-${this.bus.calendarId}`;
         this.setClasses(element.nativeElement);
@@ -6262,29 +6594,37 @@ class CalendarComponent {
     get max() {
         return this._max;
     }
+    /**
+     * Sets the Calendar selection mode
+     * ([see example]({% slug multiple_selection_calendar %})).
+     *
+     * The available values are:
+     * * `single` (default)
+     * * `multiple`
+     * * `range`
+     */
+    set selection(_selection) {
+        this._selection = _selection;
+        this.selectionSetter = true;
+    }
+    get selection() {
+        return this._selection;
+    }
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
      * > The `value` has to be a valid
      * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode or an array of valid JavaScript Date instances when in `multiple` selection mode.
+     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+     * an object of type `SelectionRange` when in `range` selection mode.
      */
+    set value(candidate) {
+        this.valueSetter = true;
+        this._value = candidate;
+    }
     get value() {
         return this._value;
     }
-    set value(candidate) {
-        this.verifyValue(candidate);
-        this._value = Array.isArray(candidate) ?
-            candidate.filter(date => isPresent(date)).map(element => cloneDate(element)) :
-            cloneDate(candidate);
-        const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
-        if (!areDatesEqual(selection, this.selectedDates)) {
-            const lastSelected = last(selection);
-            this.rangePivot = cloneDate(lastSelected);
-            this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
-            this.selectedDates = selection;
-        }
-    }
     /**
      * @hidden
      */
@@ -6465,6 +6805,18 @@ class CalendarComponent {
     get size() {
         return this._size;
     }
+    /**
+     * Specify, which end of the defined selection range should be marked as active.
+     *
+     * > Value will be ignored if the selection range is undefined.
+     * > If range selection is used then the default value is 'start'.
+     */
+    set activeRangeEnd(_activeRangeEnd) {
+        this._activeRangeEnd = _activeRangeEnd;
+    }
+    get activeRangeEnd() {
+        return this._activeRangeEnd;
+    }
     get activeViewEnum() {
         const activeView = CalendarViewEnum[this.activeView];
         return activeView < this.bottomViewEnum ? this.bottomViewEnum : activeView;
@@ -6497,21 +6849,30 @@ class CalendarComponent {
         }
     }
     ngOnChanges(changes) {
+        this.changes = changes;
         this.verifyChanges();
         this.bus.configure(this.bottomViewEnum, this.topViewEnum);
         this.scrollSyncService.configure(this.activeViewEnum);
-        if (hasExistingValue(changes, 'focusedDate')) {
-            const focusedDate = changes.focusedDate.currentValue;
+    }
+    ngDoCheck() {
+        if (this.valueSetter || this.selectionSetter) {
+            this.setValue(this.value);
+            this.valueSetter = false;
+            this.selectionSetter = false;
+        }
+        if (hasExistingValue(this.changes, 'focusedDate')) {
+            const focusedDate = this.changes.focusedDate.currentValue;
             this.focusedDate = dateInRange(focusedDate, this.min, this.max);
         }
-        if (changes.navigation) {
+        if (this.changes.navigation) {
             this.syncNavigation = true;
         }
-        if (changes.min || changes.max || changes.rangeValidation) {
+        if (this.changes.min || this.changes.max || this.changes.rangeValidation) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.onValidatorChange();
         }
+        this.changes = {};
     }
     ngAfterViewInit() {
         this.setAriaActivedescendant();
@@ -6544,6 +6905,31 @@ class CalendarComponent {
         }
         this.destroyed = true;
     }
+    /**
+     * @hidden
+     */
+    onCellEnter(date) {
+        if (this.selection === 'range' && this.canHover) {
+            this.ngZone.run(() => {
+                if (this.allowReverse) {
+                    if (this.activeRangeEnd === 'end' && this.selectionRange.start) {
+                        this.selectionRange = { start: this.selectionRange.start, end: date };
+                    }
+                    if (this.activeRangeEnd === 'start' && this.selectionRange.end) {
+                        this.selectionRange = { start: date, end: this.selectionRange.end };
+                    }
+                }
+                else {
+                    if (this.activeRangeEnd === 'end' && this.selectionRange.start && date >= this.selectionRange.start) {
+                        this.selectionRange = { start: this.selectionRange.start, end: date };
+                    }
+                    if (this.selectionRange.start && date < this.selectionRange.start) {
+                        this.selectionRange = { start: this.selectionRange.start, end: null };
+                    }
+                }
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -6617,9 +7003,14 @@ class CalendarComponent {
     /**
      * @hidden
      */
-    handleMultiViewCalendarValueChange(date, focusedDate) {
-        const selectedDates = Array.isArray(date) ? date : [date];
-        this.handleDateChange({ selectedDates, focusedDate });
+    handleMultiViewCalendarValueChange(value, focusedDate) {
+        if (this.selection === 'range') {
+            this.valueChange.emit(value);
+        }
+        else {
+            const selectedDates = (Array.isArray(value) ? value : [value]);
+            this.handleDateChange({ selectedDates, focusedDate });
+        }
     }
     /**
      * @hidden
@@ -6643,6 +7034,9 @@ class CalendarComponent {
         if (this.disabledDatesService.isDateDisabled(this.focusedDate)) {
             return;
         }
+        if (this.selection === 'range') {
+            return;
+        }
         this.ngZone.run(() => {
             this.selectedDates = availableDates.map(date => cloneDate(date));
             this.value = this.parseSelectionToValue(availableDates);
@@ -6755,8 +7149,13 @@ class CalendarComponent {
      */
     handleCellClick({ date, modifiers }) {
         this.focus();
-        this.selectionService.lastClicked = date;
-        this.performSelection(date, modifiers);
+        if (this.selection === 'range') {
+            this.performRangeSelection(date);
+        }
+        else {
+            this.selectionService.lastClicked = date;
+            this.performSelection(date, modifiers);
+        }
     }
     /**
      * @hidden
@@ -6766,10 +7165,22 @@ class CalendarComponent {
             return;
         }
         this.ngZone.run(() => {
-            this.handleDateChange({
-                selectedDates: dates,
-                focusedDate: last(dates)
-            });
+            if (this.selection === 'multiple') {
+                this.handleDateChange({
+                    selectedDates: dates,
+                    focusedDate: last(dates),
+                });
+            }
+            if (this.selection === 'range') {
+                this.canHover = false;
+                this.activeRangeEnd = 'start';
+                const shouldEmitValueChange = this.selectionRange.start?.getTime() !== dates[0].getTime() ||
+                    this.selectionRange.end?.getTime() !== last(dates).getTime();
+                this.value = { start: dates[0], end: last(dates) };
+                if (shouldEmitValueChange) {
+                    this.valueChange.emit(this.value);
+                }
+            }
         });
     }
     /**
@@ -6833,14 +7244,22 @@ class CalendarComponent {
         if (!isDevMode()) {
             return;
         }
-        if (this.selection === 'single' && candidate && !(candidate instanceof Date)) {
-            throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+        if (this.selection === 'single' && candidate && !(isNullOrDate(candidate))) {
+            throw new Error(`When using 'single' selection the 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
         }
-        else if (this.selection === 'multiple' && candidate && Array.isArray(candidate)) {
-            const onlyDates = candidate.every(value => value instanceof Date);
-            if (!onlyDates) {
-                throw new Error(`The 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+        else if (this.selection === 'multiple' && candidate) {
+            if (Array.isArray(candidate)) {
+                const onlyDates = candidate.every(value => value instanceof Date);
+                if (!onlyDates) {
+                    throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+                }
             }
+            if (Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+                throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+            }
+        }
+        else if (this.selection === 'range' && candidate && !(isNullOrDate(candidate['start']) && isNullOrDate(candidate['end']))) {
+            throw new Error(`The 'value' should be an object with start and end dates. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
         }
     }
     bindEvents() {
@@ -6893,12 +7312,17 @@ class CalendarComponent {
             }
             if (args.keyCode === Keys$1.Enter) {
                 this.selectionService.lastClicked = this.focusedDate;
-                this.performSelection(this.focusedDate, args);
+                if (this.selection !== 'range') {
+                    this.performSelection(this.focusedDate, args);
+                }
+                else {
+                    this.performRangeSelection(this.focusedDate);
+                }
             }
             if (args.keyCode === Keys$1.KeyT) {
                 this.focusToday();
             }
-            if (isArrowWithShiftPressed(args)) {
+            if (isArrowWithShiftPressed(args) && this.selection !== 'range') {
                 args.anyArrow = true;
                 this.performSelection(this.focusedDate, args);
             }
@@ -6937,6 +7361,78 @@ class CalendarComponent {
         selection = selection || [];
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
+    setValue(candidate) {
+        this.verifyValue(candidate);
+        if (candidate === null) {
+            this._value = null;
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+        }
+        else if (Array.isArray(candidate)) {
+            this.selectionRange = { start: null, end: null };
+            this._value = candidate.filter(date => isPresent(date)).map(element => cloneDate(element));
+        }
+        else if (isObject(candidate) && Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+            this._value = { start: null, end: null };
+            this._value.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
+            this._value.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
+            this.selectionRange = Object.assign({}, this._value);
+            if (this._value?.start && !this._value?.end) {
+                this.activeRangeEnd = 'end';
+                this.canHover = true;
+            }
+            if (this._value?.end && !this._value?.start) {
+                this.activeRangeEnd = 'start';
+                this.canHover = true;
+            }
+            if (this.activeRangeEnd === 'end') {
+                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
+            }
+            else {
+                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            }
+        }
+        else {
+            this.selectionRange = { start: null, end: null };
+            this._value = cloneDate(candidate);
+        }
+        if (this.selection !== 'range') {
+            const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
+            if (!areDatesEqual(selection, this.selectedDates)) {
+                const lastSelected = last(selection);
+                this.rangePivot = cloneDate(lastSelected);
+                this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
+                this.selectedDates = selection;
+            }
+        }
+    }
+    performRangeSelection(date) {
+        const clonedRangeSelection = Object.assign({}, this.selectionRange);
+        const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
+            (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
+        this.ngZone.run(() => {
+            const rangeSelection = handleRangeSelection(date, clonedRangeSelection, this.activeRangeEnd, this.allowReverse);
+            this.activeRangeEnd = rangeSelection.activeRangeEnd;
+            if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
+                this.activeRangeEnd = 'start';
+            }
+            if ((this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start) ||
+                (this.activeRangeEnd === 'start' && rangeSelection.selectionRange.end)) {
+                this.canHover = true;
+            }
+            else {
+                this.canHover = false;
+            }
+            if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||
+                this.value?.end?.getTime() !== rangeSelection.selectionRange?.end?.getTime())) {
+                this.value = rangeSelection.selectionRange;
+                this.valueChange.emit(this.value);
+            }
+            this.cdr.markForCheck();
+        });
+    }
     performSelection(date, selectionModifiers) {
         const selection = this.selectionService.performSelection({
             date: date,
@@ -6954,7 +7450,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size", activeRangeEnd: "activeRangeEnd" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -6997,7 +7493,10 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         </kendo-calendar-navigation>
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
+            [allowReverse]="allowReverse"
             [showOtherMonthDays]="showOtherMonthDays"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -7025,6 +7524,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             (pageChange)="onPageChange()"
             (focusCalendar)="handleFocus()"
             (blurCalendar)="handleBlur($event)"
+            (cellEnter)="onCellEnter($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -7036,6 +7536,9 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [min]="min"
             [max]="max"
             [id]="id"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [allowReverse]="allowReverse"
             [disabled]="disabled"
             [isActive]="isActive"
             [showOtherMonthDays]="showOtherMonthDays"
@@ -7077,7 +7580,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["allowReverse", "cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "activeRangeEnd", "selectionRange", "weekNumber"], outputs: ["cellEnter", "cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7128,7 +7631,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </kendo-calendar-navigation>
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
+            [allowReverse]="allowReverse"
             [showOtherMonthDays]="showOtherMonthDays"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -7156,6 +7662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             (pageChange)="onPageChange()"
             (focusCalendar)="handleFocus()"
             (blurCalendar)="handleBlur($event)"
+            (cellEnter)="onCellEnter($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -7167,6 +7674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [min]="min"
             [max]="max"
             [id]="id"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [allowReverse]="allowReverse"
             [disabled]="disabled"
             [isActive]="isActive"
             [showOtherMonthDays]="showOtherMonthDays"
@@ -7230,6 +7740,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -7333,6 +7845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['navigationItemTemplate']
             }], size: [{
                 type: Input
+            }], activeRangeEnd: [{
+                type: Input
             }], navigationView: [{
                 type: ViewChild,
                 args: [NavigationComponent, { static: false }]
@@ -9860,7 +10374,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -11500,6 +12014,7 @@ class TimeSelectorComponent {
          */
         this.valueReject = new EventEmitter();
         this.tabOutLastPart = new EventEmitter();
+        this.tabOutNow = new EventEmitter();
         this.isActive = false;
         this.showNowButton = true;
         this._activeListIndex = -1;
@@ -11595,7 +12110,7 @@ class TimeSelectorComponent {
             if (keyCode === Keys$1.Tab && shiftKey) {
                 event.preventDefault();
                 this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.cancel ? this.cancel.nativeElement.focus() : this.accept?.nativeElement.focus();
+                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
             }
         }));
         this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
@@ -11714,13 +12229,23 @@ class TimeSelectorComponent {
      */
     handleTabOut(event) {
         const { keyCode, shiftKey } = event;
-        if (keyCode === Keys$1.Tab && !shiftKey) {
+        if (event.target === this.now?.nativeElement && keyCode === Keys$1.Tab && shiftKey) {
+            event.preventDefault();
+            if (this.isDateTimePicker) {
+                this.tabOutNow.emit();
+            }
+            else {
+                this.cancel ? this.cancel.nativeElement.focus() : this.accept.nativeElement.focus();
+            }
+            return;
+        }
+        if (keyCode === Keys$1.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
-                this.cancel ? this.cancel.nativeElement.focus() : this.timeLists.first.focus();
+                this.cancel ? this.cancel.nativeElement.focus() : this.now?.nativeElement.focus();
             }
             else {
-                this.timeLists.first.focus();
+                this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
             }
         }
     }
@@ -11811,7 +12336,7 @@ class TimeSelectorComponent {
     }
 }
 TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -11852,7 +12377,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -11973,7 +12499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -12095,6 +12622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutNow: [{
+                type: Output
             }] } });
 
 const VALUE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
@@ -13226,7 +13755,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13640,6 +14169,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
 const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
+const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -14236,6 +14766,9 @@ class DateTimePickerComponent {
     get dateTabButton() {
         return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
     }
+    get timeTabButton() {
+        return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+    }
     /**
      * @hidden
      */
@@ -14482,6 +15015,12 @@ class DateTimePickerComponent {
             this.dateTabButton.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutNow() {
+        this.timeTabButton.focus();
+    }
     /**
      * @hidden
      */
@@ -14605,7 +15144,7 @@ class DateTimePickerComponent {
                         this.calendar.monthView.list.nativeElement.focus();
                     }
                     else {
-                        this.timeSelector.focus();
+                        this.timeSelector.timeLists.last.focus();
                     }
                 }
                 break;
@@ -15221,6 +15760,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -15281,7 +15821,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -15609,6 +16149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -16339,6 +16880,13 @@ class DateRangePopupComponent {
         this.localization = localization;
         this.cdr = cdr;
         this.rtl = rtl;
+        /**
+         * Allows reverse selection when using `range` selection.
+         * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
+         *
+         * @default false
+         */
+        this.allowReverse = false;
         /**
          * Controls the popup animation.
          * By default, the opening and closing animations are enabled.
@@ -16487,6 +17035,14 @@ class DateRangePopupComponent {
             this.actionSheet.titleId = changes.first?.headerId;
             this.cdr.detectChanges();
         }));
+        this.calendarSubscriptions.add(this.dateRangeService.startInput$?.value?.valueChange.subscribe((res) => {
+            if (!res && this.dateRangeService.selectionRange.end) {
+                this.calendar.shouldHoverWhenNoStart = true;
+            }
+            else {
+                this.calendar.shouldHoverWhenNoStart = false;
+            }
+        }));
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
@@ -16510,6 +17066,19 @@ class DateRangePopupComponent {
             this.windowBlurSubscription.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     *
+     */
+    onRangeSelectionChange(rangeSelection) {
+        this.dateRangeService.setActiveRangeEnd(rangeSelection.activeRangeEnd);
+        if (!this.isAdaptive) {
+            this.dateRangeService.setRange(rangeSelection.selectionRange);
+        }
+        else {
+            this._rangeSelection = rangeSelection.selectionRange;
+        }
+    }
     /**
      *  Opens the popup component and focuses the calendar.
      */
@@ -16577,7 +17146,7 @@ class DateRangePopupComponent {
      * @hidden
      */
     handleAccept() {
-        this.dateRangeSelectionDirective.setRange(this.dateRangeService.selectionRange);
+        this.dateRangeService.setRange(this._rangeSelection);
         this.show = false;
     }
     /**
@@ -16757,7 +17326,7 @@ class DateRangePopupComponent {
     }
 }
 DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -16780,7 +17349,15 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar
+                [allowReverse]="allowReverse"
+                selection="range"
+                [value]="dateRangeService.selectionRange"
+                (onClosePopup)="closePopup($event)"
+                (onTabPress)="handleTab($event)"
+                (onShiftTabPress)="handleShiftTab($event)"
+                (rangeSelectionChange)="onRangeSelectionChange($event)"
+            ></kendo-multiviewcalendar>
         </ng-template>
 
         <kendo-actionsheet
@@ -16821,8 +17398,12 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            kendoDateRangeSelection
-                            [shouldSetRange]="false">
+                            [allowReverse]="allowReverse"
+                            [focusedDate]="dateRangeService.focusedDate"
+                            [value]="dateRangeService.selectionRange"
+                            selection="range"
+                            (rangeSelectionChange)="onRangeSelectionChange($event)"
+                            >
                         </kendo-multiviewcalendar>
                     </div>
                 </div>
@@ -16850,7 +17431,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -16880,7 +17461,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar
+                [allowReverse]="allowReverse"
+                selection="range"
+                [value]="dateRangeService.selectionRange"
+                (onClosePopup)="closePopup($event)"
+                (onTabPress)="handleTab($event)"
+                (onShiftTabPress)="handleShiftTab($event)"
+                (rangeSelectionChange)="onRangeSelectionChange($event)"
+            ></kendo-multiviewcalendar>
         </ng-template>
 
         <kendo-actionsheet
@@ -16921,8 +17510,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            kendoDateRangeSelection
-                            [shouldSetRange]="false">
+                            [allowReverse]="allowReverse"
+                            [focusedDate]="dateRangeService.focusedDate"
+                            [value]="dateRangeService.selectionRange"
+                            selection="range"
+                            (rangeSelectionChange)="onRangeSelectionChange($event)"
+                            >
                         </kendo-multiviewcalendar>
                     </div>
                 </div>
@@ -16978,6 +17571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], contentCalendar: [{
                 type: ContentChildren,
                 args: [MultiViewCalendarComponent]
+            }], allowReverse: [{
+                type: Input
             }], animate: [{
                 type: Input
             }], anchor: [{
@@ -17071,7 +17666,7 @@ DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{