@progress/kendo-angular-dateinputs 7.1.2 → 7.1.3-dev.202210211241

package/esm2015/calendar/horizontal-view-list.component.js

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Input, Output, HostListener } from '@angular/core';
 import { cloneDate } from '@progress/kendo-date-math';
 import { Action } from './models/navigation-action.enum';
 import { CalendarViewEnum } from './models/view.enum';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { dateInRange, hasChange } from '../util';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { isPresent } from '../common/utils';
+import { attributeNames, isPresent } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "@progress/kendo-angular-intl";
@@ -39,16 +39,28 @@ export class HorizontalViewListComponent {
         this.showViewHeader = false;
         this.animateNavigation = false;
         this.orientation = 'horizontal';
+        this.tabIndex = 0;
+        this.disabled = false;
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.cellEnter = new EventEmitter();
         this.cellLeave = new EventEmitter();
         this.activeDateChange = new EventEmitter();
+        this.focusCalendar = new EventEmitter();
+        this.blurCalendar = new EventEmitter();
+        this.focusedCellChange = new EventEmitter();
         this.getComponentClass = true;
         this.weekNames = [];
+        this.wideWeekNames = [];
         this.dates = [];
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.focusCalendar.emit();
+    }
     get weekNumber() {
         return this.showWeekNumbers && this.isMonthView();
     }
@@ -73,10 +85,17 @@ export class HorizontalViewListComponent {
     get getComponentCenturyClass() {
         return this.activeView === CalendarViewEnum.century;
     }
+    get getActiveDescendant() {
+        return this.views === 1 ? this.activeDescendant : null;
+    }
+    get getTabIndex() {
+        return this.disabled || this.views === 2 ? null : this.tabIndex;
+    }
     ngOnChanges(changes) {
         this.initService();
         if (this.weekNames.length === 0 || changes.weekNumber) {
-            this.weekNames = this.weekService.getWeekNames(this.weekNumber);
+            this.weekNames = this.getWeekNames('short');
+            this.wideWeekNames = this.getWeekNames('wide');
         }
         if (!this.service) {
             return;
@@ -93,6 +112,11 @@ export class HorizontalViewListComponent {
             this.activeDate = cloneDate(this.dates[0]);
             this.activeDateChange.emit(this.activeDate);
         }
+        this.setAriaActivedescendant();
+        //set tabindex for MultiViewCalendar
+        if (this.views === 2) {
+            this.renderer.setAttribute(this.element.nativeElement, 'tabindex', this.tabIndex.toString());
+        }
     }
     ngAfterViewInit() {
         // make the calendar look the same in the different browsers
@@ -197,6 +221,9 @@ export class HorizontalViewListComponent {
         }
         return this.isListInRange(this.service.datesList(this.move(action), this.getTake(this.skip)));
     }
+    getWeekNames(type) {
+        return this.weekService.getWeekNames(this.weekNumber, type);
+    }
     setTableMinWidth() {
         const container = this.element.nativeElement;
         const table = container.querySelector('table');
@@ -206,7 +233,8 @@ export class HorizontalViewListComponent {
         }
     }
     intlChange() {
-        this.weekNames = this.weekService.getWeekNames(this.weekNumber);
+        this.weekNames = this.getWeekNames('short');
+        this.wideWeekNames = this.getWeekNames('wide');
         this.cdr.markForCheck();
     }
     clampDate(value) {
@@ -226,19 +254,34 @@ export class HorizontalViewListComponent {
     getTake(skip) {
         return Math.min(this.total - skip, this.views);
     }
+    setAriaActivedescendant() {
+        if (this.views === 2) {
+            this.renderer.setAttribute(this.element.nativeElement, attributeNames.ariaActiveDescendant, this.activeDescendant);
+        }
+    }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { 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", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange" }, host: { 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" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { 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", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleFocus()" }, 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" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 role="grid"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
+                [attr.aria-labelledby]="id"
+                [attr.aria-activedescendant]="getActiveDescendant"
+                [attr.tabindex]="getTabIndex"
+                (focus)="focusCalendar.emit()"
+                (focusout)="blurCalendar.emit($event)"
             >
                 <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
-                <thead *ngIf="isMonthView()" class="k-calendar-thead">
+                <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
-                        <th *ngFor="let name of weekNames" class="k-calendar-th">{{name}}</th>
+                        <th *ngFor="let name of weekNames; let i = index;"
+                        class="k-calendar-th"
+                        scope="col"
+                        [attr.aria-label]="wideWeekNames[i]"
+                        role="columnheader"
+                        >{{name}}</th>
                     </tr>
                 </thead>
                 <tbody
@@ -263,6 +306,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                     (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                     (cellEnter)="cellEnter.emit($event)"
                     (cellLeave)="cellLeave.emit($event)"
+                    (focusedCellId)="focusedCellChange.emit($event)"
                 >
                 </tbody>
             </table>
@@ -298,7 +342,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             }"
         >
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -310,11 +354,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 role="grid"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
+                [attr.aria-labelledby]="id"
+                [attr.aria-activedescendant]="getActiveDescendant"
+                [attr.tabindex]="getTabIndex"
+                (focus)="focusCalendar.emit()"
+                (focusout)="blurCalendar.emit($event)"
             >
                 <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
-                <thead *ngIf="isMonthView()" class="k-calendar-thead">
+                <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
-                        <th *ngFor="let name of weekNames" class="k-calendar-th">{{name}}</th>
+                        <th *ngFor="let name of weekNames; let i = index;"
+                        class="k-calendar-th"
+                        scope="col"
+                        [attr.aria-label]="wideWeekNames[i]"
+                        role="columnheader"
+                        >{{name}}</th>
                     </tr>
                 </thead>
                 <tbody
@@ -339,6 +393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                     (cellEnter)="cellEnter.emit($event)"
                     (cellLeave)="cellLeave.emit($event)"
+                    (focusedCellId)="focusedCellChange.emit($event)"
                 >
                 </tbody>
             </table>
@@ -376,7 +431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i3.WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i3.WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleFocus: [{
+                type: HostListener,
+                args: ["focus"]
+            }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
@@ -406,6 +464,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], orientation: [{
                 type: Input
+            }], activeDescendant: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -418,6 +484,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], activeDateChange: [{
                 type: Output
+            }], focusCalendar: [{
+                type: Output
+            }], blurCalendar: [{
+                type: Output
+            }], focusedCellChange: [{
+                type: Output
             }], getComponentClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-view"]

package/esm2015/calendar/localization/calendar-messages.js

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class CalendarMessages extends ComponentMessages {
 }
 CalendarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CalendarMessages, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle" }, usesInheritance: true, ngImport: i0 });
+CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CalendarMessages, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarMessages, decorators: [{
             type: Directive,
             args: [{
@@ -24,4 +24,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], nextButtonTitle: [{
                 type: Input
+            }], parentViewButtonTitle: [{
+                type: Input
             }] } });

package/esm2015/calendar/localization/multiview-calendar-messages.js

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
@@ -24,4 +24,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], nextButtonTitle: [{
                 type: Input
+            }], parentViewButtonTitle: [{
+                type: Input
             }] } });

package/esm2015/calendar/multiview-calendar.component.js

@@ -10,7 +10,6 @@ import { hasObservers, guid, Keys } from '@progress/kendo-angular-common';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
 import { HeaderComponent } from './header.component';
 import { BusViewService } from './services/bus-view.service';
-import { NavigationService } from './services/navigation.service';
 import { SelectionService } from './services/selection.service';
 import { DisabledDatesService } from './services/disabled-dates.service';
 import { CellTemplateDirective } from './templates/cell-template.directive';
@@ -28,7 +27,8 @@ import { disabledDatesRangeValidator } from '../validators/disabled-dates-range.
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } from '../util';
 import { Subscription } from 'rxjs';
-import { isPresent } from '../common/utils';
+import { isArrowWithShiftPressed, isPresent } from '../common/utils';
+import { NavigationService } from './services/navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "./services/navigation.service";
@@ -37,7 +37,6 @@ import * as i4 from "./services/selection.service";
 import * as i5 from "./header.component";
 import * as i6 from "./horizontal-view-list.component";
 import * as i7 from "./localization/multiview-calendar-localized-messages.directive";
-import * as i8 from "@progress/kendo-angular-common";
 const BOTTOM_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
 const TOP_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
@@ -83,10 +82,6 @@ export class MultiViewCalendarComponent {
         this.zone = zone;
         this.disabledDatesService = disabledDatesService;
         this.selectionService = selectionService;
-        /**
-         * @hidden
-         */
-        this.id = guid();
         /**
          * Determines whether the built-in min or max validators are enforced when validating a form.
          */
@@ -122,10 +117,6 @@ export class MultiViewCalendarComponent {
          * @hidden
          */
         this.isActive = false;
-        /**
-         * @hidden
-         */
-        this.isHeaderActive = false;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug activeview_multiviewcalendar %})).
@@ -202,6 +193,10 @@ export class MultiViewCalendarComponent {
          * @hidden
          */
         this.blurEvent = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.focusCalendar = new EventEmitter();
         this.cellUID = guid();
         this.isHovered = false;
         this.isPrevDisabled = true;
@@ -221,6 +216,7 @@ export class MultiViewCalendarComponent {
         this.disabledDatesRangeValidateFn = noop;
         this.subscriptions = new Subscription();
         this.setClasses(element.nativeElement);
+        this.id = `kendo-multiviewcalendarid-${this.bus.calendarId}-`;
     }
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
@@ -235,6 +231,24 @@ export class MultiViewCalendarComponent {
     get focusedDate() {
         return this._focusedDate;
     }
+    /**
+     * @hidden
+     */
+    get headerId() {
+        return this.id + 'header-';
+    }
+    /**
+     * @hidden
+     */
+    get multiViewCalendarHeaderIdLabel() {
+        return this.views === 2 ? this.id + 'header-' : null;
+    }
+    /**
+ * @hidden
+ */
+    get calendarHeaderIdLabel() {
+        return this.views === 1 ? this.id + 'header-' : null;
+    }
     /**
      * Sets or gets the `min` property of the Calendar and
      * defines the minimum allowed date value.
@@ -405,14 +419,14 @@ export class MultiViewCalendarComponent {
         return CalendarViewEnum[this.topView];
     }
     get widgetId() {
-        return this.id;
-    }
-    get calendarTabIndex() {
-        return this.disabled ? undefined : this.tabIndex;
+        return this.views === 2 ? this.id : null;
     }
     get ariaDisabled() {
         return this.disabled;
     }
+    /**
+     * @hidden
+     */
     get ariaActivedescendant() {
         return this.cellUID + this.focusedDate.getTime();
     }
@@ -427,14 +441,13 @@ export class MultiViewCalendarComponent {
         }
         this.isActive = false;
         this.isHovered = false; //ensure that hovered is also not active
-        this.isHeaderActive = this.headerElement.nativeElement.contains(relatedTarget);
     }
     /**
      * @hidden
      */
     handleFocus() {
         this.isActive = true;
-        this.isHeaderActive = false;
+        this.focusCalendar.emit();
     }
     /**
      * @hidden
@@ -467,10 +480,27 @@ export class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
-        if (this.isHeaderActive) {
+        const onArrowRightAndControl = event.keyCode === Keys.ArrowRight && (event.ctrlKey || event.metaKey);
+        const onArrowLeftAndControl = event.keyCode === Keys.ArrowLeft && (event.ctrlKey || event.metaKey);
+        const onTKeyPress = event.keyCode === Keys.KeyT;
+        const onEnterKeyPress = event.keyCode === Keys.Enter;
+        if (onArrowRightAndControl) {
+            event.preventDefault();
+            this.navigateView(this.nextView);
             return;
         }
-        if (event.keyCode === Keys.Enter) {
+        else if (onArrowLeftAndControl) {
+            event.preventDefault();
+            this.navigateView(this.prevView);
+            return;
+        }
+        else if (onTKeyPress) {
+            this.focusedDate = getToday();
+            this.bus.moveToBottom(this.activeViewEnum);
+            return;
+        }
+        else if (onEnterKeyPress) {
+            this.selectionService.lastClicked = this.focusedDate;
             this.performSelection(this.focusedDate, event);
         }
         const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(event), this.activeViewEnum), this.min, this.max);
@@ -483,6 +513,10 @@ export class MultiViewCalendarComponent {
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
         }
+        if (isArrowWithShiftPressed(event)) {
+            event['anyArrow'] = true;
+            this.performSelection(this.focusedDate, event);
+        }
     }
     ngOnInit() {
         this.subscriptions.add(this.bus.viewChanged.subscribe(({ view }) => {
@@ -534,7 +568,7 @@ export class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        this.element.nativeElement.focus();
+        this.element.nativeElement.querySelector('.k-calendar-view').focus();
     }
     /**
      * Blurs the Calendar component.
@@ -543,13 +577,9 @@ export class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        this.element.nativeElement.blur();
-    }
-    /**
-     * @hidden
-     */
-    handleHeaderFocus() {
-        this.isHeaderActive = true;
+        const activeElement = this.views === 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
+            this.element.nativeElement.querySelector('.k-content.k-calendar-table');
+        activeElement.blur();
     }
     /**
      * @hidden
@@ -678,6 +708,7 @@ export class MultiViewCalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
+        this.selectionService.lastClicked = date;
         this.performSelection(date, modifiers);
         const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
         if (!isSameView) {
@@ -701,6 +732,7 @@ export class MultiViewCalendarComponent {
     setClasses(element) {
         this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
+        this.renderer.addClass(element, 'k-calendar-md');
         this.renderer.addClass(element, 'k-calendar-range');
     }
     verifyChanges() {
@@ -756,7 +788,7 @@ export class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", 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"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.tabindex": "this.calendarTabIndex", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled", "attr.aria-activedescendant": "this.ariaActivedescendant" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", 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"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusCalendar: "focusCalendar" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "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,
@@ -778,6 +810,9 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
 
         i18n-nextButtonTitle="kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <kendo-calendar-header
@@ -785,6 +820,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="headerId"
         [rangeLength]="views"
         [templateRef]="headerTitleTemplateRef?.templateRef"
         [isPrevDisabled]="isPrevDisabled"
@@ -794,15 +830,14 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
-        [kendoEventsOutsideAngular]="{
-            focusin: handleHeaderFocus
-        }"
-        [scope]="this"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
+        [id]="calendarHeaderIdLabel"
+        [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
-        [isActive]="isActive || (isHovered && !isHeaderActive)"
+        [activeDescendant]="ariaActivedescendant"
+        [isActive]="isActive || isHovered"
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
@@ -817,14 +852,18 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [selectionRange]="selectionRange"
         [selectedDates]="selectedDates"
         [orientation]="orientation"
+        [tabIndex]="tabIndex"
+        [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
         (cellEnter)="emitCellEvent(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
+        (focusCalendar)="handleFocus()"
+        (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
-  `, isInline: true, components: [{ type: i5.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i6.HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange"] }], directives: [{ type: i7.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i5.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i6.HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], directives: [{ type: i7.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -854,6 +893,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         i18n-nextButtonTitle="kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <kendo-calendar-header
@@ -861,6 +903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="headerId"
         [rangeLength]="views"
         [templateRef]="headerTitleTemplateRef?.templateRef"
         [isPrevDisabled]="isPrevDisabled"
@@ -870,15 +913,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
-        [kendoEventsOutsideAngular]="{
-            focusin: handleHeaderFocus
-        }"
-        [scope]="this"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
+        [id]="calendarHeaderIdLabel"
+        [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
-        [isActive]="isActive || (isHovered && !isHeaderActive)"
+        [activeDescendant]="ariaActivedescendant"
+        [isActive]="isActive || isHovered"
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
@@ -893,11 +935,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [selectionRange]="selectionRange"
         [selectedDates]="selectedDates"
         [orientation]="orientation"
+        [tabIndex]="tabIndex"
+        [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
         (cellEnter)="emitCellEvent(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
+        (focusCalendar)="handleFocus()"
+        (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
   `
@@ -961,6 +1007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], blurEvent: [{
                 type: Output,
                 args: ['blur']
+            }], focusCalendar: [{
+                type: Output
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]
@@ -1012,18 +1060,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], widgetId: [{
                 type: HostBinding,
                 args: ['attr.id']
-            }], calendarTabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
             }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }], ariaActivedescendant: [{
-                type: HostBinding,
-                args: ['attr.aria-activedescendant']
             }], handleFocusout: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]

package/esm2015/calendar/services/bus-view.service.js

@@ -19,6 +19,7 @@ const viewOffset = (view, offset) => {
     const candidate = CalendarViewEnum[CalendarViewEnum[view + offset]];
     return candidate !== undefined ? candidate : view;
 };
+let nextCalendarId = 0;
 /**
  * @hidden
  */
@@ -28,6 +29,7 @@ export class BusViewService {
         this.viewChanged = new EventEmitter();
         this.bottom = CalendarViewEnum.month;
         this.top = CalendarViewEnum.century;
+        this.calendarId = nextCalendarId++;
     }
     configure(bottom, top) {
         this.bottom = bottom;

package/esm2015/calendar/services/month-view.service.js

@@ -77,7 +77,7 @@ export class MonthViewService {
                 const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
                 return {
                     formattedValue: this.value(cellDate),
-                    id: `${cellUID}${cellDate.getTime()}`,
+                    id: `${cellUID}${otherMonth ? cellDate.getTime() + '1' : cellDate.getTime()}`,
                     isFocused: this.isEqual(cellDate, focusedDate),
                     isSelected: isActiveView && selectedDates.some(date => this.isEqual(cellDate, date)),
                     isWeekend: this.isWeekend(cellDate),