@progress/kendo-angular-dateinputs
Version:
Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).
634 lines (633 loc) • 23.9 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectorRef, EventEmitter, ElementRef, Renderer2, AfterViewChecked, OnChanges, OnDestroy, NgZone, Injector, AfterViewInit, DoCheck } from '@angular/core';
import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Day } from '@progress/kendo-date-math';
import { MultiViewCalendarComponent } from './multiview-calendar.component';
import { NavigationComponent } from './navigation.component';
import { ViewListComponent } from './view-list.component';
import { CalendarDOMService } from './services/dom.service';
import { BusViewService } from './services/bus-view.service';
import { NavigationService } from './services/navigation.service';
import { DisabledDatesService } from './services/disabled-dates.service';
import { SelectionService } from './services/selection.service';
import { ScrollSyncService } from './services/scroll-sync.service';
import { CellTemplateDirective } from './templates/cell-template.directive';
import { MonthCellTemplateDirective } from './templates/month-cell-template.directive';
import { YearCellTemplateDirective } from './templates/year-cell-template.directive';
import { DecadeCellTemplateDirective } from './templates/decade-cell-template.directive';
import { CenturyCellTemplateDirective } from './templates/century-cell-template.directive';
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 { PickerService } from '../common/picker.service';
import { CalendarView } from './models/view.type';
import { CalendarViewEnum } from './models/view.enum';
import { CalendarType } from './models/type';
import { CalendarSelection } from './models/selection';
import { DateInputSize } from '../common/models/size';
import { HeaderTemplateDirective } from './templates/header-template.directive';
import { FooterTemplateDirective } from './templates/footer-template.directive';
import { WeekDaysFormat } from '../common/models/week-days-format';
import { SelectionRangeEnd } from './models/selection-range-end.type';
import { SelectionRange } from './models/selection-range.interface';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export declare const CALENDAR_VALUE_ACCESSOR: any;
/**
* @hidden
*/
export declare const CALENDAR_RANGE_VALIDATORS: any;
/**
* @hidden
*/
export declare const KENDO_INPUT_PROVIDER: any;
/**
* Represents the [Kendo UI Calendar component for Angular](slug:overview_calendar).
* @example
* ```html
* <kendo-calendar></kendo-calendar>
* ```
*
* @remarks
* Supported children components are: {@link CalendarCustomMessagesComponent}.
*/
export declare class CalendarComponent implements ControlValueAccessor, OnChanges, DoCheck, OnDestroy, AfterViewChecked, AfterViewInit, Validator {
private bus;
dom: CalendarDOMService;
private element;
private navigator;
private renderer;
private cdr;
private ngZone;
private injector;
scrollSyncService: ScrollSyncService;
private disabledDatesService;
localization: LocalizationService;
private selectionService;
private pickerService?;
/**
* Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
*/
set showOtherMonthDays(_showOtherMonthDays: boolean);
get showOtherMonthDays(): boolean;
private _showOtherMonthDays;
/**
* @hidden
*/
id: string;
/**
* @hidden
*/
get popupId(): string;
/**
* Specifies the focused date of the Calendar
* ([see example]({% slug dates_calendar %}#toc-focused-dates)).
*
* If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
*/
set focusedDate(focusedDate: Date);
get focusedDate(): Date;
/**
* @hidden
*/
get headerId(): string;
/**
* Specifies the minimum allowed date value
* ([see example]({% slug dateranges_calendar %})).
*
* @default 1900-1-1
*/
set min(min: Date);
get min(): Date;
/**
* Specifies the maximum allowed date value
* ([see example]({% slug dateranges_calendar %})).
*
* @default 2099-12-31
*/
set max(max: Date);
get max(): Date;
/**
* Determines whether the built-in `min` or `max` validators are enforced when validating a form.
*
* @default false
*/
rangeValidation: boolean;
/**
* Specifies the format of the displayed week day names.
*
* @default 'short'
*/
weekDaysFormat?: WeekDaysFormat;
/**
* Toggles the visibility of the footer.
*
* @default false
*/
footer: boolean;
/**
* Sets the Calendar selection mode
* ([see example]({% slug selection_calendar %})).
* @default 'single'
*/
set selection(_selection: CalendarSelection);
get selection(): CalendarSelection;
private _selection;
/**
* Allows reverse selection when using `range` selection.
* If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
*
* @default false
*/
allowReverse: boolean;
/**
* Sets or gets the `value` property of the Calendar and defines the selected value of the component.
*
* The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
*/
set value(candidate: Date | Date[] | SelectionRange | null);
get value(): Date | Date[] | SelectionRange | null;
/**
* Sets or gets the `disabled` property of the Calendar and
* determines whether the component is active
* ([see example]({% slug disabled_calendar %})).
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_calendar#toc-managing-the-calendar-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Specifies the `tabindex` property of the Calendar. Based on the
* [HTML `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) behavior,
* it determines whether the component is focusable.
*
* @default 0
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Specifies the dates of the Calendar that will be disabled
* ([see example]({% slug disabled_dates_calendar %})).
*/
set disabledDates(value: ((date: Date) => boolean) | Date[] | Day[]);
get disabledDates(): ((date: Date) => boolean) | Date[] | Day[];
/**
* Determines whether the navigation side-bar will be displayed
* ([see example]({% slug sidebar_calendar %})).
* Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
*
* @default true
*/
navigation: boolean;
/**
* Defines the active view that the Calendar initially renders
* ([see example]({% slug viewoptions_calendar %})).
* You have to set `activeView` within the `topView`-`bottomView` range.
*
* @default 'month'
*/
activeView: CalendarView;
/**
* Defines the bottommost view to which the user can navigate
* ([see example](slug:viewdepth_calendar)).
*
* @default 'month'
*/
bottomView: CalendarView;
/**
* Defines the topmost view to which the user can navigate
* ([see example](slug:viewdepth_calendar)).
*
* @default 'century'
*/
topView: CalendarView;
/**
* Specifies the Calendar type.
*
* @default 'infinite'
*/
set type(type: CalendarType);
get type(): CalendarType;
/**
* Determines whether to enable animation when navigating to previous/next view.
* Applies to the [`classic`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
*
* This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
*
* @default false
*/
animateNavigation: boolean;
/**
* Determines whether to display a week number column in the `month` view
* ([see example]({% slug weeknumcolumn_calendar %})).
*
* @default false
*/
weekNumber: boolean;
/**
* @hidden
*/
closePopup: EventEmitter<any>;
/**
* Fires when the active view is changed
* ([see example](slug:events_calendar)).
*/
activeViewChange: EventEmitter<CalendarView>;
/**
* Fires when navigating in the currently active view
* ([see example](slug:events_calendar)).
*/
navigate: EventEmitter<{
activeView: CalendarView;
focusedDate: Date;
}>;
/**
* Fires when the active view date is changed
* ([see example](slug:events_calendar)).
* Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
*/
activeViewDateChange: EventEmitter<Date>;
/**
* Fires each time the Calendar gets blurred
* ([see example](slug:events_calendar)).
*/
onBlur: EventEmitter<any>;
/**
* Fires each time the Calendar gets focused
* ([see example](slug:events_calendar)).
*/
onFocus: EventEmitter<any>;
/**
* Fires when the value is changed
* ([see example](slug:events_calendar)).
*/
valueChange: EventEmitter<any>;
/**
* @hidden
*
* Queries the template for a cell template declaration.
* Ignored if a `[cellTemplate]` value is explicitly provided.
*/
cellTemplate: CellTemplateDirective;
/**
* @hidden
*
* Defines the template for each cell.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set cellTemplateRef(template: CellTemplateDirective);
get cellTemplateRef(): CellTemplateDirective;
/**
* @hidden
*
* Queries the template for a month cell template declaration.
* Ignored if a `[monthCellTemplate]` value is explicitly provided.
*/
monthCellTemplate: MonthCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each month cell.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set monthCellTemplateRef(template: MonthCellTemplateDirective);
get monthCellTemplateRef(): MonthCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a year cell template declaration.
* Ignored if a `[yearCellTemplate]` value is explicitly provided.
*/
yearCellTemplate: YearCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each year cell.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set yearCellTemplateRef(template: YearCellTemplateDirective);
get yearCellTemplateRef(): YearCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a decade cell template declaration.
* Ignored if a `[decadeCellTemplate]` value is explicitly provided.
*/
decadeCellTemplate: DecadeCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each decade cell.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set decadeCellTemplateRef(template: DecadeCellTemplateDirective);
get decadeCellTemplateRef(): DecadeCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a century cell template declaration.
* Ignored if a `[centuryCellTemplate]` value is explicitly provided.
*/
centuryCellTemplate: CenturyCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each century cell.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set centuryCellTemplateRef(template: CenturyCellTemplateDirective);
get centuryCellTemplateRef(): CenturyCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a week number cell template declaration.
* Ignored if a `[weekNumberTemplate]` value is explicitly provided.
*/
weekNumberTemplate: WeekNumberCellTemplateDirective;
/**
* @hidden
*
* Defines the template for the week cell.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set weekNumberTemplateRef(template: WeekNumberCellTemplateDirective);
get weekNumberTemplateRef(): WeekNumberCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a header title template declaration.
* Ignored if a `[headerTitleTemplate]` value is explicitly provided.
*/
headerTitleTemplate: HeaderTitleTemplateDirective;
/**
* @hidden
*
* Queries the template for a header template declaration.
* Ignored if a `[headerTemplate]` value is explicitly provided.
*/
headerTemplate: HeaderTemplateDirective;
/**
* @hidden
*
* Queries the template for a footer template declaration.
* Ignored if a `[footerTemplate]` value is explicitly provided.
*/
footerTemplate: FooterTemplateDirective;
/**
* @hidden
*
* Defines the template for the header title.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set headerTitleTemplateRef(template: HeaderTitleTemplateDirective);
get headerTitleTemplateRef(): HeaderTitleTemplateDirective;
/**
* @hidden
*
* Defines the template for the header.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set headerTemplateRef(template: HeaderTemplateDirective);
get headerTemplateRef(): HeaderTemplateDirective;
/**
* @hidden
*
* Defines the template for the footer.
*/
set footerTemplateRef(template: FooterTemplateDirective);
get footerTemplateRef(): FooterTemplateDirective;
/**
* @hidden
*
* Queries the template for a navigation item template declaration.
* Ignored if a `[navigationItemTemplate]` value is explicitly provided.
*/
navigationItemTemplate: NavigationItemTemplateDirective;
/**
* @hidden
*
* Defines the template for the navigation item.
* Takes precedence over nested templates in the KendoCalendar tag.
*/
set navigationItemTemplateRef(template: NavigationItemTemplateDirective);
get navigationItemTemplateRef(): NavigationItemTemplateDirective;
/**
* @hidden
*
* TODO: Make visible when true sizing of all calendar elements is implemented
* Sets the size of the component.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
* * `none`
*
*/
set size(size: DateInputSize);
get size(): DateInputSize;
private _size;
/**
* Specifies which end of the defined selection range should be marked as active.
* Value will be ignored if the selection range is undefined. If range selection is used then the default value is 'start'.
*
* @default 'start'
*/
set activeRangeEnd(_activeRangeEnd: SelectionRangeEnd);
get activeRangeEnd(): SelectionRangeEnd;
private _activeRangeEnd;
navigationView: NavigationComponent;
monthView: ViewListComponent;
multiViewCalendar: MultiViewCalendarComponent;
isActive: boolean;
cellUID: string;
selectionRange: SelectionRange;
selectedDates: Date[];
rangePivot: Date;
private _disabledDates;
private _min;
private _max;
private _focusedDate;
private _value;
private onControlChange;
private onControlTouched;
private onValidatorChange;
private minValidateFn;
private maxValidateFn;
private changes;
private valueSetter;
private selectionSetter;
private syncNavigation;
private viewChangeSubscription;
private _type;
private _cellTemplateRef;
private _monthCellTemplateRef;
private _yearCellTemplateRef;
private _decadeCellTemplateRef;
private _centuryCellTemplateRef;
private _weekNumberTemplateRef;
private _headerTitleTemplateRef;
private _headerTemplateRef;
private _footerTemplateRef;
private _navigationItemTemplateRef;
get activeViewEnum(): CalendarViewEnum;
get bottomViewEnum(): CalendarViewEnum;
get topViewEnum(): CalendarViewEnum;
get widgetId(): string;
get ariaDisabled(): boolean;
private domEvents;
private control;
private pageChangeSubscription;
private resolvedPromise;
private destroyed;
private localizationChangeSubscription;
private activeViewDate;
private currentlyFocusedElement;
private canHover;
constructor(bus: BusViewService, dom: CalendarDOMService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, ngZone: NgZone, injector: Injector, scrollSyncService: ScrollSyncService, disabledDatesService: DisabledDatesService, localization: LocalizationService, selectionService: SelectionService, pickerService?: PickerService);
ngOnInit(): void;
ngOnChanges(changes: any): void;
ngDoCheck(): void;
ngAfterViewInit(): void;
ngAfterViewChecked(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
onCellEnter(date: Date): void;
/**
* @hidden
*/
onResize(): void;
/**
* Focuses the Calendar by making the table.k-calendar-table element active.
*/
focus(): void;
/**
* Blurs the Calendar component.
*/
blur(): void;
/**
* @hidden
*/
containsElement(element: any): boolean;
/**
* @hidden
*/
handleNavigation(candidate: Date): void;
/**
* @hidden
*/
onPageChange(): void;
/**
* @hidden
*/
handleMultiViewCalendarValueChange(value: Date | Date[] | SelectionRange, focusedDate: Date): void;
/**
* @hidden
*/
handleDateChange(args: {
selectedDates: Date[];
focusedDate: Date;
}): void;
/**
* @hidden
*/
writeValue(candidate: Date | Date[]): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
validate(control: AbstractControl): {
[key: string]: any;
};
/**
* @hidden
*/
registerOnValidatorChange(fn: Function): void;
/**
* @hidden
*/
activeCellTemplate(): any;
/**
* @hidden
*/
handleNavigate(event: {
focusedDate: Date;
activeView: CalendarView;
}): void;
/**
* @hidden
*/
emitNavigate(focusedDate: Date): void;
/**
* @hidden
*/
emitEvent(emitter: any, args: any): void;
/**
* @hidden
*/
handleActiveDateChange(date: Date): void;
/**
* @hidden
*/
handleActiveViewChange(view: CalendarView): void;
/**
* @hidden
*/
handleCellClick({ date, modifiers }: any): void;
/**
* @hidden
*/
handleWeekNumberClick(dates: Date[]): void;
/**
* @hidden
*/
handleBlur(args: any): void;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleMultiViewCalendarKeydown(args: any): void;
private setClasses;
private verifyChanges;
private verifyValue;
private bindEvents;
private setRangeSelectionToValue;
private emitBlur;
private emitFocus;
private handleComponentClick;
private handleKeydown;
private focusToday;
private detectChanges;
private emitSameDate;
private setAriaActivedescendant;
private parseSelectionToValue;
private setValue;
private performRangeSelection;
private performSelection;
static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, [null, null, null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "kendo-calendar", ["kendo-calendar"], { "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "id": { "alias": "id"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "type": { "alias": "type"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "cellTemplateRef": { "alias": "cellTemplate"; "required": false; }; "monthCellTemplateRef": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplateRef": { "alias": "yearCellTemplate"; "required": false; }; "decadeCellTemplateRef": { "alias": "decadeCellTemplate"; "required": false; }; "centuryCellTemplateRef": { "alias": "centuryCellTemplate"; "required": false; }; "weekNumberTemplateRef": { "alias": "weekNumberTemplate"; "required": false; }; "headerTitleTemplateRef": { "alias": "headerTitleTemplate"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "navigationItemTemplateRef": { "alias": "navigationItemTemplate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "activeRangeEnd": { "alias": "activeRangeEnd"; "required": false; }; }, { "closePopup": "closePopup"; "activeViewChange": "activeViewChange"; "navigate": "navigate"; "activeViewDateChange": "activeViewDateChange"; "onBlur": "blur"; "onFocus": "focus"; "valueChange": "valueChange"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, true, never>;
}