Customization
Use the customization props to tailor the calendar's appearance.
Prop Name | Type | Description |
---|---|---|
captionLayout | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | Choose the layout of the month caption. Default is label . |
fixedWeeks | boolean | Display 6 weeks per month. |
footer | ReactNode | string | Add a footer to the calendar, acting as a live region. |
hideWeekdayRow | boolean | Hide the row displaying the weekday names. |
numberOfMonths | number | The number of displayed months. Default is 1 . |
showOutsideDays | boolean | Display the days falling into other months. |
showWeekNumber | boolean | Display the column with the week numbers. |
Caption Layouts
Use the captionLayout
prop to customize the layout of the month caption.
<DayPicker captionLayout="label" /> // Default value: shows the month and year.
Caption Layout | Description |
---|---|
"label" | Displays the month and year as a label. Default value. |
"dropdown" | Displays a dropdown with both months and years. |
"dropdown-months" | Displays a dropdown with the months only. |
"dropdown-years" | Displays a dropdown with the years only. |
Caption Dropdown
To enable a navigation dropdown, set captionLayout="dropdown"
. Use the startMonth
and endMonth
properties to define the start and end dates for the calendar navigation.
<DayPicker
captionLayout="dropdown"
defaultMonth={new Date(2024, 6)}
startMonth={new Date(2024, 6)}
endMonth={new Date(2025, 9)}
/>
Without specifying the from*
and to*
properties, the dropdown will display the last 100 years.
Outside Days
By default, DayPicker hides the days falling into the other months. Use showOutsideDays
to display them.
<DayPicker showOutsideDays />
Fixed Weeks
In a year, months can have between 4 and 6 weeks. Use the fixedWeeks
prop to always display 6 weeks per month. This will prevent the grid from changing its height while navigating the calendar.
<DayPicker fixedWeeks showWeekNumber />
Multiple Months
To display multiple months in the calendar, use the numberOfMonths
prop.
Prop Name | Type | Description |
---|---|---|
numberOfMonths | number | The number of displayed months. Default is 1 . |
pagedNavigation | boolean | Paginate the navigation. |
reverseMonths | boolean | Render multiple months in reversed order. |
<DayPicker numberOfMonths={2} />
Paged Navigation
With pagedNavigation
, the navigation jumps by the specified number of months at a time.
<DayPicker numberOfMonths={2} pagedNavigation />
Week Numbers
To display the column with week numbers, use the showWeekNumber
prop.
Prop Name | Type | Description |
---|---|---|
showWeekNumber | boolean | Display the week numbers. |
<DayPicker showWeekNumber />
Handling Week Numbers Click
To handle clicks on the week numbers, you can set a custom WeekNumber
component:
<DayPicker
showWeekNumber
components={{
weekNumber: ({ weekNumber }) => (
<button onClick={() => alert(`Week ${weekNumber}`)}>{weekNumber}</button>
)
}}
/>
Selecting the Whole Week
In selection mode, you can create a custom selection that selects the entire week when a day is clicked.
Footer as Live Region
Use the footer
prop to display a footer below the calendar. The footer acts as a live region to announce changes to screen readers. For more information on making the calendar accessible, see the Accessibility guide.
export function Footer() {
const [selected, setSelected] = React.useState<Date>();
return (
<DayPicker
mode="single"
selected={selected}
onSelect={setSelected}
footer={
selected
? `You picked ${selected.toLocaleDateString()}.`
: "Please pick a date."
}
/>
);
}
Custom Components
In DayPicker, you can replace the components used internally to render the calendar. For more information, see the Custom Components guide.
Prop Name | Type | Description |
---|---|---|
components | CustomComponents | Change the internal components used to render the calendar. |
classNames | ClassNames | Use custom class names instead of the default ones. |