@progress/kendo-angular-scheduler 4.3.1-dev.202208101208 → 4.3.1-dev.202208291508

package/editing-directives/editing-directive-base.d.ts

@@ -10,6 +10,7 @@ import { EditService } from './edit-service.interface';
 import { DialogsService } from '../editing/dialogs.service';
 import { EditMode } from '../types';
 import { AddEvent, EditEvent } from '../events';
+import { FocusService } from '../navigation';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -18,6 +19,7 @@ export declare abstract class EditingDirectiveBase implements OnInit, OnDestroy
     protected scheduler: SchedulerComponent;
     protected localDataChangesService: LocalDataChangesService;
     protected dialogsService: DialogsService;
+    private focusService;
     /**
      * Fires before the editing directive renders the **Add** dialog.
      */
@@ -36,7 +38,7 @@ export declare abstract class EditingDirectiveBase implements OnInit, OnDestroy
     protected defaultEditService: EditService<any>;
     protected userEditService: EditService<any>;
     protected abstract createModel(args: any): any;
-    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService);
+    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService, focusService: FocusService);
     /**
      * @hidden
      */

package/editing-directives/reactive-editing.directive.d.ts

@@ -8,6 +8,7 @@ import { EditingDirectiveBase } from './editing-directive-base';
 import { CreateFormGroupArgs } from '../types/create-form-group-args.interface';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { DialogsService } from '../editing/dialogs.service';
+import { FocusService } from "../navigation";
 import * as i0 from "@angular/core";
 /**
  * A directive which encapsulates the editing operations when the Scheduler
@@ -21,7 +22,7 @@ export declare class ReactiveEditingDirective extends EditingDirectiveBase {
      * The function that creates the `FormGroup` for the edited model.
      */
     createFormGroup: (args: CreateFormGroupArgs) => FormGroup;
-    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService);
+    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService, focusService: FocusService);
     ngOnInit(): void;
     protected editHandler(args: any): void;
     protected saveHandler(args: any): void;

package/esm2015/editing-directives/editing-directive-base.js

@@ -12,14 +12,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "../scheduler.component";
 import * as i2 from "../editing/local-data-changes.service";
 import * as i3 from "../editing/dialogs.service";
+import * as i4 from "../navigation";
 /**
  * @hidden
  */
 export class EditingDirectiveBase {
-    constructor(scheduler, localDataChangesService, dialogsService) {
+    constructor(scheduler, localDataChangesService, dialogsService, focusService) {
         this.scheduler = scheduler;
         this.localDataChangesService = localDataChangesService;
         this.dialogsService = dialogsService;
+        this.focusService = focusService;
         /**
          * Fires before the editing directive renders the **Add** dialog.
          */
@@ -97,6 +99,7 @@ export class EditingDirectiveBase {
                 .subscribe((editMode) => {
                 if (editMode !== undefined) {
                     this.handleRemove(dataItem, editMode);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -105,6 +108,7 @@ export class EditingDirectiveBase {
                 .subscribe((shouldRemove) => {
                 if (shouldRemove) {
                     this.handleRemove(dataItem, 0 /* Event */);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -205,11 +209,11 @@ export class EditingDirectiveBase {
         return editable && editable[action] !== false;
     }
 }
-EditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }, { token: i4.FocusService }], target: i0.ɵɵFactoryTarget.Directive });
 EditingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditingDirectiveBase, inputs: { editService: "editService" }, outputs: { add: "add", edit: "edit" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }]; }, propDecorators: { add: [{
+        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }, { type: i4.FocusService }]; }, propDecorators: { add: [{
                 type: Output
             }], edit: [{
                 type: Output

package/esm2015/editing-directives/reactive-editing.directive.js

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
 import * as i1 from "../scheduler.component";
 import * as i2 from "../editing/local-data-changes.service";
 import * as i3 from "../editing/dialogs.service";
+import * as i4 from "../navigation";
 /**
  * A directive which encapsulates the editing operations when the Scheduler
  * uses the [Reactive Angular Forms]({{ site.data.urls.angular['reactiveforms'] }}).
  */
 export class ReactiveEditingDirective extends EditingDirectiveBase {
-    constructor(scheduler, localDataChangesService, dialogsService) {
-        super(scheduler, localDataChangesService, dialogsService);
+    constructor(scheduler, localDataChangesService, dialogsService, focusService) {
+        super(scheduler, localDataChangesService, dialogsService, focusService);
         this.scheduler = scheduler;
         this.localDataChangesService = localDataChangesService;
         this.dialogsService = dialogsService;
@@ -91,14 +92,14 @@ export class ReactiveEditingDirective extends EditingDirectiveBase {
         return false;
     }
 }
-ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }], target: i0.ɵɵFactoryTarget.Directive });
+ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }, { token: i4.FocusService }], target: i0.ɵɵFactoryTarget.Directive });
 ReactiveEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ReactiveEditingDirective, selector: "[kendoSchedulerReactiveEditing]", inputs: { createFormGroup: ["kendoSchedulerReactiveEditing", "createFormGroup"] }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSchedulerReactiveEditing]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }]; }, propDecorators: { createFormGroup: [{
+        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }, { type: i4.FocusService }]; }, propDecorators: { createFormGroup: [{
                 type: Input,
                 args: ['kendoSchedulerReactiveEditing']
             }] } });

package/esm2015/navigation/focus.service.js

@@ -4,16 +4,18 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, Optional, EventEmitter } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../views/common/dom-events.service";
 /**
  * @hidden
  */
 export class FocusService {
-    constructor(renderer, wrapper, domEvents) {
+    constructor(renderer, wrapper, domEvents, zone) {
         this.renderer = renderer;
         this.wrapper = wrapper;
         this.domEvents = domEvents;
+        this.zone = zone;
         this.ariaActiveDescendant = new EventEmitter();
         this.items = new Set();
         this.elementMap = new WeakMap();
@@ -62,6 +64,24 @@ export class FocusService {
         }
         return this.activeItem !== currentItem;
     }
+    focusFirst() {
+        const firstEvent = Array.from(this.items.values())[0];
+        if (!firstEvent) {
+            return;
+        }
+        this.activate(firstEvent.element.nativeElement);
+        this.focus();
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const first = Array.from(this.items.values())[0];
+            if (!first) {
+                this.clearActiveDescendant();
+                return;
+            }
+            const id = first.element.nativeElement.getAttribute('id');
+            this.ariaActiveDescendant.next(id);
+            this.lastActiveDescendantId = id;
+        });
+    }
     clearActiveDescendant() {
         this.ariaActiveDescendant.next(null);
     }
@@ -72,6 +92,7 @@ export class FocusService {
             if (item === next) {
                 const id = item.element.nativeElement.getAttribute('id');
                 this.ariaActiveDescendant.next(id);
+                this.lastActiveDescendantId = id;
             }
         });
         this.activeItem = next;
@@ -110,6 +131,10 @@ export class FocusService {
     }
     onFocusIn(e) {
         const item = this.elementMap.get(e.target);
+        const shouldRestoreActiveDescendant = this.lastActiveDescendantId && this.lastActiveDescendantId !== (item === null || item === void 0 ? void 0 : item.element.nativeElement.getAttribute('id'));
+        if (shouldRestoreActiveDescendant) {
+            this.ariaActiveDescendant.next(this.lastActiveDescendantId);
+        }
         if (!item || item === this.focusedItem) {
             return;
         }
@@ -126,10 +151,10 @@ export class FocusService {
         }
         this.focusedItem.toggleFocus(false);
         this.focusedItem = null;
-        this.ariaActiveDescendant.next(null);
+        this.clearActiveDescendant();
     }
 }
-FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, deps: [{ token: i0.Renderer2, optional: true }, { token: i0.ElementRef, optional: true }, { token: i1.DomEventsService }], target: i0.ɵɵFactoryTarget.Injectable });
+FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, deps: [{ token: i0.Renderer2, optional: true }, { token: i0.ElementRef, optional: true }, { token: i1.DomEventsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
@@ -137,4 +162,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }] }, { type: i0.ElementRef, decorators: [{
                     type: Optional
-                }] }, { type: i1.DomEventsService }]; } });
+                }] }, { type: i1.DomEventsService }, { type: i0.NgZone }]; } });

package/esm2015/navigation/focusable.directive.js

@@ -44,6 +44,7 @@ export class FocusableDirective {
         this.element.nativeElement.focus();
     }
     toggleFocus(value) {
+        var _a;
         const focusedClass = 'k-selected';
         const element = this.element.nativeElement;
         if (value) {
@@ -52,7 +53,11 @@ export class FocusableDirective {
         else {
             this.renderer.removeClass(element, focusedClass);
         }
-        this.renderer.setAttribute(element, 'aria-selected', value.toString());
+        const selectable = element.matches('.k-scheduler-agendaview .k-scheduler-content .k-selected');
+        if (selectable) {
+            (_a = element.closest('.k-scheduler-agendaview').querySelector('[aria-selected="true"]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-selected');
+            this.renderer.setAttribute(element, 'aria-selected', value.toString());
+        }
     }
 }
 FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.FocusService }], target: i0.ɵɵFactoryTarget.Directive });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660133212,
+    publishDate: 1661785631,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/toolbar/navigation.component.js

@@ -8,9 +8,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "./toolbar.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "@progress/kendo-angular-dateinputs";
-import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@angular/common";
+import * as i4 from "../views/view-context.service";
+import * as i5 from "@progress/kendo-angular-dateinputs";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@angular/common";
 /**
  * A toolbar component which contains the controls for date navigation
  * ([see example]({% slug toolbar_scheduler %}#toc-including-the-built-in-components)).
@@ -28,10 +29,12 @@ import * as i6 from "@angular/common";
  * {% endmeta %}
  */
 export class ToolbarNavigationComponent {
-    constructor(popupService, toolbarService, localization, cd) {
+    constructor(popupService, toolbarService, localization, cd, viewContext) {
         this.popupService = popupService;
         this.toolbarService = toolbarService;
         this.localization = localization;
+        this.cd = cd;
+        this.viewContext = viewContext;
         /**
          * @hidden
          * TODO: Drop in next MAJOR version
@@ -47,6 +50,10 @@ export class ToolbarNavigationComponent {
          * TODO: Drop in next MAJOR version
          */
         this.inlineGapStyle = 'inherit';
+        /**
+         * @hidden
+         */
+        this.dateRangeText = { short: '', long: '', current: '' };
         this.subs = this.localization.changes.subscribe(() => {
             cd.markForCheck();
         });
@@ -92,6 +99,16 @@ export class ToolbarNavigationComponent {
     onBlur() {
         this.closePopup();
     }
+    ngOnInit() {
+        this.subs.add(this.ctx.dateRange.subscribe(res => {
+            this.dateRangeText.short = res === null || res === void 0 ? void 0 : res.shortText;
+            this.dateRangeText.long = res === null || res === void 0 ? void 0 : res.text;
+            this.setDateRangeText();
+        }));
+        this.subs.add(this.viewContext.resize.subscribe(() => {
+            this.setDateRangeText();
+        }));
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
         this.closePopup();
@@ -158,8 +175,13 @@ export class ToolbarNavigationComponent {
             this.popupRef = null;
         }
     }
+    setDateRangeText() {
+        const isDesktop = window.matchMedia('(min-width: 1024px)').matches;
+        this.dateRangeText.current = isDesktop ? this.dateRangeText.long : this.dateRangeText.short;
+        this.cd.detectChanges();
+    }
 }
-ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1.PopupService }, { token: i2.ToolbarService }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1.PopupService }, { token: i2.ToolbarService }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.ViewContextService }], target: i0.ɵɵFactoryTarget.Component });
 ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: { min: "min", max: "max" }, host: { properties: { "style.display": "this.inlineDisplayStyle", "style.flex-flow": "this.inlineFlexFlowStyle", "style.gap": "this.inlineGapStyle" } }, providers: [
         PopupService
     ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: `
@@ -190,18 +212,19 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             </button>
         </span>
 
-        <a #anchor
+        <button
+            #anchor
+            kendoButton
+            icon="calendar"
+            fillMode="flat"
             (click)="toggleSelectedDate({ nativeElement: anchor }, template)"
             role="button"
-            href="#"
             class="k-nav-current"
             tabindex="-1"
             [attr.aria-live]="'polite'"
         >
-            <span class="k-icon k-i-calendar"></span>
-            <span class="k-sm-date-format">{{ (ctx.dateRange | async)?.shortText }}</span>
-            <span class="k-lg-date-format">{{ (ctx.dateRange | async)?.text }}</span>
-        </a>
+            <span>{{ dateRangeText?.current }}</span>
+        </button>
 
         <ng-template #template>
             <kendo-calendar #calendar (blur)="onBlur()" (valueChange)="selectDate($event)" [value]="ctx.selectedDate | async" [min]="min" [max]="max">
@@ -209,7 +232,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i4.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i5.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -247,18 +270,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </button>
         </span>
 
-        <a #anchor
+        <button
+            #anchor
+            kendoButton
+            icon="calendar"
+            fillMode="flat"
             (click)="toggleSelectedDate({ nativeElement: anchor }, template)"
             role="button"
-            href="#"
             class="k-nav-current"
             tabindex="-1"
             [attr.aria-live]="'polite'"
         >
-            <span class="k-icon k-i-calendar"></span>
-            <span class="k-sm-date-format">{{ (ctx.dateRange | async)?.shortText }}</span>
-            <span class="k-lg-date-format">{{ (ctx.dateRange | async)?.text }}</span>
-        </a>
+            <span>{{ dateRangeText?.current }}</span>
+        </button>
 
         <ng-template #template>
             <kendo-calendar #calendar (blur)="onBlur()" (valueChange)="selectDate($event)" [value]="ctx.selectedDate | async" [min]="min" [max]="max">
@@ -268,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.ToolbarService }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { calendar: [{
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.ToolbarService }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.ViewContextService }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
             }], inlineDisplayStyle: [{

package/esm2015/views/common/view-footer.component.js

@@ -26,10 +26,12 @@ export class ViewFooterComponent {
 }
 ViewFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewFooterComponent, selector: "[viewFooter]", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-scheduler-footer": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "style.justify-content": "this.inlineJustifyContentStyle" } }, ngImport: i0, template: `
-        <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
-            <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
-            <span class="k-button-text">{{ item.text }}</span>
-        </button>
+        <span class="k-scheduler-navigation">
+            <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
+                <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
+                <span class="k-button-text">{{ item.text }}</span>
+            </button>
+        </span>
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
@@ -37,10 +39,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[viewFooter]',
                     template: `
-        <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
-            <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
-            <span class="k-button-text">{{ item.text }}</span>
-        </button>
+        <span class="k-scheduler-navigation">
+            <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
+                <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
+                <span class="k-button-text">{{ item.text }}</span>
+            </button>
+        </span>
     `
                 }]
         }], propDecorators: { hostClasses: [{

package/esm2015/views/month/month-view-item.component.js

@@ -22,6 +22,9 @@ export class MonthViewItemComponent extends BaseViewItem {
             this.toggle(false);
             return;
         }
+        else {
+            this.toggle(true);
+        }
         super.reflow();
     }
 }

package/esm2015/views/month/month-view-renderer.component.js

@@ -276,7 +276,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                         </ng-container>
                     </table>
                 </div>
-                <div class="k-scheduler-content" #content>
+                <div class="k-scheduler-content" tabindex="0" #content>
                      <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
@@ -404,7 +404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </ng-container>
                     </table>
                 </div>
-                <div class="k-scheduler-content" #content>
+                <div class="k-scheduler-content" tabindex="0" #content>
                      <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">

package/esm2015/views/view-items/base-view-item.js

@@ -78,8 +78,7 @@ export class BaseViewItem {
                 right: this.localization.rtl ? `${rect.left}px` : '',
                 top: `${rect.top}px`,
                 width: `${rect.width}px`,
-                height: `${rect.height}px`,
-                display: 'block'
+                height: `${rect.height}px`
             });
         }
     }
@@ -90,7 +89,6 @@ export class BaseViewItem {
         this.subs.add(this.slotService.slotsChange.subscribe(() => {
             this.rect = null;
             this.setStyles({
-                display: 'none',
                 width: 0,
                 left: 0
             });