Calendar Header

Display a controlled calendar header with 3 levels of precision: Year, Day, and Decade. The component is based on a component CalendarHeader he is not shown in the documentation but visible in the library's code.

• Import

  import { CalendarHeader } from '@smile/haring-react';
• Extends CalendarHeader
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
date *	Date	-	Value given to define the date displayed on the calendarHeader
level *	ICalendarHeaderClickType	-	Defines the date level to display in the header modal
onDateClick	((event: MouseEvent<HTMLButtonElement, MouseEvent>, date: Date, level: ICalendarHeaderClickType ) => void)	-	Returns a callback function that provides the value of the date that has just been clicked and the current level
monthProps	Omit<MonthProps, "month">	-	Allows configuring the props of the Month component from Mantine.
monthListProps	Omit<MonthsListProps, "year">	-	Allows configuring the props of the MonthList component from Mantine.
yearsListProps	Omit<YearsListProps, "decade">	-	Allows configuring the props of the YearsList component from Mantine.
...	-	-	extends CalendarHeader props

ICalendarHeaderClickType

Type	Description
"month" | "year" | "decade"	Value of the click location's level of localization.