igniteui-angular

import { ElementRef, AfterViewInit, QueryList, OnDestroy } from '@angular/core'; import { ScrollDirection } from './calendar'; import { IgxMonthsViewComponent } from './months-view/months-view.component'; import { IgxYearsViewComponent } from './years-view/years-view.component'; import { IgxDaysViewComponent } from './days-view/days-view.component'; import { IgxCalendarBaseDirective } from './calendar-base'; import * as i0 from "@angular/core"; /** * Calendar provides a way to display date information. * * @igxModule IgxCalendarModule * * @igxTheme igx-calendar-theme, igx-icon-theme * * @igxKeywords calendar, datepicker, schedule, date * * @igxGroup Scheduling * * @remarks * The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple * or range selection. * * @example: * ```html * <igx-calendar selection="range"></igx-calendar> * ``` */ export declare class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy { /** * @hidden * @internal */ private _activeDescendant; /** * @hidden * @internal */ wrapper: ElementRef; /** * Sets/gets the `id` of the calendar. * * @remarks * If not set, the `id` will have value `"igx-calendar-0"`. * * @example * ```html * <igx-calendar id="my-first-calendar"></igx-calendar> * ``` * @memberof IgxCalendarComponent */ id: string; /** * Sets/gets whether the calendar has header. * Default value is `true`. * * @example * ```html * <igx-calendar [hasHeader]="false"></igx-calendar> * ``` */ hasHeader: boolean; /** * Sets/gets whether the calendar header will be in vertical position. * Default value is `false`. * * @example * ```html * <igx-calendar [vertical]="true"></igx-calendar> * ``` */ vertical: boolean; orientation: 'horizontal' | 'vertical'; headerOrientation: 'horizontal' | 'vertical'; /** * Sets/gets the number of month views displayed. * Default value is `1`. * * @example * ```html * <igx-calendar [monthsViewNumber]="2"></igx-calendar> * ``` */ get monthsViewNumber(): number; set monthsViewNumber(val: number); /** * Show/hide week numbers * * @example * ```html * <igx-calendar [showWeekNumbers]="true"></igx-calendar> * `` */ showWeekNumbers: boolean; /** * The default css class applied to the component. * * @hidden * @internal */ get styleVerticalClass(): boolean; /** * The default css class applied to the component. * * @hidden * @internal */ styleClass: boolean; /** * Month button, that displays the months view. * * @hidden * @internal */ monthsBtns: QueryList<ElementRef>; /** * ViewChild that represents the decade view. * * @hidden * @internal */ dacadeView: IgxYearsViewComponent; /** * ViewChild that represents the months view. * * @hidden * @internal */ monthsView: IgxMonthsViewComponent; /** * ViewChild that represents the days view. * * @hidden * @internal */ daysView: IgxDaysViewComponent; /** * ViewChildrenden representing all of the rendered days views. * * @hidden * @internal */ monthViews: QueryList<IgxDaysViewComponent>; /** * Button for previous month. * * @hidden * @internal */ prevPageBtn: ElementRef; /** * Button for next month. * * @hidden * @internal */ nextPageBtn: ElementRef; /** * Denote if the year view is active. * * @hidden * @internal */ get isYearView(): boolean; /** * Gets the header template. * * @example * ```typescript * let headerTitleTemplate = this.calendar.headerTitleTeamplate; * ``` * @memberof IgxCalendarComponent */ get headerTitleTemplate(): any; /** * Sets the header template. * * @example * ```html * <igx-calendar headerTitleTemplateDirective="igxCalendarHeaderTitle"></igx-calendar> * ``` * @memberof IgxCalendarComponent */ set headerTitleTemplate(directive: any); /** * Gets the header template. * * @example * ```typescript * let headerTemplate = this.calendar.headerTeamplate; * ``` * @memberof IgxCalendarComponent */ get headerTemplate(): any; /** * Sets the header template. * * @example * ```html * <igx-calendar headerTemplateDirective="igxCalendarHeader"></igx-calendar> * ``` * @memberof IgxCalendarComponent */ set headerTemplate(directive: any); /** * Gets the subheader template. * * @example * ```typescript * let subheaderTemplate = this.calendar.subheaderTemplate; * ``` */ get subheaderTemplate(): any; /** * Sets the subheader template. * * @example * ```html * <igx-calendar subheaderTemplate="igxCalendarSubheader"></igx-calendar> * ``` * @memberof IgxCalendarComponent */ set subheaderTemplate(directive: any); /** * Gets the context for the template marked with the `igxCalendarHeader` directive. * * @example * ```typescript * let headerContext = this.calendar.headerContext; * ``` */ get headerContext(): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * Gets the context for the template marked with either `igxCalendarSubHeaderMonth` * or `igxCalendarSubHeaderYear` directive. * * @example * ```typescript * let context = this.calendar.context; * ``` */ get context(): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * Date displayed in header * * @hidden * @internal */ get headerDate(): Date; /** * @hidden * @internal */ private headerTemplateDirective; /** * @hidden * @internal */ private headerTitleTemplateDirective; /** * @hidden * @internal */ private subheaderTemplateDirective; /** * @hidden * @internal */ activeDate: Date; /** * @hidden * @internal */ protected previewRangeDate: Date; /** * Used to apply the active date when the calendar view is changed * * @hidden * @internal */ nextDate: Date; /** * Denote if the calendar view was changed with the keyboard * * @hidden * @internal */ isKeydownTrigger: boolean; /** * @hidden * @internal */ private _monthsViewNumber; protected onMouseDown(event: MouseEvent): void; private _showActiveDay; /** * @hidden * @internal */ protected set showActiveDay(value: boolean); protected get showActiveDay(): boolean; protected get activeDescendant(): number; protected set activeDescendant(date: Date); ngAfterViewInit(): void; protected onWrapperFocus(_event: FocusEvent): void; protected onWrapperBlur(_event: FocusEvent): void; private handleArrowKeydown; private handlePageUpDown; private handlePageUp; private handlePageDown; private onArrowUp; private onArrowDown; private onArrowLeft; private onArrowRight; private onEnter; private onHome; private onEnd; /** * Returns the locale representation of the month in the month view if enabled, * otherwise returns the default `Date.getMonth()` value. * * @hidden * @internal */ formattedMonth(value: Date): string; /** * Change to previous page * * @hidden * @internal */ previousPage(isKeydownTrigger?: boolean): void; /** * Change to next page * * @hidden * @internal */ nextPage(isKeydownTrigger?: boolean): void; /** * Changes the current page * * @hidden * @internal */ protected changePage(isKeydownTrigger: boolean, direction: ScrollDirection): void; /** * Continious navigation through the previous pages * * @hidden * @internal */ startPrevPageScroll: (isKeydownTrigger?: boolean) => void; /** * Continious navigation through the next pages * * @hidden * @internal */ startNextPageScroll: (isKeydownTrigger?: boolean) => void; /** * Stop continuous navigation * * @hidden * @internal */ stopPageScroll: (event: KeyboardEvent) => void; /** * @hidden * @internal */ onActiveViewDecade(event: MouseEvent, date: Date, activeViewIdx: number): void; /** * @hidden * @internal */ onActiveViewDecadeKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void; /** * @hidden * @internal */ onYearsViewClick(event: MouseEvent): void; /** * @hidden * @internal */ onYearsViewKeydown(event: KeyboardEvent): void; /** * @hidden * @internal */ protected getFormattedDate(): { weekday: string; monthday: string; }; /** * @hidden * @internal */ protected getFormattedRange(): { start: string; end: string; }; /** * @hidden * @internal */ protected get viewDates(): import("./days-view/day-item.component").IgxDayItemComponent[]; /** * Handles invoked on date selection * * @hidden * @internal */ protected handleDateSelection(date: Date): void; /** * @hidden * @intenal */ changeMonth(date: Date): void; /** * @hidden * @intenal */ changeYear(date: Date): void; /** * @hidden * @intenal */ updateYear(date: Date): void; updateActiveDescendant(date: Date): void; /** * @hidden * @internal */ onActiveViewYear(event: MouseEvent, date: Date, activeViewIdx: number): void; /** * @hidden * @internal */ onActiveViewYearKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void; /** * Deselects date(s) (based on the selection type). * * @example * ```typescript * this.calendar.deselectDate(new Date(`2018-06-12`)); * ```` */ deselectDate(value?: Date | Date[] | string): void; /** * Getter for the context object inside the calendar templates. * * @hidden * @internal */ getContext(i: number): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * @hidden * @internal */ resetActiveDate(date: Date): void; /** * @hidden * @internal */ ngOnDestroy(): void; /** * @hidden * @internal */ getPrevMonth(date: Date): Date; /** * @hidden * @internal */ getNextMonth(date: Date, viewIndex: number): Date; /** * Helper method building and returning the context object inside the calendar templates. * * @hidden * @internal */ private generateContext; static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxCalendarComponent, "igx-calendar", never, { "id": { "alias": "id"; "required": false; }; "hasHeader": { "alias": "hasHeader"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "headerOrientation": { "alias": "headerOrientation"; "required": false; }; "monthsViewNumber": { "alias": "monthsViewNumber"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; }, {}, ["headerTemplateDirective", "headerTitleTemplateDirective", "subheaderTemplateDirective"], never, true, never>; static ngAcceptInputType_hasHeader: unknown; static ngAcceptInputType_vertical: unknown; static ngAcceptInputType_showWeekNumbers: unknown; }