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

package/esm2020/calendar/calendar.component.mjs

@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, Ev
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, KendoInput, guid, Keys, isObject } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MultiViewCalendarComponent } from './multiview-calendar.component';
@@ -28,12 +28,13 @@ import { HeaderTitleTemplateDirective } from './templates/header-title-template.
 import { NavigationItemTemplateDirective } from './templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { CalendarViewEnum } from './models/view.enum';
+import { handleRangeSelection } from './models/selection';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { areDatesEqual, dateInRange, DEFAULT_SIZE, getSizeClass, getToday, hasExistingValue, last, noop } from '../util';
 import { closest } from '../common/dom-queries';
-import { requiresZoneOnBlur, preventDefault, isPresent, isArrowWithShiftPressed, selectors, attributeNames } from '../common/utils';
+import { requiresZoneOnBlur, preventDefault, isPresent, isArrowWithShiftPressed, selectors, attributeNames, isNullOrDate } from '../common/utils';
 import { from as fromPromise } from 'rxjs';
 import { HeaderTemplateDirective } from './templates/header-template.directive';
 import { FooterTemplateDirective } from './templates/footer-template.directivе';
@@ -125,15 +126,14 @@ export 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
@@ -218,8 +218,10 @@ export 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);
@@ -229,11 +231,15 @@ export class CalendarComponent {
         this.onValidatorChange = noop;
         this.minValidateFn = noop;
         this.maxValidateFn = noop;
+        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);
@@ -320,29 +326,37 @@ export 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
      */
@@ -523,6 +537,18 @@ export 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;
@@ -555,21 +581,30 @@ export 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;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop;
             this.onValidatorChange();
         }
+        this.changes = {};
     }
     ngAfterViewInit() {
         this.setAriaActivedescendant();
@@ -602,6 +637,31 @@ export 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
      */
@@ -675,9 +735,14 @@ export 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
@@ -701,6 +766,9 @@ export 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);
@@ -813,8 +881,13 @@ export 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
@@ -824,10 +897,22 @@ export 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);
+                }
+            }
         });
     }
     /**
@@ -891,15 +976,23 @@ export 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} 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.`);
+        }
     }
     bindEvents() {
         const element = this.element.nativeElement;
@@ -951,12 +1044,17 @@ export class CalendarComponent {
             }
             if (args.keyCode === Keys.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.KeyT) {
                 this.focusToday();
             }
-            if (isArrowWithShiftPressed(args)) {
+            if (isArrowWithShiftPressed(args) && this.selection !== 'range') {
                 args.anyArrow = true;
                 this.performSelection(this.focusedDate, args);
             }
@@ -995,6 +1093,78 @@ export 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,
@@ -1012,7 +1182,7 @@ export class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i0.ElementRef }, { token: i3.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i4.ScrollSyncService }, { token: i5.DisabledDatesService }, { token: i6.LocalizationService }, { token: i7.SelectionService }, { token: i8.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,
@@ -1055,7 +1225,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"
@@ -1083,6 +1256,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>
@@ -1094,6 +1268,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"
@@ -1135,7 +1312,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: i11.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: i13.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: i15.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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: i11.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: i13.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: i15.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: [{
@@ -1186,7 +1363,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"
@@ -1214,6 +1394,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>
@@ -1225,6 +1406,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"
@@ -1288,6 +1472,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -1391,6 +1577,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 }]

package/esm2020/calendar/horizontal-view-list.component.mjs

@@ -281,7 +281,7 @@ export class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i3.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'"
@@ -307,6 +307,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 <tbody
                     class="k-calendar-tbody"
                     kendoCalendarView
+                    [allowReverse]="allowReverse"
                     [showOtherMonthDays]="showOtherMonthDays"
                     role="rowgroup"
                     direction="horizontal"
@@ -363,7 +364,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: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.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: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.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: [{
@@ -395,6 +396,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"
@@ -453,18 +455,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i3.WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { showOtherMonthDays: [{
-                type: Input
-            }], handleMultiViewCalendarFocus: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i3.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: [{

package/esm2020/calendar/models/selection.mjs

@@ -2,4 +2,37 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export {};
+/**
+ * @hidden
+ */
+export 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 };
+}