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

package/fesm2020/progress-kendo-angular-dateinputs.mjs

@@ -14,14 +14,14 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
 import { localeData, IntlModule } from '@progress/kendo-angular-intl';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, fromEvent, EMPTY, from, BehaviorSubject, merge } from 'rxjs';
-import * as i7 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, calendarIcon, xIcon, clockIcon } from '@progress/kendo-svg-icons';
 import * as i10 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
 import { DateInput } from '@progress/kendo-dateinputs-common';
-import * as i7$1 from '@progress/kendo-angular-icons';
+import * as i7 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
@@ -37,8 +37,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1711112104,
-    version: '15.3.1-develop.2',
+    publishDate: 1711115601,
+    version: '15.4.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1801,9 +1801,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 class="k-alt k-calendar-td"
                 role="gridcell"
                 *ngIf="firstDate(row); else emptyCell"
-                [kendoEventsOutsideAngular]="{
-                    click: handleWeekNumberClick.bind(this, row)
-                }"
+                (click)="handleWeekNumberClick(row)"
             >
                 <ng-template [ngIf]="!weekNumberTemplateRef">
                     {{getWeekNumber(firstDate(row))}}
@@ -1841,7 +1839,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </td>
         </ng-container>
     </tr>
-  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -1856,9 +1854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 class="k-alt k-calendar-td"
                 role="gridcell"
                 *ngIf="firstDate(row); else emptyCell"
-                [kendoEventsOutsideAngular]="{
-                    click: handleWeekNumberClick.bind(this, row)
-                }"
+                (click)="handleWeekNumberClick(row)"
             >
                 <ng-template [ngIf]="!weekNumberTemplateRef">
                     {{getWeekNumber(firstDate(row))}}
@@ -1972,6 +1968,7 @@ 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();
@@ -2031,7 +2028,7 @@ 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) {
@@ -2176,7 +2173,7 @@ class HorizontalViewListComponent {
         }
     }
     intlChange() {
-        this.weekNames = this.getWeekNames('short');
+        this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
         this.cdr.markForCheck();
     }
@@ -2204,7 +2201,7 @@ class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: 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'"
@@ -2286,7 +2283,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             }"
         >
         </ng-template>
-    `, isInline: true, components: [{ type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2422,6 +2419,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], id: [{
                 type: Input
+            }], weekDaysFormat: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -2585,139 +2584,151 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }, { token: i1.IntlService }, { token: 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"
-            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"
+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"
-            [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: i10.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: i8.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: i10.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.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: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1$1.LocalizationService }, { type: i1.IntlService }, { type: DisabledDatesService }]; }, propDecorators: { activeView: [{
@@ -2730,7 +2741,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
@@ -3189,6 +3202,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
+/**
+ * Used for rendering the header of the Calendar. To define the header template, nest an `<ng-template>` tag
+ * with the `kendoCalendarHeaderTemplate` directive inside the component tag. The template context is set to the
+ * current component. To get a reference to the current title, use the `let-title` directive. To provide more details about
+ * the current title, get a reference to the current `date` by using the `let-date` directive or get a reference to the
+ * current active view  by using the `let-activeView` directive.
+ *
+ * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * styles: ['.custom { color: red; }'],
+ * template: `
+ *  <kendo-calendar>
+ *    <ng-template kendoCalendarHeaderTemplate let-title>
+ *      <span class="custom">{{title}}</span>
+ *    </ng-template>
+ *  </kendo-calendar>
+ * `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+class HeaderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HeaderTemplateDirective, selector: "[kendoCalendarHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoCalendarHeaderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Used for rendering the footer of the Calendar. To define the footer template, nest an `<ng-template>` tag
+ * with the `kendoCalendarFooterTemplate` directive inside the component tag. The template context is set to the
+ * current component. To get a reference to the current `date` use the `let-date` directive. To get a reference to the
+ * current active view use the `let-activeView` directive.
+ *
+ * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * styles: ['.custom { color: red; }'],
+ * template: `
+ *  <kendo-calendar>
+ *    <ng-template kendoCalendarFooterTemplate let-date>
+ *      <span class="custom">{{date}}</span>
+ *    </ng-template>
+ *  </kendo-calendar>
+ * `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+class FooterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FooterTemplateDirective, selector: "[kendoCalendarFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoCalendarFooterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * @hidden
+ */
+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: i10.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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
+            }] } });
+
 /**
  * @hidden
  */
@@ -3297,6 +3446,11 @@ class MultiViewCalendarComponent {
          * Determines whether to display the calendar header.
          */
         this.showCalendarHeader = true;
+        /**
+         * Toggles the visibility of the footer.
+         * @default false
+         */
+        this.footer = false;
         /**
          * Determines whether the built-in min or max validators are enforced when validating a form.
          */
@@ -3329,6 +3483,11 @@ class MultiViewCalendarComponent {
          * it determines whether the component is focusable.
          */
         this.tabindex = 0;
+        /**
+         * Sets the format of the displayed Calendar week days' names.
+         * @default 'short'
+         */
+        this.weekDaysFormat = "short";
         /**
          * @hidden
          */
@@ -3630,6 +3789,18 @@ class MultiViewCalendarComponent {
     get weekNumberTemplateRef() {
         return this._weekNumberTemplateRef || this.weekNumberTemplate;
     }
+    /**
+     * @hidden
+     *
+     * Defines the template for the Calendar footer.
+     * Takes precedence over nested templates in the KendoMultiViewCalendar tag.
+     */
+    set footerTemplateRef(template) {
+        this._footerTemplateRef = template;
+    }
+    get footerTemplateRef() {
+        return this._footerTemplateRef || this.footerTemplate;
+    }
     /**
      * @hidden
      *
@@ -3642,6 +3813,18 @@ class MultiViewCalendarComponent {
     get headerTitleTemplateRef() {
         return this._headerTitleTemplateRef || this.headerTitleTemplate;
     }
+    /**
+     * @hidden
+     *
+     * Defines the template for the Calendar header.
+     * Takes precedence over nested templates in the KendoMultiViewCalendar tag.
+     */
+    set headerTemplateRef(template) {
+        this._headerTemplateRef = template;
+    }
+    get headerTemplateRef() {
+        return this._headerTemplateRef || this.headerTemplate;
+    }
     get activeViewEnum() {
         const activeView = CalendarViewEnum[this.activeView];
         return activeView < this.bottomViewEnum ? this.bottomViewEnum : activeView;
@@ -4046,7 +4229,7 @@ class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -4058,7 +4241,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         },
         NavigationService,
         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 }], viewQueries: [{ propertyName: "headerElement", first: true, predicate: HeaderComponent, descendants: true, read: ElementRef }, { propertyName: "viewList", first: true, predicate: HorizontalViewListComponent, descendants: true }], exportAs: ["kendo-multiviewcalendar"], 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 }], viewQueries: [{ propertyName: "headerElement", first: true, predicate: HeaderComponent, descendants: true, read: ElementRef }, { propertyName: "viewList", first: true, predicate: HorizontalViewListComponent, descendants: true }], exportAs: ["kendo-multiviewcalendar"], usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoMultiViewCalendarLocalizedMessages
         i18n-today="kendo.multiviewcalendar.today|The label for the today button in the calendar header"
         today="Today"
@@ -4081,7 +4264,8 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [max]="max"
         [id]="headerId"
         [rangeLength]="views"
-        [templateRef]="headerTitleTemplateRef?.templateRef"
+        [titleTemplateRef]="headerTitleTemplateRef?.templateRef"
+        [headerTemplateRef]="headerTemplateRef?.templateRef"
         [isPrevDisabled]="isPrevDisabled"
         [isNextDisabled]="isNextDisabled"
         [showNavigationButtons]="true"
@@ -4101,6 +4285,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
+        [weekDaysFormat]="weekDaysFormat"
         [views]="views"
         [min]="min"
         [max]="max"
@@ -4123,7 +4308,13 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
-  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], directives: [{ type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <kendo-calendar-footer
+        *ngIf="footer"
+        [footerTemplateRef]="footerTemplateRef?.templateRef"
+        [activeViewValue]="activeView"
+        [currentDate]="activeDate">
+    </kendo-calendar-footer>
+  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], directives: [{ type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -4166,7 +4357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         [max]="max"
         [id]="headerId"
         [rangeLength]="views"
-        [templateRef]="headerTitleTemplateRef?.templateRef"
+        [titleTemplateRef]="headerTitleTemplateRef?.templateRef"
+        [headerTemplateRef]="headerTemplateRef?.templateRef"
         [isPrevDisabled]="isPrevDisabled"
         [isNextDisabled]="isNextDisabled"
         [showNavigationButtons]="true"
@@ -4186,6 +4378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
+        [weekDaysFormat]="weekDaysFormat"
         [views]="views"
         [min]="min"
         [max]="max"
@@ -4208,6 +4401,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
+    <kendo-calendar-footer
+        *ngIf="footer"
+        [footerTemplateRef]="footerTemplateRef?.templateRef"
+        [activeViewValue]="activeView"
+        [currentDate]="activeDate">
+    </kendo-calendar-footer>
   `
                 }]
         }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ElementRef }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: DisabledDatesService }, { type: SelectionService }]; }, propDecorators: { showOtherMonthDays: [{
@@ -4218,6 +4417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], focusedDate: [{
                 type: Input
+            }], footer: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{
@@ -4236,6 +4437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], weekDaysFormat: [{
+                type: Input
             }], isActive: [{
                 type: Input
             }], disabledDates: [{
@@ -4323,9 +4526,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]
+            }], footerTemplateRef: [{
+                type: Input,
+                args: ['footerTemplate']
             }], headerTitleTemplateRef: [{
                 type: Input,
                 args: ['headerTitleTemplate']
+            }], headerTemplateRef: [{
+                type: Input,
+                args: ['headerTemplate']
             }], headerElement: [{
                 type: ViewChild,
                 args: [HeaderComponent, { static: false, read: ElementRef }]
@@ -4917,7 +5132,7 @@ VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         [class.k-scrollable-horizontal-placeholder]="direction === 'horizontal'"
         [ngStyle]="totalVertexLength"
     ></div>
-  `, isInline: true, directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+  `, isInline: true, directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: VirtualizationComponent, decorators: [{
             type: Component,
             args: [{
@@ -5104,7 +5319,7 @@ NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -5183,6 +5398,8 @@ class ViewListComponent {
         this.selectedDates = [];
         this.tabIndex = 0;
         this.disabled = false;
+        this.showFooter = false;
+        this.weekDaysFormat = 'short';
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.activeDateChange = new EventEmitter();
@@ -5222,8 +5439,11 @@ class ViewListComponent {
     get getComponentCenturyClass() {
         return this.activeView === CalendarViewEnum.century;
     }
+    get activeViewValue() {
+        return CalendarViewEnum[this.activeView];
+    }
     ngOnInit() {
-        this.weekNames = this.getWeekNames('short');
+        this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
         this.bottomOffset = this.getBottomOffset();
         this.viewOffset = -1 * this.dom.headerHeight;
@@ -5236,7 +5456,7 @@ class ViewListComponent {
             return;
         }
         this.cols = new Array(this.service.rowLength({ prependCell: this.weekNumber })).fill('');
-        this.weekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames('short') : this.weekNames;
+        this.weekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames(this.weekDaysFormat) : this.weekNames;
         this.wideWeekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames('wide') : this.weekNames;
         const activeViewChanged = hasChange(changes, 'activeView');
         const focusedDate = this.focusedDate;
@@ -5321,7 +5541,7 @@ class ViewListComponent {
         return this.weekNumber ? [''].concat(weekNames) : weekNames;
     }
     intlChange() {
-        this.weekNames = this.getWeekNames('short');
+        this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
         if (this.isMonthView()) {
             this.cdr.markForCheck();
@@ -5329,14 +5549,15 @@ class ViewListComponent {
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
         [id]="id"
         [activeView]="activeView"
-        [templateRef]="headerTitleTemplateRef"
+        [titleTemplateRef]="headerTitleTemplateRef"
+        [headerTemplateRef]="headerTemplateRef"
         (todayButtonClick)="todayButtonClick.emit($event)"
     >
     </kendo-calendar-header>
@@ -5394,7 +5615,13 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ></tbody>
         </table>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <kendo-calendar-footer
+        *ngIf="showFooter"
+        [footerTemplateRef]="footerTemplateRef"
+        [activeViewValue]="activeViewValue"
+        [currentDate]="activeDate">
+    </kendo-calendar-footer>
+  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5407,7 +5634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         [max]="max"
         [id]="id"
         [activeView]="activeView"
-        [templateRef]="headerTitleTemplateRef"
+        [titleTemplateRef]="headerTitleTemplateRef"
+        [headerTemplateRef]="headerTemplateRef"
         (todayButtonClick)="todayButtonClick.emit($event)"
     >
     </kendo-calendar-header>
@@ -5465,6 +5693,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             ></tbody>
         </table>
     </kendo-virtualization>
+    <kendo-calendar-footer
+        *ngIf="showFooter"
+        [footerTemplateRef]="footerTemplateRef"
+        [activeViewValue]="activeViewValue"
+        [currentDate]="activeDate">
+    </kendo-calendar-footer>
   `
                 }]
         }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
@@ -5473,6 +5707,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], headerTitleTemplateRef: [{
                 type: Input
+            }], headerTemplateRef: [{
+                type: Input
+            }], footerTemplateRef: [{
+                type: Input
             }], showOtherMonthDays: [{
                 type: Input
             }], activeView: [{
@@ -5495,6 +5733,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], id: [{
                 type: Input
+            }], showFooter: [{
+                type: Input
+            }], weekDaysFormat: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -5814,6 +6056,16 @@ 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 %})).
@@ -6152,6 +6404,29 @@ 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
      *
@@ -6679,7 +6954,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: 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,
@@ -6693,7 +6968,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"
@@ -6725,8 +7000,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"
@@ -6764,6 +7043,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
+            [weekDaysFormat]="weekDaysFormat"
             [weekNumber]="weekNumber"
             [animateNavigation]="animateNavigation"
             [cellTemplate]="activeCellTemplate()"
@@ -6772,6 +7052,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"
@@ -6794,7 +7077,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: 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: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: 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: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: 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: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: 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: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i4.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: [{
@@ -6848,8 +7131,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"
@@ -6887,6 +7174,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()"
@@ -6895,6 +7183,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"
@@ -6933,6 +7224,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: [{
@@ -7015,9 +7310,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 }]
@@ -7984,7 +8291,7 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -8323,6 +8630,16 @@ class DatePickerComponent {
          * @hidden
          */
         this.calendarIcon = calendarIcon;
+        /**
+         * Toggles the visibility of the Calendar footer.
+         * @default false
+         */
+        this.footer = false;
+        /**
+         * Sets the format of the displayed Calendar week days' names.
+         * @default 'short'
+         */
+        this.weekDaysFormat = "short";
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -8599,6 +8916,18 @@ class DatePickerComponent {
     set headerTitleTemplateRef(template) {
         this.headerTitleTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    set headerTemplateRef(template) {
+        this.headerTemplate = template;
+    }
+    /**
+     * @hidden
+     */
+    set footerTemplateRef(template) {
+        this.footerTemplate = template;
+    }
     /**
      * @hidden
      */
@@ -9299,7 +9628,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", 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"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -9310,7 +9639,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             provide: L10N_PREFIX,
             useValue: 'kendo.datepicker'
         }
-    ], 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: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], 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: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
             i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
             today="Today"
@@ -9435,6 +9764,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [type]="calendarType"
                 [min]="min"
                 [max]="max"
+                [weekDaysFormat]="weekDaysFormat"
                 [navigation]="navigation"
                 [animateNavigation]="animateCalendarNavigation"
                 [activeView]="activeView"
@@ -9449,6 +9779,9 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [centuryCellTemplate]="centuryCellTemplate"
                 [weekNumberTemplate]="weekNumberTemplate"
                 [headerTitleTemplate]="headerTitleTemplate"
+                [headerTemplate]="headerTemplate"
+                [footerTemplate]="footerTemplate"
+                [footer]="footer"
                 [navigationItemTemplate]="navigationItemTemplate"
                 [focusedDate]="focusedDate"
                 [value]="value"
@@ -9468,7 +9801,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "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", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -9612,6 +9945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [type]="calendarType"
                 [min]="min"
                 [max]="max"
+                [weekDaysFormat]="weekDaysFormat"
                 [navigation]="navigation"
                 [animateNavigation]="animateCalendarNavigation"
                 [activeView]="activeView"
@@ -9626,6 +9960,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [centuryCellTemplate]="centuryCellTemplate"
                 [weekNumberTemplate]="weekNumberTemplate"
                 [headerTitleTemplate]="headerTitleTemplate"
+                [headerTemplate]="headerTemplate"
+                [footerTemplate]="footerTemplate"
+                [footer]="footer"
                 [navigationItemTemplate]="navigationItemTemplate"
                 [focusedDate]="focusedDate"
                 [value]="value"
@@ -9708,12 +10045,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], headerTitleTemplateRef: [{
                 type: Input,
                 args: ['headerTitleTemplate']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [HeaderTemplateDirective]
+            }], headerTemplateRef: [{
+                type: Input,
+                args: ['headerTemplate']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective]
+            }], footerTemplateRef: [{
+                type: Input,
+                args: ['footerTemplate']
+            }], footer: [{
+                type: Input
             }], navigationItemTemplate: [{
                 type: ContentChild,
                 args: [NavigationItemTemplateDirective, { static: false }]
             }], navigationItemTemplateRef: [{
                 type: Input,
                 args: ['navigationItemTemplate']
+            }], weekDaysFormat: [{
+                type: Input
             }], showOtherMonthDays: [{
                 type: Input
             }], activeView: [{
@@ -10745,7 +11098,7 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -11438,7 +11791,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [disabled]="disabled"
             >{{localization.get('cancel')}}</button>
         </div>
-    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -12794,7 +13147,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13229,6 +13582,11 @@ class DateTimePickerComponent {
          * @hidden
          */
         this.hostClasses = true;
+        /**
+         * Sets the format of the displayed Calendar week days' names.
+         * @default 'short'
+         */
+        this.weekDaysFormat = "short";
         /**
          * The maximum year to assume to be from the current century when typing two-digit year value
          * ([see example]({% slug formats_datetimepicker %}#toc-two-digit-year-format)).
@@ -13423,6 +13781,11 @@ class DateTimePickerComponent {
          * @hidden
          */
         this.xIcon = xIcon;
+        /**
+         * Toggles the visibility of the Calendar footer.
+         * @default false
+         */
+        this.footer = false;
         this._popupSettings = { animate: true };
         this._value = null;
         this._format = DEFAULT_DATEINPUT_FORMAT;
@@ -13738,6 +14101,18 @@ class DateTimePickerComponent {
         }
         this.windowSize = windowSize();
     }
+    /**
+     * @hidden
+     */
+    set headerTemplateRef(template) {
+        this.headerTemplate = template;
+    }
+    /**
+     * @hidden
+     */
+    set footerTemplateRef(template) {
+        this.footerTemplate = template;
+    }
     get activeTabComponent() {
         if (!this.isOpen) {
             return;
@@ -14408,7 +14783,7 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -14416,7 +14791,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
-    ], 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 }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], 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 }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -14680,6 +15055,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [type]="calendarType"
                             [min]="calendarMin"
                             [max]="calendarMax"
+                            [weekDaysFormat]="weekDaysFormat"
                             [weekNumber]="weekNumber"
                             [navigation]="false"
                             [animateNavigation]="animateCalendarNavigation"
@@ -14691,6 +15067,9 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [centuryCellTemplate]="centuryCellTemplate"
                             [weekNumberTemplate]="weekNumberTemplate"
                             [headerTitleTemplate]="headerTitleTemplate"
+                            [headerTemplate]="headerTemplate"
+                            [footerTemplate]="footerTemplate"
+                            [footer]="footer"
                             [disabled]="disableCalendar"
                             [disabledDates]="disabledDates"
                             (valueChange)="handleCalendarValueChange()"
@@ -14778,7 +15157,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "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", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -15058,6 +15437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [type]="calendarType"
                             [min]="calendarMin"
                             [max]="calendarMax"
+                            [weekDaysFormat]="weekDaysFormat"
                             [weekNumber]="weekNumber"
                             [navigation]="false"
                             [animateNavigation]="animateCalendarNavigation"
@@ -15069,6 +15449,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [centuryCellTemplate]="centuryCellTemplate"
                             [weekNumberTemplate]="weekNumberTemplate"
                             [headerTitleTemplate]="headerTitleTemplate"
+                            [headerTemplate]="headerTemplate"
+                            [footerTemplate]="footerTemplate"
+                            [footer]="footer"
                             [disabled]="disableCalendar"
                             [disabledDates]="disabledDates"
                             (valueChange)="handleCalendarValueChange()"
@@ -15175,6 +15558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['toggleButton', { static: true }]
             }], focusableId: [{
                 type: Input
+            }], weekDaysFormat: [{
+                type: Input
             }], showOtherMonthDays: [{
                 type: Input
             }], value: [{
@@ -15283,6 +15668,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], headerTitleTemplate: [{
                 type: ContentChild,
                 args: [HeaderTitleTemplateDirective, { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [HeaderTemplateDirective]
+            }], headerTemplateRef: [{
+                type: Input,
+                args: ['headerTemplate']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective]
+            }], footerTemplateRef: [{
+                type: Input,
+                args: ['footerTemplate']
+            }], footer: [{
+                type: Input
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
@@ -16323,7 +16722,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, components: [{ type: 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: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.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: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: 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: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.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: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -16544,7 +16943,7 @@ DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
-    `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -16850,14 +17249,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * The package exports:
  * - `HeaderComponent`&mdash;The component that renders the UI for vertical navigation.
  * - `ViewComponent`&mdash;The component that renders the active Calendar view.
+ * - `FooterComponent`&mdash;The component that renders the Calendar footer.
  */
 class CalendarCommonModule {
 }
 CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
         HeaderComponent,
+        FooterComponent,
         ViewComponent], imports: [CommonModule, EventsModule, ButtonModule], exports: [KForOf,
         HeaderComponent,
+        FooterComponent,
         ViewComponent] });
 CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarCommonModule, imports: [[CommonModule, EventsModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarCommonModule, decorators: [{
@@ -16866,11 +17268,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     declarations: [
                         KForOf,
                         HeaderComponent,
+                        FooterComponent,
                         ViewComponent
                     ],
                     exports: [
                         KForOf,
                         HeaderComponent,
+                        FooterComponent,
                         ViewComponent
                     ],
                     imports: [CommonModule, EventsModule, ButtonModule]
@@ -16902,14 +17306,18 @@ TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         CenturyCellTemplateDirective,
         WeekNumberCellTemplateDirective,
         HeaderTitleTemplateDirective,
-        NavigationItemTemplateDirective], exports: [CellTemplateDirective,
+        NavigationItemTemplateDirective,
+        HeaderTemplateDirective,
+        FooterTemplateDirective], exports: [CellTemplateDirective,
         MonthCellTemplateDirective,
         YearCellTemplateDirective,
         DecadeCellTemplateDirective,
         CenturyCellTemplateDirective,
         WeekNumberCellTemplateDirective,
         HeaderTitleTemplateDirective,
-        NavigationItemTemplateDirective] });
+        NavigationItemTemplateDirective,
+        HeaderTemplateDirective,
+        FooterTemplateDirective] });
 TemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TemplatesModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TemplatesModule, decorators: [{
             type: NgModule,
@@ -16922,7 +17330,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CenturyCellTemplateDirective,
                         WeekNumberCellTemplateDirective,
                         HeaderTitleTemplateDirective,
-                        NavigationItemTemplateDirective
+                        NavigationItemTemplateDirective,
+                        HeaderTemplateDirective,
+                        FooterTemplateDirective
                     ],
                     exports: [
                         CellTemplateDirective,
@@ -16932,7 +17342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CenturyCellTemplateDirective,
                         WeekNumberCellTemplateDirective,
                         HeaderTitleTemplateDirective,
-                        NavigationItemTemplateDirective
+                        NavigationItemTemplateDirective,
+                        HeaderTemplateDirective,
+                        FooterTemplateDirective
                     ]
                 }]
         }] });
@@ -17823,5 +18235,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AdaptiveModule, CalendarCommonModule, CalendarComponent, CalendarCustomMessagesComponent, CalendarLocalizedMessagesDirective, CalendarModule, CalendarViewEnum, CalendarsModule, CellTemplateDirective, CenturyCellTemplateDirective, DateInputComponent, DateInputCustomMessagesComponent, DateInputLocalizedMessagesDirective, DateInputModule, DateInputsModule, DatePickerComponent, DatePickerCustomMessagesComponent, DatePickerLocalizedMessagesDirective, DatePickerModule, DateRangeComponent, DateRangeEndInputDirective, DateRangeModule, DateRangePopupComponent, DateRangePopupCustomMessagesComponent, DateRangePopupLocalizedMessagesDirective, DateRangePopupTemplateDirective, DateRangeSelectionDirective, DateRangeService, DateRangeStartInputDirective, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, DateTimePickerModule, DecadeCellTemplateDirective, HeaderComponent, HeaderTitleTemplateDirective, HorizontalViewListComponent, KForOf, LocalizedMessagesDirective, MonthCellTemplateDirective, MultiViewCalendarComponent, MultiViewCalendarCustomMessagesComponent, MultiViewCalendarLocalizedMessagesDirective, MultiViewCalendarModule, NavigationComponent, NavigationItemTemplateDirective, PreventableEvent, TemplatesModule, TimeListComponent, TimePickerComponent, TimePickerCustomMessagesComponent, TimePickerLocalizedMessagesDirective, TimePickerModule, TimeSelectorComponent, TimeSelectorCustomMessagesComponent, TimeSelectorLocalizedMessagesDirective, ViewComponent, ViewListComponent, WeekNumberCellTemplateDirective, YearCellTemplateDirective };
+export { AdaptiveModule, CalendarCommonModule, CalendarComponent, CalendarCustomMessagesComponent, CalendarLocalizedMessagesDirective, CalendarModule, CalendarViewEnum, CalendarsModule, CellTemplateDirective, CenturyCellTemplateDirective, DateInputComponent, DateInputCustomMessagesComponent, DateInputLocalizedMessagesDirective, DateInputModule, DateInputsModule, DatePickerComponent, DatePickerCustomMessagesComponent, DatePickerLocalizedMessagesDirective, DatePickerModule, DateRangeComponent, DateRangeEndInputDirective, DateRangeModule, DateRangePopupComponent, DateRangePopupCustomMessagesComponent, DateRangePopupLocalizedMessagesDirective, DateRangePopupTemplateDirective, DateRangeSelectionDirective, DateRangeService, DateRangeStartInputDirective, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, DateTimePickerModule, DecadeCellTemplateDirective, FooterComponent, FooterTemplateDirective, HeaderComponent, HeaderTemplateDirective, HeaderTitleTemplateDirective, HorizontalViewListComponent, KForOf, LocalizedMessagesDirective, MonthCellTemplateDirective, MultiViewCalendarComponent, MultiViewCalendarCustomMessagesComponent, MultiViewCalendarLocalizedMessagesDirective, MultiViewCalendarModule, NavigationComponent, NavigationItemTemplateDirective, PreventableEvent, TemplatesModule, TimeListComponent, TimePickerComponent, TimePickerCustomMessagesComponent, TimePickerLocalizedMessagesDirective, TimePickerModule, TimeSelectorComponent, TimeSelectorCustomMessagesComponent, TimeSelectorLocalizedMessagesDirective, ViewComponent, ViewListComponent, WeekNumberCellTemplateDirective, YearCellTemplateDirective };