# EuiCalendarHeaderComponent

**Type:** component

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

**Standalone:** false

## Inputs

- **containWeekends**: `boolean, BooleanInput` - <p>Determines whether weekends are included in the week view.</p>

- **currentDate**: `Date` - <p>The currently selected date. This is a required input signal.
It should be a <code>Date</code> object representing the current month, week, or day, depending on the mode.</p>
<p>Important: For weekly mode, ensure the date represents the first day of the week.</p>

- **customTemplate**: `TemplateRef<EuiCalendarHeaderContext> | null` - <p>A custom template for the header. If provided, it will replace the default header layout.
The template context is of type <code>HeaderContext</code>.
Defaults to <code>null</code>.</p>

- **dateFormat**: `string` - <p>The format used to display the current month.
Defaults to <code>&#39;MMMM yyyy&#39;</code> (e.g., &quot;October 2023&quot;).</p>

- **dateFormatOptions**: `Intl.DateTimeFormatOptions | null` - <p>Format options for displaying the date.
If not provided, defaults will be used based on the current mode.
See {@link <code>getFormattedOptions</code>} method for details.</p>

- **mode**: `EuiCalendarMode` - <p>The mode of the calendar header. This can be &#39;monthly&#39;, &#39;weekly&#39;, or &#39;daily&#39;.
Defaults to &#39;monthly&#39;.</p>

- **showNavigationButtons**: `boolean, BooleanInput` - <p>Determines whether the navigation buttons (previous/next) are displayed.
Defaults to <code>true</code>.</p>

- **showTodayButton**: `boolean, BooleanInput` - <p>Determines whether the &quot;Today&quot; button is displayed.
Defaults to <code>true</code>.</p>

- **startingDay**: `number, NumberInput` - <p>Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or &#39;monday&#39;, &#39;tue&#39;, &#39;wed&#39;, etc.)</p>

- **subLabel**: `string` - <p>An optional sub-label to display below the main date label.
Defaults to an empty string.</p>


## Outputs

- **currentDate**: `Date` - <p>The currently selected date. This is a required input signal.
It should be a <code>Date</code> object representing the current month, week, or day, depending on the mode.</p>
<p>Important: For weekly mode, ensure the date represents the first day of the week.</p>

- **navigationClicked**: `EuiCalendarNavigationEvent` - <p>Emits when the navigation buttons are clicked (previous/next).</p>

- **todayClicked**: `Date` - <p>Emits when the &quot;Today&quot; button is clicked.</p>

