@progress/kendo-angular-dateinputs 15.3.1-develop.2 → 15.4.0-develop.2

package/esm2020/calendar/calendar.component.mjs

@@ -35,6 +35,8 @@ import { areDatesEqual, dateInRange, DEFAULT_SIZE, getSizeClass, getToday, hasEx
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, preventDefault, isPresent, isArrowWithShiftPressed, selectors, attributeNames } from '../common/utils';
 import { from as fromPromise } from 'rxjs';
+import { HeaderTemplateDirective } from './templates/header-template.directive';
+import { FooterTemplateDirective } from './templates/footer-template.directivе';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "./services/dom.service";
@@ -113,6 +115,16 @@ export class CalendarComponent {
          * Determines whether the built-in min or max validators are enforced when validating a form.
          */
         this.rangeValidation = false;
+        /**
+         * Sets the format of the displayed Calendar week days' names.
+         * @default 'short'
+         */
+        this.weekDaysFormat = "short";
+        /**
+         * Toggles the visibility of the footer.
+         * @default false
+         */
+        this.footer = false;
         /**
          * Sets the Calendar selection mode
          * ([see example]({% slug multiple_selection_calendar %})).
@@ -451,6 +463,29 @@ export class CalendarComponent {
     get headerTitleTemplateRef() {
         return this._headerTitleTemplateRef || this.headerTitleTemplate;
     }
+    /**
+     * @hidden
+     *
+     * Defines the template for the header.
+     * Takes precedence over nested templates in the KendoCalendar tag.
+     */
+    set headerTemplateRef(template) {
+        this._headerTemplateRef = template;
+    }
+    get headerTemplateRef() {
+        return this._headerTemplateRef || this.headerTemplate;
+    }
+    /**
+     * @hidden
+     *
+     * Defines the template for the footer.
+     */
+    set footerTemplateRef(template) {
+        this._footerTemplateRef = template;
+    }
+    get footerTemplateRef() {
+        return this._footerTemplateRef || this.footerTemplate;
+    }
     /**
      * @hidden
      *
@@ -978,7 +1013,7 @@ export class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i0.ElementRef }, { token: i3.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i4.ScrollSyncService }, { token: i5.DisabledDatesService }, { token: i6.LocalizationService }, { token: i7.SelectionService }, { token: i8.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -992,7 +1027,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         NavigationService,
         ScrollSyncService,
         SelectionService
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "navigationView", first: true, predicate: NavigationComponent, descendants: true }, { propertyName: "monthView", first: true, predicate: ViewListComponent, descendants: true }, { propertyName: "multiViewCalendar", first: true, predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-calendar"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "navigationView", first: true, predicate: NavigationComponent, descendants: true }, { propertyName: "monthView", first: true, predicate: ViewListComponent, descendants: true }, { propertyName: "multiViewCalendar", first: true, predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-calendar"], usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoCalendarLocalizedMessages
         i18n-today="kendo.calendar.today|The label for the today button in the calendar header"
         today="Today"
@@ -1024,8 +1059,12 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [showOtherMonthDays]="showOtherMonthDays"
             [isActive]="isActive"
             [id]="headerId"
+            [weekDaysFormat]="weekDaysFormat"
             [cellTemplateRef]="activeCellTemplate()?.templateRef"
             [headerTitleTemplateRef]="headerTitleTemplateRef?.templateRef"
+            [headerTemplateRef]="headerTemplateRef?.templateRef"
+            [showFooter]="footer"
+            [footerTemplateRef]="footerTemplateRef?.templateRef"
             [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
             [cellUID]="cellUID"
             [min]="min"
@@ -1063,6 +1102,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
+            [weekDaysFormat]="weekDaysFormat"
             [weekNumber]="weekNumber"
             [animateNavigation]="animateNavigation"
             [cellTemplate]="activeCellTemplate()"
@@ -1071,6 +1111,9 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [decadeCellTemplate]="decadeCellTemplateRef"
             [centuryCellTemplate]="centuryCellTemplateRef"
             [headerTitleTemplate]="headerTitleTemplateRef"
+            [headerTemplate]="headerTemplateRef"
+            [footerTemplate]="footerTemplateRef"
+            [footer]="footer"
             [weekNumberTemplate]="weekNumberTemplateRef"
             [focusedDate]="focusedDate"
             [selection]="selection"
@@ -1093,7 +1136,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: i9.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: i10.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i12.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { type: i13.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i9.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: i10.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i12.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { type: i13.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1147,8 +1190,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [showOtherMonthDays]="showOtherMonthDays"
             [isActive]="isActive"
             [id]="headerId"
+            [weekDaysFormat]="weekDaysFormat"
             [cellTemplateRef]="activeCellTemplate()?.templateRef"
             [headerTitleTemplateRef]="headerTitleTemplateRef?.templateRef"
+            [headerTemplateRef]="headerTemplateRef?.templateRef"
+            [showFooter]="footer"
+            [footerTemplateRef]="footerTemplateRef?.templateRef"
             [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
             [cellUID]="cellUID"
             [min]="min"
@@ -1186,6 +1233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
+            [weekDaysFormat]="weekDaysFormat"
             [weekNumber]="weekNumber"
             [animateNavigation]="animateNavigation"
             [cellTemplate]="activeCellTemplate()"
@@ -1194,6 +1242,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [decadeCellTemplate]="decadeCellTemplateRef"
             [centuryCellTemplate]="centuryCellTemplateRef"
             [headerTitleTemplate]="headerTitleTemplateRef"
+            [headerTemplate]="headerTemplateRef"
+            [footerTemplate]="footerTemplateRef"
+            [footer]="footer"
             [weekNumberTemplate]="weekNumberTemplateRef"
             [focusedDate]="focusedDate"
             [selection]="selection"
@@ -1232,6 +1283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rangeValidation: [{
                 type: Input
+            }], weekDaysFormat: [{
+                type: Input
+            }], footer: [{
+                type: Input
             }], selection: [{
                 type: Input
             }], value: [{
@@ -1314,9 +1369,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], headerTitleTemplate: [{
                 type: ContentChild,
                 args: [HeaderTitleTemplateDirective, { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [HeaderTemplateDirective]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective]
             }], headerTitleTemplateRef: [{
                 type: Input,
                 args: ['headerTitleTemplate']
+            }], headerTemplateRef: [{
+                type: Input,
+                args: ['headerTemplate']
+            }], footerTemplateRef: [{
+                type: Input,
+                args: ['footerTemplate']
             }], navigationItemTemplate: [{
                 type: ContentChild,
                 args: [NavigationItemTemplateDirective, { static: false }]

package/esm2020/calendar/footer.component.mjs

@@ -0,0 +1,69 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, TemplateRef } from '@angular/core';
+import { getToday } from '../util';
+import { IntlService } from '@progress/kendo-angular-intl';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export class FooterComponent {
+    constructor(intl) {
+        this.intl = intl;
+        this.showFooter = true;
+        this.getToday = getToday;
+    }
+}
+FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "kendo-calendar-footer", inputs: { footerTemplateRef: "footerTemplateRef", activeViewValue: "activeViewValue", currentDate: "currentDate" }, host: { properties: { "class.k-calendar-footer": "this.showFooter" } }, ngImport: i0, template: `
+    <ng-template *ngIf="footerTemplateRef; else defaultRendering"
+        [ngTemplateOutlet]="footerTemplateRef"
+        [ngTemplateOutletContext]="{ activeView: activeViewValue, date: currentDate }">
+    </ng-template>
+    <ng-template #defaultRendering>
+        <button kendoButton
+            fillMode="flat"
+            themeColor="primary"
+            class="k-calendar-nav-today"
+            type="button"
+            tabindex="-1">
+                {{intl.formatDate(getToday(), 'D')}}
+        </button>
+    </ng-template>
+  `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-calendar-footer',
+                    template: `
+    <ng-template *ngIf="footerTemplateRef; else defaultRendering"
+        [ngTemplateOutlet]="footerTemplateRef"
+        [ngTemplateOutletContext]="{ activeView: activeViewValue, date: currentDate }">
+    </ng-template>
+    <ng-template #defaultRendering>
+        <button kendoButton
+            fillMode="flat"
+            themeColor="primary"
+            class="k-calendar-nav-today"
+            type="button"
+            tabindex="-1">
+                {{intl.formatDate(getToday(), 'D')}}
+        </button>
+    </ng-template>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.IntlService }]; }, propDecorators: { showFooter: [{
+                type: HostBinding,
+                args: ['class.k-calendar-footer']
+            }], footerTemplateRef: [{
+                type: Input
+            }], activeViewValue: [{
+                type: Input
+            }], currentDate: [{
+                type: Input
+            }] } });

package/esm2020/calendar/header.component.mjs

@@ -19,8 +19,8 @@ import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "@progress/kendo-angular-intl";
 import * as i4 from "./services/disabled-dates.service";
 import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@progress/kendo-angular-common";
-import * as i7 from "@angular/common";
+import * as i6 from "@angular/common";
+import * as i7 from "@progress/kendo-angular-common";
 /**
  * @hidden
  */
@@ -131,139 +131,151 @@ export class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i3.IntlService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
-    <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
-        role="button"
-        [id]="id"
-        tabindex="-1"
-        [class.k-disabled]="!navigate"
-        [attr.aria-disabled]="isDisabled()"
-        [kendoEventsOutsideAngular]="{
-            click: handleNavigation
-        }"
-        [title]="parentViewButtonTitle"
-        [scope]="this">
-        <ng-template [ngIf]="!templateRef">{{title}}</ng-template>
-        <ng-template
-            [ngIf]="templateRef"
-            [ngTemplateOutlet]="templateRef"
-            [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
-        ></ng-template>
-    </span>
-    <span class="k-spacer"></span>
-    <span class="k-calendar-nav k-hstack">
-        <button
-            *ngIf="showNavigationButtons"
-            kendoButton
-            fillMode="flat"
-            [svgIcon]="chevronLeftIcon"
-            icon="chevron-left"
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template *ngIf="headerTemplateRef; else defaultRendering" 
+                [ngTemplateOutlet]="headerTemplateRef"
+                [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
+    </ng-template>
+    <ng-template #defaultRendering>
+        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+            role="button"
+            [id]="id"
             tabindex="-1"
-            type="button"
-            class="k-calendar-nav-prev"
-            [attr.aria-disabled]="isPrevDisabled"
-            [disabled]="isPrevDisabled"
-            [title]="prevButtonTitle"
-            (click)="prevButtonClick.emit()"
-        >
-        </button>
-        <button
-            class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
-            tabindex="-1"
-            [class.k-disabled]="!todayAvailable"
+            [class.k-disabled]="!navigate"
+            [attr.aria-disabled]="isDisabled()"
             [kendoEventsOutsideAngular]="{
-                click: handleTodayClick
+                click: handleNavigation
             }"
-            [scope]="this"
-            type="button"
-        >
-            {{ todayMessage }}
-        </button>
-        <button
-            *ngIf="showNavigationButtons"
-            kendoButton
-            fillMode="flat"
-            [svgIcon]="chevronRightIcon"
-            icon="chevron-right"
-            class="k-calendar-nav-next"
-            tabindex="-1"
-            type="button"
-            [attr.aria-disabled]="isNextDisabled"
-            [disabled]="isNextDisabled"
-            [title]="nextButtonTitle"
-            (click)="nextButtonClick.emit()"
-        >
-        </button>
-    </span>
-  `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+            [title]="parentViewButtonTitle"
+            [scope]="this">
+            <ng-template [ngIf]="!titleTemplateRef">{{title}}</ng-template>
+            <ng-template
+                [ngIf]="titleTemplateRef"
+                [ngTemplateOutlet]="titleTemplateRef"
+                [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
+            ></ng-template>
+        </span>
+        <span class="k-spacer"></span>
+        <span class="k-calendar-nav k-hstack">
+            <button
+                *ngIf="showNavigationButtons"
+                kendoButton
+                fillMode="flat"
+                [svgIcon]="chevronLeftIcon"
+                icon="chevron-left"
+                tabindex="-1"
+                type="button"
+                class="k-calendar-nav-prev"
+                [attr.aria-disabled]="isPrevDisabled"
+                [disabled]="isPrevDisabled"
+                [title]="prevButtonTitle"
+                (click)="prevButtonClick.emit()"
+            >
+            </button>
+            <button
+                class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+                tabindex="-1"
+                [class.k-disabled]="!todayAvailable"
+                [kendoEventsOutsideAngular]="{
+                    click: handleTodayClick
+                }"
+                [scope]="this"
+                type="button"
+            >
+                {{ todayMessage }}
+            </button>
+            <button
+                *ngIf="showNavigationButtons"
+                kendoButton
+                fillMode="flat"
+                [svgIcon]="chevronRightIcon"
+                icon="chevron-right"
+                class="k-calendar-nav-next"
+                tabindex="-1"
+                type="button"
+                [attr.aria-disabled]="isNextDisabled"
+                [disabled]="isNextDisabled"
+                [title]="nextButtonTitle"
+                (click)="nextButtonClick.emit()"
+            >
+            </button>
+        </span>
+    </ng-template>
+  `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-calendar-header',
                     template: `
-    <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
-        role="button"
-        [id]="id"
-        tabindex="-1"
-        [class.k-disabled]="!navigate"
-        [attr.aria-disabled]="isDisabled()"
-        [kendoEventsOutsideAngular]="{
-            click: handleNavigation
-        }"
-        [title]="parentViewButtonTitle"
-        [scope]="this">
-        <ng-template [ngIf]="!templateRef">{{title}}</ng-template>
-        <ng-template
-            [ngIf]="templateRef"
-            [ngTemplateOutlet]="templateRef"
-            [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
-        ></ng-template>
-    </span>
-    <span class="k-spacer"></span>
-    <span class="k-calendar-nav k-hstack">
-        <button
-            *ngIf="showNavigationButtons"
-            kendoButton
-            fillMode="flat"
-            [svgIcon]="chevronLeftIcon"
-            icon="chevron-left"
-            tabindex="-1"
-            type="button"
-            class="k-calendar-nav-prev"
-            [attr.aria-disabled]="isPrevDisabled"
-            [disabled]="isPrevDisabled"
-            [title]="prevButtonTitle"
-            (click)="prevButtonClick.emit()"
-        >
-        </button>
-        <button
-            class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+    <ng-template *ngIf="headerTemplateRef; else defaultRendering" 
+                [ngTemplateOutlet]="headerTemplateRef"
+                [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
+    </ng-template>
+    <ng-template #defaultRendering>
+        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+            role="button"
+            [id]="id"
             tabindex="-1"
-            [class.k-disabled]="!todayAvailable"
+            [class.k-disabled]="!navigate"
+            [attr.aria-disabled]="isDisabled()"
             [kendoEventsOutsideAngular]="{
-                click: handleTodayClick
+                click: handleNavigation
             }"
-            [scope]="this"
-            type="button"
-        >
-            {{ todayMessage }}
-        </button>
-        <button
-            *ngIf="showNavigationButtons"
-            kendoButton
-            fillMode="flat"
-            [svgIcon]="chevronRightIcon"
-            icon="chevron-right"
-            class="k-calendar-nav-next"
-            tabindex="-1"
-            type="button"
-            [attr.aria-disabled]="isNextDisabled"
-            [disabled]="isNextDisabled"
-            [title]="nextButtonTitle"
-            (click)="nextButtonClick.emit()"
-        >
-        </button>
-    </span>
+            [title]="parentViewButtonTitle"
+            [scope]="this">
+            <ng-template [ngIf]="!titleTemplateRef">{{title}}</ng-template>
+            <ng-template
+                [ngIf]="titleTemplateRef"
+                [ngTemplateOutlet]="titleTemplateRef"
+                [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
+            ></ng-template>
+        </span>
+        <span class="k-spacer"></span>
+        <span class="k-calendar-nav k-hstack">
+            <button
+                *ngIf="showNavigationButtons"
+                kendoButton
+                fillMode="flat"
+                [svgIcon]="chevronLeftIcon"
+                icon="chevron-left"
+                tabindex="-1"
+                type="button"
+                class="k-calendar-nav-prev"
+                [attr.aria-disabled]="isPrevDisabled"
+                [disabled]="isPrevDisabled"
+                [title]="prevButtonTitle"
+                (click)="prevButtonClick.emit()"
+            >
+            </button>
+            <button
+                class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+                tabindex="-1"
+                [class.k-disabled]="!todayAvailable"
+                [kendoEventsOutsideAngular]="{
+                    click: handleTodayClick
+                }"
+                [scope]="this"
+                type="button"
+            >
+                {{ todayMessage }}
+            </button>
+            <button
+                *ngIf="showNavigationButtons"
+                kendoButton
+                fillMode="flat"
+                [svgIcon]="chevronRightIcon"
+                icon="chevron-right"
+                class="k-calendar-nav-next"
+                tabindex="-1"
+                type="button"
+                [attr.aria-disabled]="isNextDisabled"
+                [disabled]="isNextDisabled"
+                [title]="nextButtonTitle"
+                (click)="nextButtonClick.emit()"
+            >
+            </button>
+        </span>
+    </ng-template>
   `
                 }]
         }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i3.IntlService }, { type: i4.DisabledDatesService }]; }, propDecorators: { activeView: [{
@@ -276,7 +288,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rangeLength: [{
                 type: Input
-            }], templateRef: [{
+            }], titleTemplateRef: [{
+                type: Input
+            }], headerTemplateRef: [{
                 type: Input
             }], isPrevDisabled: [{
                 type: Input

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

@@ -48,6 +48,7 @@ export class HorizontalViewListComponent {
         this.orientation = 'horizontal';
         this.tabIndex = 0;
         this.disabled = false;
+        this.weekDaysFormat = 'short';
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.cellEnter = new EventEmitter();
@@ -107,7 +108,7 @@ export class HorizontalViewListComponent {
     ngOnChanges(changes) {
         this.initService();
         if (this.weekNames.length === 0 || changes.weekNumber) {
-            this.weekNames = this.getWeekNames('short');
+            this.weekNames = this.getWeekNames(this.weekDaysFormat);
             this.wideWeekNames = this.getWeekNames('wide');
         }
         if (!this.service) {
@@ -252,7 +253,7 @@ export class HorizontalViewListComponent {
         }
     }
     intlChange() {
-        this.weekNames = this.getWeekNames('short');
+        this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
         this.cdr.markForCheck();
     }
@@ -280,7 +281,7 @@ export class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views >= 2 ? 'none' : 'grid'"
@@ -498,6 +499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], id: [{
                 type: Input
+            }], weekDaysFormat: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{