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

containWeekends
Type : boolean, BooleanInput
Default value : true, { transform: booleanAttribute }

Determines whether weekends are included in the week view.
currentDate
Type : Date
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.
customTemplate
Type : TemplateRef<EuiCalendarHeaderContext> | null
Default value : 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
Type : string
Default value : 'MMMM yyyy'

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

Format options for displaying the date. If not provided, defaults will be used based on the current mode. See getFormattedOptions method for details.
mode
Type : EuiCalendarMode
Default value : EuiCalendarMode.Monthly

The mode of the calendar header. This can be 'monthly', 'weekly', or 'daily'. Defaults to 'monthly'.
showNavigationButtons
Type : boolean, BooleanInput
Default value : true, { transform: booleanAttribute }

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

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

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

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

Outputs

currentDate
Type : Date

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.
navigationClicked
Type : EuiCalendarNavigationEvent

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

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

formattedDate
Type : unknown
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
Type : unknown
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
Type : unknown
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
Type : unknown
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.

results matching ""

    No results matching ""