### 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
formattedDate headerContext isCurrentDateToday maxMonthWidth
###### Methods
goToToday navigateNext navigatePrevious
###### Inputs
containWeekends currentDate customTemplate dateFormat dateFormatOptions mode showNavigationButtons showTodayButton startingDay subLabel
###### Outputs
currentDate navigationClicked todayClicked

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