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

package/esm2020/calendar/multiview-calendar.component.mjs

@@ -29,6 +29,8 @@ import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } fr
 import { Subscription } from 'rxjs';
 import { isArrowWithShiftPressed, isPresent } from '../common/utils';
 import { NavigationService } from './services/navigation.service';
+import { HeaderTemplateDirective } from './templates/header-template.directive';
+import { FooterTemplateDirective } from './templates/footer-template.directivе';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "./services/navigation.service";
@@ -36,8 +38,9 @@ import * as i3 from "./services/disabled-dates.service";
 import * as i4 from "./services/selection.service";
 import * as i5 from "./header.component";
 import * as i6 from "./horizontal-view-list.component";
-import * as i7 from "./localization/multiview-calendar-localized-messages.directive";
-import * as i8 from "@angular/common";
+import * as i7 from "./footer.component";
+import * as i8 from "./localization/multiview-calendar-localized-messages.directive";
+import * as i9 from "@angular/common";
 const BOTTOM_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
 const TOP_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
@@ -94,6 +97,11 @@ export 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.
          */
@@ -126,6 +134,11 @@ export 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
          */
@@ -427,6 +440,18 @@ export 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
      *
@@ -439,6 +464,18 @@ export 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;
@@ -843,7 +880,7 @@ export class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: i1.BusViewService }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DisabledDatesService }, { token: i4.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "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,
@@ -855,7 +892,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"
@@ -878,7 +915,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"
@@ -898,6 +936,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
+        [weekDaysFormat]="weekDaysFormat"
         [views]="views"
         [min]="min"
         [max]="max"
@@ -920,7 +959,13 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
-  `, isInline: true, components: [{ type: i5.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i6.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: i7.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i8.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: i5.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i6.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: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], directives: [{ type: i8.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i9.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: [{
@@ -963,7 +1008,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"
@@ -983,6 +1029,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"
@@ -1005,6 +1052,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: i1.BusViewService }, { type: i0.ElementRef }, { type: i2.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.DisabledDatesService }, { type: i4.SelectionService }]; }, propDecorators: { showOtherMonthDays: [{
@@ -1015,6 +1068,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], focusedDate: [{
                 type: Input
+            }], footer: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{
@@ -1033,6 +1088,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], weekDaysFormat: [{
+                type: Input
             }], isActive: [{
                 type: Input
             }], disabledDates: [{
@@ -1120,9 +1177,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 }]

package/esm2020/calendar/templates/footer-template.directiv/320/265.mjs

@@ -0,0 +1,43 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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 { }
+ * ```
+ */
+export 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 }]; } });

package/esm2020/calendar/templates/header-template.directive.mjs

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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 { }
+ * ```
+ */
+export 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 }]; } });

package/esm2020/calendar/templates.module.mjs

@@ -11,6 +11,8 @@ import { CenturyCellTemplateDirective } from './templates/century-cell-template.
 import { WeekNumberCellTemplateDirective } from './templates/weeknumber-cell-template.directive';
 import { HeaderTitleTemplateDirective } from './templates/header-title-template.directive';
 import { NavigationItemTemplateDirective } from './templates/navigation-item-template.directive';
+import { HeaderTemplateDirective } from './templates/header-template.directive';
+import { FooterTemplateDirective } from './templates/footer-template.directivе';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -37,14 +39,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,
@@ -57,7 +63,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CenturyCellTemplateDirective,
                         WeekNumberCellTemplateDirective,
                         HeaderTitleTemplateDirective,
-                        NavigationItemTemplateDirective
+                        NavigationItemTemplateDirective,
+                        HeaderTemplateDirective,
+                        FooterTemplateDirective
                     ],
                     exports: [
                         CellTemplateDirective,
@@ -67,7 +75,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CenturyCellTemplateDirective,
                         WeekNumberCellTemplateDirective,
                         HeaderTitleTemplateDirective,
-                        NavigationItemTemplateDirective
+                        NavigationItemTemplateDirective,
+                        HeaderTemplateDirective,
+                        FooterTemplateDirective
                     ]
                 }]
         }] });

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

@@ -19,8 +19,9 @@ import * as i3 from "./services/dom.service";
 import * as i4 from "./header.component";
 import * as i5 from "../virtualization/virtualization.component";
 import * as i6 from "./view.component";
-import * as i7 from "@angular/common";
-import * as i8 from "./for.directive";
+import * as i7 from "./footer.component";
+import * as i8 from "@angular/common";
+import * as i9 from "./for.directive";
 const VIEWS_COUNT = 5;
 const isEqualMonthYear = (date1, date2) => (date1 && date2 &&
     date1.getFullYear() === date2.getFullYear() &&
@@ -41,6 +42,8 @@ export 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();
@@ -80,8 +83,11 @@ export 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;
@@ -94,7 +100,7 @@ export 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;
@@ -179,7 +185,7 @@ export 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();
@@ -187,14 +193,15 @@ export class ViewListComponent {
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewListComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.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>
@@ -252,7 +259,13 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ></tbody>
         </table>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.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: i8.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: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.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: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.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: [{
@@ -265,7 +278,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>
@@ -323,6 +337,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: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
@@ -331,6 +351,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: [{
@@ -353,6 +377,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: [{

package/esm2020/calendar/view.component.mjs

@@ -18,7 +18,6 @@ import * as i2 from "@progress/kendo-angular-intl";
 import * as i3 from "./services/disabled-dates.service";
 import * as i4 from "@angular/common";
 import * as i5 from "./for.directive";
-import * as i6 from "@progress/kendo-angular-common";
 /**
  * @hidden
  */
@@ -244,9 +243,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))}}
@@ -284,7 +281,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </td>
         </ng-container>
     </tr>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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: [{
@@ -299,9 +296,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))}}

package/esm2020/common/models/week-days-format.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};