@progress/kendo-angular-dateinputs 16.0.0-develop.11 → 16.0.0-develop.13

package/esm2020/calendar/multiview-calendar.component.mjs

@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, Ev
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, guid, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, guid, Keys, isObject } from '@progress/kendo-angular-common';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
 import { HeaderComponent } from './header.component';
 import { BusViewService } from './services/bus-view.service';
@@ -21,13 +21,14 @@ import { WeekNumberCellTemplateDirective } from './templates/weeknumber-cell-tem
 import { HeaderTitleTemplateDirective } from './templates/header-title-template.directive';
 import { Action } from './models/navigation-action.enum';
 import { CalendarViewEnum } from './models/view.enum';
+import { handleRangeSelection } from './models/selection';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
 import { disabledDatesRangeValidator } from '../validators/disabled-dates-range.validator';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } from '../util';
 import { Subscription } from 'rxjs';
-import { isArrowWithShiftPressed, isPresent } from '../common/utils';
+import { isArrowWithShiftPressed, isNullOrDate, isPresent } from '../common/utils';
 import { NavigationService } from './services/navigation.service';
 import { HeaderTemplateDirective } from './templates/header-template.directive';
 import { FooterTemplateDirective } from './templates/footer-template.directivе';
@@ -112,15 +113,14 @@ export 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
@@ -215,6 +215,11 @@ export 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)).
@@ -248,9 +253,15 @@ export 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;
         this.onControlTouched = noop;
@@ -315,29 +326,37 @@ export 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
      */
@@ -354,10 +373,23 @@ export 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;
@@ -581,8 +613,13 @@ export 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))) {
@@ -605,7 +642,7 @@ export 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);
         }
@@ -619,21 +656,30 @@ export 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;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop;
             this.disabledDatesRangeValidateFn = this.disabledDatesRangeValidation ? disabledDatesRangeValidator(this.disabledDatesService.isDateDisabled) : noop;
             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();
@@ -692,11 +738,48 @@ export 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
      */
@@ -801,8 +884,13 @@ export 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);
@@ -816,10 +904,23 @@ export 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) {
@@ -842,15 +943,23 @@ export 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} 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} 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} 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} 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} 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} for possible resolution.`);
+        }
     }
     updateButtonState() {
         this.resolvedPromise.then(() => {
@@ -863,6 +972,72 @@ export 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,
@@ -880,7 +1055,7 @@ export class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: i1.BusViewService }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DisabledDatesService }, { token: i4.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,
@@ -928,6 +1103,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"
@@ -952,7 +1128,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()"
@@ -965,7 +1141,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [activeViewValue]="activeView"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.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: i9.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.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: i9.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: [{
@@ -1021,6 +1197,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"
@@ -1045,7 +1222,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()"
@@ -1080,6 +1257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -1124,6 +1303,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']

package/esm2020/calendar/services/century-view.service.mjs

@@ -67,7 +67,7 @@ export 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;
         }
@@ -83,10 +83,30 @@ export 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()}`,
@@ -100,7 +120,8 @@ export class CenturyViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });

package/esm2020/calendar/services/decade-view.service.mjs

@@ -67,7 +67,7 @@ export 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;
         }
@@ -83,10 +83,30 @@ export 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()}`,
@@ -100,7 +120,8 @@ export class DecadeViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });

package/esm2020/calendar/services/month-view.service.mjs

@@ -50,7 +50,7 @@ export 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;
         }
@@ -72,10 +72,30 @@ export 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()}`,
@@ -91,7 +111,8 @@ export class MonthViewService {
                     title: this.cellTitle(cellDate),
                     value: cellDate,
                     isDisabled: isDateDisabled(cellDate),
-                    isOtherMonth: otherMonth
+                    isOtherMonth: otherMonth,
+                    allowReverse: allowReverse
                 };
             });
         });