@progress/kendo-angular-dateinputs 16.0.0-develop.9 → 16.0.0

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,14 +231,17 @@ 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);
         if (this.pickerService) {
             this.pickerService.calendar = this;
         }
@@ -320,29 +325,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
      */
@@ -373,7 +386,9 @@ export class CalendarComponent {
      */
     set type(type) {
         this.renderer.removeClass(this.element.nativeElement, `k-calendar-${this.type}`);
-        this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
+        if (type === 'infinite') {
+            this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
+        }
         this._type = type;
     }
     get type() {
@@ -512,17 +527,23 @@ export class CalendarComponent {
      *
      */
     set size(size) {
-        const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
-        this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', newSize));
-        }
-        this._size = newSize;
+        this._size = size;
     }
     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;
@@ -541,6 +562,7 @@ export class CalendarComponent {
         return this.type === 'classic' ? undefined : this.disabled;
     }
     ngOnInit() {
+        this.setClasses(this.element.nativeElement);
         if (this.type === 'infinite') {
             this.dom.calculateHeights(this.element.nativeElement);
             this.scrollSyncService.configure(this.activeViewEnum);
@@ -555,26 +577,42 @@ 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) {
+            if (this.selection === 'range' &&
+                (this.value?.start || this.value?.end) &&
+                this.focusedDate.getTime() !== this.value.start?.getTime() &&
+                this.focusedDate.getTime() !== this.value.end?.getTime()) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
+            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();
         if (this.size !== 'none') {
             const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+            this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
             this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
         }
     }
@@ -602,6 +640,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 +738,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 +769,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 +884,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 +900,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);
+                }
+            }
         });
     }
     /**
@@ -872,9 +960,11 @@ export class CalendarComponent {
         }
     }
     setClasses(element) {
-        this.renderer.addClass(element, 'k-widget');
-        this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, `k-calendar-${this.type}`);
+        this.renderer.removeClass(element, `k-calendar-${this.type}`);
+        if (this.type === 'infinite') {
+            this.renderer.addClass(element, 'k-calendar');
+            this.renderer.addClass(element, `k-calendar-${this.type}`);
+        }
     }
     verifyChanges() {
         if (!isDevMode()) {
@@ -891,19 +981,35 @@ 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;
-        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
+        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'mouseleave', this.setRangeSelectionToValue.bind(this)));
+    }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.ngZone.run(() => {
+                this.selectionRange = this.value;
+                this.cdr.markForCheck();
+            });
+        }
     }
     emitBlur(args) {
         if (this.pickerService) {
@@ -951,12 +1057,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 +1106,71 @@ 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._value?.end && this._value?.start) {
+                this.canHover = false;
+            }
+        }
+        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) {
+        this.focusedDate = 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';
+                rangeSelection.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.cdr.markForCheck();
+        });
+    }
     performSelection(date, selectionModifiers) {
         const selection = this.selectionService.performSelection({
             date: date,
@@ -1011,8 +1187,8 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.2.10", 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 +1231,11 @@ 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"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -1083,6 +1263,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>
@@ -1093,7 +1274,11 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [allowReverse]="allowReverse"
             [disabled]="disabled"
             [isActive]="isActive"
             [showOtherMonthDays]="showOtherMonthDays"
@@ -1135,8 +1320,8 @@ 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
+  `, 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", "size", "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", "size", "weekNumber"], outputs: ["cellEnter", "cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1186,7 +1371,11 @@ 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"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -1214,6 +1403,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>
@@ -1224,7 +1414,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [allowReverse]="allowReverse"
             [disabled]="disabled"
             [isActive]="isActive"
             [showOtherMonthDays]="showOtherMonthDays"
@@ -1288,6 +1482,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 +1587,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/calendar.module.mjs

@@ -64,8 +64,8 @@ import * as i0 from "@angular/core";
  */
 export class CalendarModule {
 }
-CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
+CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
         NavigationComponent,
         CalendarCustomMessagesComponent,
         CalendarLocalizedMessagesDirective,
@@ -83,7 +83,7 @@ CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ViewListComponent,
         CalendarCommonModule,
         TemplatesModule] });
-CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, providers: [
+CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, providers: [
         CalendarDOMService,
         CenturyViewService,
         DecadeViewService,
@@ -99,7 +99,7 @@ CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         EventsModule,
         ResizeSensorModule, CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/calendar/calendars.module.mjs

@@ -42,14 +42,14 @@ import * as i0 from "@angular/core";
  */
 export class CalendarsModule {
 }
-CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule], exports: [CalendarModule,
         MultiViewCalendarModule] });
-CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule, CalendarModule,
         MultiViewCalendarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [