eui documentation
  1. Components
  2. EuiCalendarHeaderComponent

File

packages/components/eui-calendar/eui-calendar-header.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-calendar-header
imports NgTemplateOutlet TranslateModule EUI_ICON EUI_LABEL EUI_BUTTON
styleUrls ./eui-calendar-header.component.scss
templateUrl ./eui-calendar-header.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

currentDate
Required :  true

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.

Outputs

navigationClicked

Emits when the navigation buttons are clicked (previous/next).
todayClicked

Emits when the "Today" button is clicked.

Methods

goToToday
goToToday()

Navigates to today's date. Emits a todayClicked event with today's date.

Returns : void
navigateNext
navigateNext()

Navigates to the next month, week, or day based on the current mode. Emits a navigationClicked event with details of the navigation action.

Returns : void
navigatePrevious
navigatePrevious()

Navigates to the previous month, week, or day based on the current mode. Emits a navigationClicked event with details of the navigation action.

Returns : void

Properties

containWeekends
Default value : input<boolean, BooleanInput>(true, { transform: booleanAttribute })

Determines whether weekends are included in the week view.
currentDate

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.
customTemplate
Default value : input<TemplateRef<EuiCalendarHeaderContext> | null>(null)

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.
dateFormat
Default value : input<string>('MMMM yyyy')

The format used to display the current month. Defaults to 'MMMM yyyy' (e.g., "October 2023").
dateFormatOptions
Default value : input<Intl.DateTimeFormatOptions | null>(null)

Format options for displaying the date. If not provided, defaults will be used based on the current mode. See getFormattedOptions method for details.
formattedDate
Default value : computed(() => { const options: Intl.DateTimeFormatOptions = this.formattedOptions(); if (this.mode() === EuiCalendarMode.Monthly) { // For monthly mode, always show month and year const locale = this.locale().id; return this.currentDate().toLocaleDateString(locale, options); } else if (this.mode() === EuiCalendarMode.Weekly) { // For weekly mode, show the range of dates for the week const { start, end } = this.getWeekRange(this.currentDate(), this.startingDay()); const locale = this.locale().id; const startStr = start.toLocaleDateString(locale, options); const endStr = end.toLocaleDateString(locale, options); return `${startStr} - ${endStr}`; } else if (this.mode() === EuiCalendarMode.Daily) { // For daily mode, show full date const date = this.currentDate(); const locale = this.locale().id; return date.toLocaleDateString(locale, options); } })

Formatted date string for display in the header (e.g., "September 2023" or "Week 36, 2023"). It is formatted based on the current mode.
headerContext
Default value : computed<EuiCalendarHeaderContext>(() => ({ currentDate: this.currentDate(), mode: this.mode(), previous: this.navigatePrevious.bind(this), next: this.navigateNext.bind(this), cbToday: this.goToToday.bind(this), formattedDate: this.formattedDate(), isToday: this.isCurrentDateToday(), }))

Context object passed to the custom header template.
isCurrentDateToday
Default value : computed(() => { const current = this.currentDate(); const today = new Date(); // Reset time parts for accurate date comparison today.setHours(0, 0, 0, 0); if (this.mode() === EuiCalendarMode.Daily) { return current.getDate() === today.getDate() && current.getMonth() === today.getMonth() && current.getFullYear() === today.getFullYear(); } else if (this.mode() === EuiCalendarMode.Weekly) { const { start, end } = this.getWeekRange(current, this.startingDay()); // Reset time parts for accurate comparison const compareDate = new Date(today); const startDate = new Date(start); const endDate = new Date(end); startDate.setHours(0, 0, 0, 0); endDate.setHours(23, 59, 59, 999); return compareDate >= startDate && compareDate <= endDate; } else { return current.getMonth() === today.getMonth() && current.getFullYear() === today.getFullYear(); } })

True if the current date is today. For weekly mode, checks if today falls within the week that contains the current date.
maxMonthWidth
Default value : computed(() => { const currentYear = this.currentDate().getFullYear(); const locale = this.locale().id; const monthNames: string[] = []; // Generate all 12 month names for the current year for (let i = 0; i < 12; i++) { const date = new Date(currentYear, i, 1); monthNames.push(date.toLocaleDateString(locale, this.formattedOptions())); } // Find the longest month name const longestMonth = monthNames.reduce((a, b) => a.length > b.length ? a : b); // Estimate width in ch units (character width) // Using 1ch per character as a reasonable approximation return this.mode() === EuiCalendarMode.Weekly ? `${longestMonth.length * 2 + 2}ch` : `${longestMonth.length}ch`; })

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.
mode
Default value : input<EuiCalendarMode>(EuiCalendarMode.Monthly)

The mode of the calendar header. This can be 'monthly', 'weekly', or 'daily'. Defaults to 'monthly'.
navigationClicked

Emits when the navigation buttons are clicked (previous/next).
showNavigationButtons
Default value : input<boolean, BooleanInput>(true, { transform: booleanAttribute })

Determines whether the navigation buttons (previous/next) are displayed. Defaults to true.
showTodayButton
Default value : input<boolean, BooleanInput>(true, { transform: booleanAttribute })

Determines whether the "Today" button is displayed. Defaults to true.
startingDay
Default value : input<number, NumberInput>(EuiCalendarDayOfWeek.MONDAY, { transform: this.startingDayTransformer })

Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or 'monday', 'tue', 'wed', etc.)
subLabel
Default value : input<string>('')

An optional sub-label to display below the main date label. Defaults to an empty string.
todayClicked

Emits when the "Today" button is clicked.

results matching ""

    No results matching ""