import * as _angular_core from '@angular/core'; import { WritableSignal, Signal, TemplateRef } from '@angular/core'; import { BooleanInput, NumberInput } from '@angular/cdk/coercion'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import * as i1 from '@eui/components/shared'; import { BaseStatesDirective } from '@eui/components/shared'; /** * Enum for days of the week * @readonly * @enum {number} */ declare const EuiCalendarDayOfWeek: { MONDAY: number; TUESDAY: number; WEDNESDAY: number; THURSDAY: number; FRIDAY: number; SATURDAY: number; SUNDAY: number; }; /** * @description * Interface for defining action options in the day header. */ interface EuiCalendarDayHeaderActionOption { label: string; callback: (e: any, day?: Date) => void; id: string; } /** * @description * Interface for defining a day in the calendar. */ interface EuiCalendarDay { /** Unique identifier for the day */ id: number; /** Date object representing the day */ date: Date; /** Indicates if the day is disabled */ disabled?: boolean; /** Indicates if the day is today (based on user's Machine day) */ isToday?: boolean; /** Indicates if the day a weekend (Saturday, Sunday) */ isWeekend?: boolean; /** Metadata associated with the day */ metadata: Signal; } /** * @description * Interface for defining an event in the calendar. */ interface EuiCalendarEvent { id: string; date: WritableSignal; label: WritableSignal; subLabel?: WritableSignal; type?: WritableSignal; } /** * Defines the direction of calendar navigation. */ declare enum EuiCalendarNavigationDirection { Previous = "previous", Next = "next" } /** * Event emitted when the calendar navigation buttons are clicked. */ interface EuiCalendarNavigationEvent { /** * The direction of navigation, either 'previous' or 'next'. */ direction: EuiCalendarNavigationDirection; /** * The current date before navigation. */ current: Date; /** * The new date after navigation. */ new: Date; /** * The current mode of the calendar (monthly, weekly, or daily). */ mode: EuiCalendarMode; } /** * Defines the mode of the calendar header. */ declare enum EuiCalendarMode { Monthly = "monthly", Weekly = "weekly", Daily = "daily" } interface EuiCalendarHeaderContext { /** * Mode of the calendar header (monthly, weekly, or daily). */ currentDate: Date; /** * Mode of the calendar header (monthly, weekly, or daily). */ mode: EuiCalendarMode; /** * Callback function when navigate to the previous month/week/day. */ previous: () => void; /** * Callback function when navigate to the next month/week/day. */ next: () => void; /** * Callback function when navigate to today's date. */ cbToday: () => void; /** * Formatted date string for display in the header (e.g., "September 2023" or "Week 36, 2023"). * It is formatted based on the current mode. */ formattedDate: string; /** * True if the current date is today. */ isToday: boolean; } declare enum EuiCalendarEventType { primary = "primary", success = "success", warning = "warning", danger = "danger", info = "info" } interface EuiCalendarDayCell { day: number; month: number; year: number; isCurrentMonth: boolean; isToday?: boolean; isFuture?: boolean; isPast?: boolean; isWeekend?: boolean; dayOfWeek: number; dateString: string; weekNumber?: number; isFirstDayOfMonth?: boolean; isLastDayOfMonth?: boolean; isDisabled?: boolean; events?: EuiCalendarEvent[]; } interface EuiCalendarMonthlyCalendarOptions { year?: number; emptyValue?: any; fillPreviousMonth?: boolean; fillNextMonth?: boolean; includeMetadata?: boolean; includeToday?: boolean; includeTemporalFlags?: boolean; includeWeekends?: boolean; includeWeekNumbers?: boolean; weekendDays?: number[]; } /** * @description */ declare class EuiCalendarMonthlyComponent { /** * Array of disabled days (Date objects) */ disabledDays: _angular_core.InputSignal; events: _angular_core.InputSignal; hasEmptyValue: _angular_core.InputSignalWithTransform; /** * Template for rendering each day cell */ dayTemplate: _angular_core.InputSignal>; /** * Template for rendering each day cell */ headerTemplate: _angular_core.InputSignal>; /** * Display mode of the calendar ('compact' or 'truncated') */ mode: _angular_core.InputSignal<"compact" | "truncated">; /** * Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or 'monday', 'tue', 'wed', etc.) */ startingDay: _angular_core.InputSignalWithTransform; /** * The reference date for the month. The component will display the month that contains this date. */ date: _angular_core.InputSignal; /** * Fill with previous month days */ fillPreviousMonth: _angular_core.InputSignalWithTransform; /** * Fill with next month days */ fillNextMonth: _angular_core.InputSignalWithTransform; /** * Disable selection of future dates */ disableFutureDates: _angular_core.InputSignalWithTransform; /** * Disable selection of past dates */ disablePastDates: _angular_core.InputSignalWithTransform; /** * Disable selection of weekend dates */ disableWeekends: _angular_core.InputSignalWithTransform; /** * Disable days that are not in the current selected month */ disabledDaysNotInMonth: _angular_core.InputSignalWithTransform; newEventAddClicked: _angular_core.OutputEmitterRef; monthlyCalendar: Signal; private locale; daysHeaderArray: Signal<{ short: string; date: Date; }[]>; /** * Map day names to enum values for flexible input * @type {Object.} */ private DayNameMap; onMouseEnterDay(day: any): void; onMouseLeaveDay(day: any): void; addNewItemClicked(day: EuiCalendarDayCell): void; /** * Calculates the number of days in a given month * @param {number} month - Month (1-12) * @param {number} year - Year (optional, defaults to current year) * @returns {number} Number of days in the month */ getDaysInMonth(month: number, year?: number): number; /** * Calculates the day of week for the first day of a month * @param {number} month - Month (1-12) * @param {number} year - Year (optional, defaults to current year) * @returns {number} Day of week (0=Sunday, 1=Monday, ..., 6=Saturday) */ getFirstDayOfMonth(month: number, year?: number): number; /** * Calculates the ISO week number for a given date * @param {Date} date - Date object * @returns {number} ISO week number (1-53) */ getISOWeekNumber(date: Date): number; /** * Compares two dates at day precision * @param {Date} date1 - First date * @param {Date} date2 - Second date * @returns {number} -1 if date1 < date2, 0 if equal, 1 if date1 > date2 */ compareDatesAtDayPrecision(date1: Date, date2: Date): 0 | 1 | -1; /** * Creates an enhanced day cell object with comprehensive metadata * @param {number} day - Day of the month * @param {number} month - Month (1-12) * @param {number} year - Year * @param {boolean} isCurrentMonth - Whether this day belongs to the displayed month * @param {Object} options - Configuration options * @returns {DayCell} Enhanced day cell object */ createEnhancedDayCell(day: number, month: number, year: number, isCurrentMonth: boolean, options?: object): EuiCalendarDayCell; /** * Generates a calendar grid for a given month * @param {number} month - Month (1-12) * @param {string|number} startingDay - First day of the week (configurable) * @param {Object} options - Additional options * @param {number} options.year - Year (defaults to current year) * @param {*} options.emptyValue - Value for empty cells (defaults to null) * @param {boolean} options.fillPreviousMonth - Fill with previous month days * @param {boolean} options.fillNextMonth - Fill with next month days * @returns {Array} 6x7 grid representing the calendar month */ generateCalendarGrid(month: number, startingDay: number, options?: EuiCalendarMonthlyCalendarOptions): EuiCalendarDayCell[][]; trackByDay(index: number, day: EuiCalendarDayCell): string | number; /** * Transforms and validates the month input * @param value * @private */ private monthTransformer; /** * Transforms and validates the year input * @param value * @throws {Error} If the starting day is invalid */ private yearTransformer; /** * Normalizes the starting day input to a DayOfWeek enum value * @param {string|number} startingDay - Day name, abbreviation, or number * @returns {number} Normalized day index (0-6) * @throws {Error} If the starting day is invalid */ private startingDayTransformer; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * @description */ declare class EuiCalendarDayComponent { get cssClasses(): string; euiDisabled: _angular_core.InputSignalWithTransform; dayOfTheMonth: _angular_core.InputSignalWithTransform; maxNumberOfEventsToShow: _angular_core.InputSignalWithTransform; events: _angular_core.InputSignal; isSelected: _angular_core.InputSignalWithTransform; addNewEvent: _angular_core.WritableSignal; addNewItemEvent: _angular_core.OutputEmitterRef; protected renderNewEvent: _angular_core.Signal; protected readonly EventType: typeof EuiCalendarEventType; private popover; showMoreEvents(e: any): void; onMouseOver(): void; onMouseOut(): void; addNewItemClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class EuiCalendarComponent { classes: string; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class EuiCalendarHeaderComponent { /** * Determines whether weekends are included in the week view. */ containWeekends: _angular_core.InputSignalWithTransform; /** * Format options for displaying the date. * If not provided, defaults will be used based on the current mode. * See {@link `getFormattedOptions`} method for details. */ dateFormatOptions: _angular_core.InputSignal; /** * The mode of the calendar header. This can be 'monthly', 'weekly', or 'daily'. * Defaults to 'monthly'. */ mode: _angular_core.InputSignal; /** * The currently selected date. This is a required input signal. * It should be a `Date` object representing the current month, week, or day, depending on the mode. * * Important: For weekly mode, ensure the date represents the first day of the week. */ currentDate: _angular_core.ModelSignal; /** * An optional sub-label to display below the main date label. * Defaults to an empty string. */ subLabel: _angular_core.InputSignal; /** * Determines whether the "Today" button is displayed. * Defaults to `true`. */ showTodayButton: _angular_core.InputSignalWithTransform; /** * Determines whether the navigation buttons (previous/next) are displayed. * Defaults to `true`. */ showNavigationButtons: _angular_core.InputSignalWithTransform; /** * Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or 'monday', 'tue', 'wed', etc.) */ startingDay: _angular_core.InputSignalWithTransform; /** * The format used to display the current month. * Defaults to `'MMMM yyyy'` (e.g., "October 2023"). */ dateFormat: _angular_core.InputSignal; /** * A custom template for the header. If provided, it will replace the default header layout. * The template context is of type `HeaderContext`. * Defaults to `null`. */ customTemplate: _angular_core.InputSignal>; /** * Emits when the navigation buttons are clicked (previous/next). */ navigationClicked: _angular_core.OutputEmitterRef; /** * Emits when the "Today" button is clicked. */ todayClicked: _angular_core.OutputEmitterRef; /** * True if the current date is today. * For weekly mode, checks if today falls within the week that contains the current date. */ isCurrentDateToday: _angular_core.Signal; /** * Formatted date string for display in the header (e.g., "September 2023" or "Week 36, 2023"). * It is formatted based on the current mode. */ formattedDate: _angular_core.Signal; /** * Context object passed to the custom header template. */ headerContext: _angular_core.Signal; /** * Calculates the maximum width required to display the longest month name * in the current locale. This helps to prevent layout shifts when navigating * between months with varying name lengths. * * The width is estimated in 'ch' units (character width) based on the length * of the longest month name. */ maxMonthWidth: _angular_core.Signal; private formattedOptions; private locale; /** * Navigates to the previous month, week, or day based on the current mode. * Emits a `navigationClicked` event with details of the navigation action. */ navigatePrevious(): void; /** * Navigates to the next month, week, or day based on the current mode. * Emits a `navigationClicked` event with details of the navigation action. */ navigateNext(): void; /** * Navigates to today's date. * Emits a `todayClicked` event with today's date. */ goToToday(): void; /** * Determines the appropriate date formatting options based on the current mode. * - Monthly: Displays full month name and year (e.g., "October 2023"). * - Weekly: Displays short month name, day, and year (e.g., "Oct 1, 2023"). * - Daily: Displays full weekday name, month name, day, and year (e.g., "Monday, October 2, 2023"). */ private getFormattedOptions; /** * Calculates the start and end dates of the week that contains the given date. * The week always includes the current date and starts on the specified startingDay. * For example: * - If date is Monday 20/10/2025 and startingDay is Tuesday (1), week is Tue 14/10 - Mon 20/10 * - If date is Monday 20/10/2025 and startingDay is Monday (0), week is Mon 20/10 - Sun 26/10 * - If date is Thursday 23/10/2025 and startingDay is Tuesday (1), week is Tue 21/10 - Mon 27/10 * - If containWeekends is false, the week spans 5 days instead of 7 (e.g., Mon-Fri) * @param date The reference date (must be included in the returned week range) * @param startDay The day the week starts on (0=Monday, 1=Tuesday, ..., 6=Sunday) * @returns An object containing the start and end dates of the week */ private getWeekRange; /** * Normalizes the starting day input to a DayOfWeek enum value * @param {string|number} startingDay - Day name, abbreviation, or number * @returns {number} Normalized day index (0-6) * @throws {Error} If the starting day is invalid */ private startingDayTransformer; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class EuiCalendarWeeklyComponent { /** * Whether drag-and-drop is enabled for events (defaults to true) */ dragAndDrop: _angular_core.InputSignalWithTransform; /** * The reference date for the week. The component will display the week that contains this date. * For example, if date is Friday 07/01 and startingDay is Monday, it will show the week from 03/01 to 09/01. */ date: _angular_core.ModelSignal; /** * Events for the week. Each event should have a date property. * The date property should be a Date object. * Other properties can be added as needed. */ events: _angular_core.ModelSignal; /** * Whether to show weekends in the calendar (defaults to true) */ showWeekends: _angular_core.InputSignalWithTransform; /** * Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or 'monday', 'tue', 'wed', etc.) */ startingDay: _angular_core.InputSignalWithTransform; /** * Array of disabled days (Date objects) */ disabledDays: _angular_core.InputSignal; /** * Emits when an event is moved to a different day */ eventMoved: _angular_core.OutputEmitterRef<{ event: EuiCalendarEvent; newDate: Date; }>; /** * Optional custom template for day headers * The template will receive the day object as $implicit in the context */ dayHeaderTemplate: _angular_core.InputSignal>; /** * Optional custom template for event content * The template will receive the event object as $implicit in the context */ eventContentTemplate: _angular_core.InputSignal>; daysInWeek: _angular_core.Signal; /** * Emits when a day header action is triggered */ dayAction: _angular_core.OutputEmitterRef<{ $event: MouseEvent | KeyboardEvent; day: EuiCalendarDay; }>; /** * Unique component ID for drag-and-drop context */ protected id: `${string}-${string}-${string}-${string}-${string}`; /** * Computed signal that generates IDs for all drop lists to enable drag-and-drop between days */ dropListIds: _angular_core.Signal; /** * Map day names to enum values for flexible input * @type {Object.} */ private DayNameMap; /** * Handles drop event when an event is moved between days * @param dropEvent The CDK drag-drop event */ drop(dropEvent: CdkDragDrop): void; /** * Calculates the start date of the week that contains the given reference date. * The week always includes the reference date and starts on the specified startingDay. * For example: * - If date is Monday 20/10/2025 and startingDay is Tuesday (1), returns Tuesday 14/10/2025 * - If date is Thursday 23/10/2025 and startingDay is Tuesday (1), returns Tuesday 21/10/2025 * @param referenceDate The date within the week (must be included in the week) * @param startingDay The day the week starts on (0=Monday, 1=Tuesday, ..., 6=Sunday) * @returns The date of the first day of the week * @private */ private getWeekStartDate; /** * Normalizes the starting day input to a DayOfWeek enum value * @param {string|number} startingDay - Day name, abbreviation, or number * @returns {number} Normalized day index (0-6) * @throws {Error} If the starting day is invalid */ private startingDayTransformer; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class EuiCalendarWeeklyDayContentComponent { /** * Label for the content */ label: _angular_core.InputSignal; /** * Sublabel for the content */ subLabel: _angular_core.InputSignal; protected baseStatesDirective: BaseStatesDirective; /** * @description * Computes and returns the CSS classes for the label component based on its current state. * Combines base states, required status, readonly status, and sublabel type. * * @returns {string} Space-separated string of CSS class names */ get cssClasses(): string; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class EuiCalendarWeeklyDayHeaderActionComponent { /** * @description * Disabled state of the component. * If true, the action button will be disabled. * Default is false. */ disabled: _angular_core.InputSignalWithTransform; /** * @description * Options for the action button dropdown. */ options: _angular_core.InputSignal; /** * @description * Date to display in the header. */ date: _angular_core.ModelSignal; /** * @description * Event emitted when the action button is clicked. * Can be used to trigger a dropdown or any other action. */ action: _angular_core.OutputEmitterRef; /** * @description * Sublabel to display under the date. */ sublabel: _angular_core.InputSignal; private locale; /** * @description * extract the day of the week from the date in short string e.g. MON, TUE, WED etc. */ protected dayOfTheWeek: _angular_core.Signal; /** * @description * extract the day of the month from the date in number and the month in string e.g. 22 July */ protected dayOfTheMonth: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class EuiCalendarWeeklyDayHeaderComponent { /** * @description * Date to display in the header. */ date: _angular_core.ModelSignal; /** * @description * Sublabel to display under the date. */ sublabel: _angular_core.InputSignal; private locale; /** * @description * extract the day of the week from the date in short string e.g. MON, TUE, WED etc. */ protected dayOfTheWeek: _angular_core.Signal; /** * @description * extract the day of the month from the date in number and the month in string e.g. 22 July */ protected dayOfTheMonth: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare const EUI_CALENDAR: readonly [typeof EuiCalendarMonthlyComponent, typeof EuiCalendarDayComponent, typeof EuiCalendarComponent, typeof EuiCalendarHeaderComponent, typeof EuiCalendarWeeklyComponent, typeof EuiCalendarWeeklyDayContentComponent, typeof EuiCalendarWeeklyDayHeaderActionComponent, typeof EuiCalendarWeeklyDayHeaderComponent]; export { EUI_CALENDAR, EuiCalendarComponent, EuiCalendarDayComponent, EuiCalendarDayOfWeek, EuiCalendarEventType, EuiCalendarHeaderComponent, EuiCalendarMode, EuiCalendarMonthlyComponent, EuiCalendarNavigationDirection, EuiCalendarWeeklyComponent, EuiCalendarWeeklyDayContentComponent, EuiCalendarWeeklyDayHeaderActionComponent, EuiCalendarWeeklyDayHeaderComponent }; export type { EuiCalendarDay, EuiCalendarDayCell, EuiCalendarDayHeaderActionOption, EuiCalendarEvent, EuiCalendarHeaderContext, EuiCalendarMonthlyCalendarOptions, EuiCalendarNavigationEvent }; //# sourceMappingURL=eui-components-eui-calendar.d.ts.map