Header

The Header component renders the Calendar header.

In the default implementation, Root is the parent of Header. By default Header uses the visibleFromDate and renders the current year as it's title, alongside the navigation buttons.

Example

<CalendarProvider adapter={dateAdapter}>
  <div style={{ width: '200px' }}>
    <Header />
  </div>
</CalendarProvider>

Props

Importing

It can be imported as either the base component

import { Header } from "@use-date-input/core";

or as an overridable component that can be replaced through the components prop in CalendarProvider.
Refer to How to replace UI components.

import { CustomisableHeader } from "@use-date-input/core";

If providing your own component, it can be useful to import the base component and use it within your composition.