### 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

- containWeekends
- currentDate
- customTemplate
- dateFormat
- dateFormatOptions
- formattedDate
- headerContext
- isCurrentDateToday
- maxMonthWidth
- mode
- navigationClicked
- showNavigationButtons
- showTodayButton
- startingDay
- subLabel
- todayClicked

###### Methods

- goToToday
- navigateNext
- navigatePrevious

###### Inputs

- currentDate

###### Outputs

- navigationClicked
- todayClicked

### 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 ""