Custom Components
Use the components
prop to extend each rendered HTML element with your own custom components.
Prop Name | Type | Description |
---|---|---|
components | CustomComponents | Change the components of the calendar. |
You may need to use custom components in advanced applications to:
- Prevent default events from occurring
- Add new event listeners, such as touch events
- Display extra content, such as a calendar entry in the day cell
- Implement buttons or dropdowns using your own design system components
- Wrap an element with another element, like adding a tooltip to a day cell
When customizing components, familiarize yourself with the API Reference and the DayPicker Anatomy. Ensure you maintain accessibility.
Custom components extend DayPicker more than formatters, which are used to format the content of the calendar.
Implementing a Custom Component​
Pass the components you want to customize to the components
prop. This prop accepts any of the CustomComponents
types.
<DayPicker
components={{
Day: (props: DayProps) => <CustomDaycell {...props} />,
MonthGrid: (props: MonthGridProps) => <CustomMonthGrid {...props} />
// etc
}}
/>
List of Customizable Components
Function | Description |
---|---|
CaptionLabel | Render the label in the month caption. |
Chevron | Render the chevron icon used in the navigation buttons and dropdowns. |
Day | Render the gridcell of a day in the calendar and handle the interaction and the focus with they day. |
DayButton | Render the button for a day in the calendar. |
Dropdown | Render a dropdown component to use in the navigation bar. |
DropdownNav | Render the the navigation dropdowns. |
Footer | Component wrapping the footer. |
Month | Render the grid with the weekday header row and the weeks for the given month. |
MonthCaption | Render the caption of a month in the calendar. |
MonthGrid | Render the grid of days in a month. |
Months | Component wrapping the month grids. |
Nav | Render the toolbar with the navigation button. |
NextMonthButton | Render the button to navigate to the next month. |
Option | Render the option element. |
PreviousMonthButton | Render the button to navigate to the previous month. |
Root | Render the root element. |
Select | Render the select element. |
Week | Render a row in the calendar, with the days and the week number. |
WeekNumber | Render the cell with the number of the week. |
WeekNumberHeader | Render the column header for the week numbers. |
Weekday | Render the column header with the weekday name (e.g. "Mo", "Tu", etc.). |
Weekdays | Render the row with the weekday names. |
Weeks | Render the weeks in the month grid. |
Examples​
We are adding new examples soon. What are you using custom components for? Let us know.
Intercepting Click Events​
For example, you can use a custom DayButton to select days with a double-click event.
import React from "react";
import { DayPicker } from "react-day-picker";
export function MyDatePicker() {
const [selected, setSelected] = React.useState<Date>();
return (
<DayPicker
mode="single"
onSelect={setSelected}
selected={selected}
components={{
DayButton: (props) => {
const { day, modifiers, ...buttonProps } = props;
return (
<button
{...buttonProps}
// Prevent the default click event
onClick={() => setSelected(undefined)}
// Handle the double click event and reset the selection
onDoubleClick={() => setSelected(day.date)}
/>
);
}
}}
footer={selected?.toDateString() || "Double click to select a date"}
/>
);
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
DayPicker Hook​
In a custom component, you can implement the useDayPicker
hook to access the DayPicker context.
The DayPicker context provides the current state of the calendar, including the selected days, modifiers, and navigation state.
Function | Return value | Description |
---|---|---|
useDayPicker | DayPickerContext | Return the current state of DayPicker and functions to navigate the calendar |