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 . |
reverseYears | boolean | Reverse the order of the years in the dropdown. |
navLayout | "around" | "after" | Adjust the positioning of the navigation buttons. |
fixedWeeks | boolean | Display 6 weeks per month. |
footer | ReactNode | string | Add a footer to the calendar, acting as a live region. |
hideWeekdays | boolean | Hide the row displaying the weekday names. |
numberOfMonths | number | The number of displayed months. Default is 1 . |
reverseMonths | boolean | When displaying multiple months, reverse the order of the months. |
pagedNavigation | boolean | Enable paginated navigation when displaying multiple months. |
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 dropdowns for both month and year navigation. |
"dropdown-months" | Displays a dropdown only for the month navigation. |
"dropdown-years" | Displays a dropdown only for the year navigation. |
Caption Dropdown
To enable a navigation dropdown, set captionLayout
to dropdown
, dropdown-months
, or dropdown-years
.
- When displaying the dropdown for the years, use the
reverseYears
prop to reverse the order of the years. - Use the
startMonth
andendMonth
properties to define the start and end dates for the calendar navigation.
Without specifying the startMonth
and endMonth
properties, the dropdown will display the last 100 years.
Example
<DayPicker
captionLayout="dropdown"
defaultMonth={new Date(2024, 6)}
startMonth={new Date(2024, 6)}
endMonth={new Date(2025, 9)}
/>
Navigation Layouts
Use the navLayout
prop to adjust the positioning of the navigation buttons.
Navigation Layout | Description |
---|---|
"around" | Buttons are displayed on either side of the caption. |
"after" | Buttons are displayed after the caption, ensuring the tab order matches the visual order. |
undefined | Buttons are displayed after the caption, but the tab order may not match the visual order. |
<DayPicker navLayout="around" />
<DayPicker navLayout="after" />
See Navigation for additional ways to customize the calendar’s navigation.
If not set, the navigation buttons default to being displayed after the caption. However, the tab order may not align with the visual order when setting "dropdown"
as caption layout. To ensure the component remains accessible, set navLayout
to "after"
or to "around"
instead of leaving it undefined.
In a future version, the default behavior will be changed to "after"
.
Outside Days
By default, DayPicker hides the days falling into 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 the WeekNumber
custom component:
<DayPicker
showWeekNumber
components={{
WeekNumber: (props) => (
<button onClick={() => alert(`Week ${props.weekNumber}`)}>
{props.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. |