@progress/kendo-angular-scheduler 4.3.1-dev.202208110754 → 4.3.1

package/esm2015/navigation/focus.service.js

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, Optional, EventEmitter } from '@angular/core';
-import { Subscription, take } from 'rxjs';
+import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../views/common/dom-events.service";
 /**

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: 1660204372,
+    publishDate: 1662549700,
     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/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
             });

package/fesm2015/kendo-angular-scheduler.js

@@ -10,10 +10,10 @@ import * as i12$1 from '@progress/kendo-angular-common';
 import { hasObservers, isDocumentAvailable, isChanged, Keys, anyChanged, ResizeSensorComponent, EventsModule, guid, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { isEqualDate, timezoneNames, ZonedDate, toLocalDate, getDate, Day, MS_PER_DAY, addDays, firstDayOfMonth, addMonths, firstDayInWeek } from '@progress/kendo-date-math';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i4 from '@progress/kendo-angular-dateinputs';
+import * as i5 from '@progress/kendo-angular-dateinputs';
 import { PreventableEvent as PreventableEvent$1, CalendarModule, DateInputsModule } from '@progress/kendo-angular-dateinputs';
-import { Subject, BehaviorSubject, fromEvent, Subscription, take, combineLatest, merge } from 'rxjs';
-import { auditTime, buffer, filter, map, debounceTime, take as take$1, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
+import { Subject, BehaviorSubject, fromEvent, Subscription, combineLatest, merge } from 'rxjs';
+import { auditTime, buffer, filter, map, debounceTime, take, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
 import * as i11$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@progress/kendo-angular-dialog';
@@ -43,7 +43,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660204372,
+    publishDate: 1662549700,
     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'
 };
@@ -1618,7 +1618,7 @@ class DialogsService {
                 this.focusService.focus();
                 return false;
             }
-            this.viewState.layoutEnd.pipe(take$1(1)).subscribe(() => this.focusService.focus());
+            this.viewState.layoutEnd.pipe(take(1)).subscribe(() => this.focusService.focus());
             const res = result;
             return res.value;
         }));
@@ -2305,10 +2305,12 @@ const alwaysFalse = () => false;
  * {% endmeta %}
  */
 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
@@ -2324,6 +2326,10 @@ 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();
         });
@@ -2369,6 +2375,16 @@ 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();
@@ -2435,8 +2451,13 @@ 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$1.PopupService }, { token: ToolbarService }, { token: i2.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$1.PopupService }, { token: ToolbarService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: 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: `
@@ -2467,18 +2488,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">
@@ -2486,7 +2508,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: i3.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": i11.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: i3.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": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -2524,18 +2546,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">
@@ -2545,7 +2568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: ToolbarService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { calendar: [{
+        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: ToolbarService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
             }], inlineDisplayStyle: [{
@@ -3079,7 +3102,7 @@ SchedulerDateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         [(value)]='date'
         (valueChange)='onValueChange($event)'
     ></kendo-timepicker>
-    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -4513,7 +4536,7 @@ RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </li>
             </ul>
         </div>
-    `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }] });
+    `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEndRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -8301,7 +8324,7 @@ class AgendaViewInternalComponent {
             this.tasks.next(tasks);
         }));
         this.subs.add(this.viewContext.optionsChange.subscribe(this.optionsChange.bind(this)));
-        const onStable = () => this.zone.onStable.pipe(take$1(1));
+        const onStable = () => this.zone.onStable.pipe(take(1));
         this.subs.add(combineLatest(this.tasks, this.localization.changes).pipe(switchMap(onStable))
             .subscribe(this.updateContentHeight));
         this.subs.add(this.pdfService.createElement.subscribe(this.createPDFElement.bind(this)));
@@ -8909,8 +8932,7 @@ 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`
             });
         }
     }
@@ -8921,7 +8943,6 @@ class BaseViewItem {
         this.subs.add(this.slotService.slotsChange.subscribe(() => {
             this.rect = null;
             this.setStyles({
-                display: 'none',
                 width: 0,
                 left: 0
             });
@@ -9331,6 +9352,9 @@ class MonthViewItemComponent extends BaseViewItem {
             this.toggle(false);
             return;
         }
+        else {
+            this.toggle(true);
+        }
         super.reflow();
     }
 }
@@ -9666,7 +9690,7 @@ class BaseView {
         }
     }
     onStable() {
-        return this.zone.onStable.asObservable().pipe(take$1(1));
+        return this.zone.onStable.asObservable().pipe(take(1));
     }
     updateView() {
         this.slotService.invalidate();
@@ -11346,10 +11370,12 @@ 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: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
@@ -11357,10 +11383,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: [{
@@ -15892,7 +15920,7 @@ class ShortcutsDirective {
         }
     }
     focusWait() {
-        this.viewState.layoutEnd.pipe(take$1(1)).subscribe(() => this.focusService.focus());
+        this.viewState.layoutEnd.pipe(take(1)).subscribe(() => this.focusService.focus());
     }
 }
 ShortcutsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShortcutsDirective, deps: [{ token: SchedulerComponent }, { token: DomEventsService }, { token: FocusService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ViewStateService }, { token: DialogsService }], target: i0.ɵɵFactoryTarget.Directive });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-scheduler",
-  "version": "4.3.1-dev.202208110754",
+  "version": "4.3.1",
   "description": "Kendo UI Scheduler Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/toolbar/navigation.component.d.ts

@@ -8,7 +8,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ToolbarService } from './toolbar.service';
 import { ToolbarContext } from './toolbar-context';
 import { CalendarComponent } from '@progress/kendo-angular-dateinputs';
+import { ViewContextService } from '../views/view-context.service';
 import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+interface DateRangeText {
+    short: string;
+    long: string;
+    current: string;
+}
 /**
  * A toolbar component which contains the controls for date navigation
  * ([see example]({% slug toolbar_scheduler %}#toc-including-the-built-in-components)).
@@ -29,6 +38,8 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
     private popupService;
     private toolbarService;
     private localization;
+    private cd;
+    private viewContext;
     set calendar(calendar: CalendarComponent);
     /**
      * @hidden
@@ -73,13 +84,18 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
      * @hidden
      */
     get ctx(): ToolbarContext;
+    /**
+     * @hidden
+     */
+    dateRangeText: DateRangeText;
     private popupRef;
     private subs;
-    constructor(popupService: PopupService, toolbarService: ToolbarService, localization: LocalizationService, cd: ChangeDetectorRef);
+    constructor(popupService: PopupService, toolbarService: ToolbarService, localization: LocalizationService, cd: ChangeDetectorRef, viewContext: ViewContextService);
     /**
      * @hidden
      */
     onBlur(): void;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -102,6 +118,8 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
      */
     todayClick(): boolean;
     protected closePopup(): void;
+    private setDateRangeText;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarNavigationComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarNavigationComponent, "[kendoSchedulerToolbarNavigation]", never, { "min": "min"; "max": "max"; }, {}, never, never>;
 }
+export {};