# EuiCalendarHeaderComponent

**Type:** component




**Selector:** `eui-calendar-header`

## Inputs
- **containWeekends**: `boolean, BooleanInput` - Determines whether weekends are included in the week view.
- **currentDate**: `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.
- **customTemplate**: `TemplateRef<EuiCalendarHeaderContext> | 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**: `string` - The format used to display the current month. Defaults to `'MMMM yyyy'` (e.g., "October 2023").
- **dateFormatOptions**: `Intl.DateTimeFormatOptions | null` - Format options for displaying the date. If not provided, defaults will be used based on the current mode. See {@link `getFormattedOptions`} method for details.
- **mode**: `EuiCalendarMode` - The mode of the calendar header. This can be 'monthly', 'weekly', or 'daily'. Defaults to 'monthly'.
- **showNavigationButtons**: `boolean, BooleanInput` - Determines whether the navigation buttons (previous/next) are displayed. Defaults to `true`.
- **showTodayButton**: `boolean, BooleanInput` - Determines whether the "Today" button is displayed. Defaults to `true`.
- **startingDay**: `number, NumberInput` - Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or 'monday', 'tue', 'wed', etc.)
- **subLabel**: `string` - An optional sub-label to display below the main date label. Defaults to an empty string.

## Outputs
- **currentDate**: `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**: `EuiCalendarNavigationEvent` - Emits when the navigation buttons are clicked (previous/next).
- **todayClicked**: `Date` - Emits when the "Today" button is clicked.