Skip to main content

Custom Components

Use the components prop to extend each rendered HTML element with your own custom components.

Prop NameTypeDescription
componentsCustomComponentsChange 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 vs Formatters

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
FunctionDescription
CaptionLabelRender the label in the month caption.
ChevronRender the chevron icon used in the navigation buttons and dropdowns.
DayRender the gridcell of a day in the calendar and handle the interaction and the focus with they day.
DayButtonRender the button for a day in the calendar.
DropdownRender a dropdown component to use in the navigation bar.
DropdownNavRender the the navigation dropdowns.
FooterComponent wrapping the footer.
MonthRender the grid with the weekday header row and the weeks for the given month.
MonthCaptionRender the caption of a month in the calendar.
MonthGridRender the grid of days in a month.
MonthsComponent wrapping the month grids.
NavRender the toolbar with the navigation button.
NextMonthButtonRender the button to navigate to the next month.
OptionRender the option element.
PreviousMonthButtonRender the button to navigate to the previous month.
RootRender the root element.
SelectRender the select element.
WeekRender a row in the calendar, with the days and the week number.
WeekNumberRender the cell with the number of the week.
WeekNumberHeaderRender the column header for the week numbers.
WeekdayRender the column header with the weekday name (e.g. "Mo", "Tu", etc.).
WeekdaysRender the row with the weekday names.
WeeksRender the weeks in the month grid.

Examples​

note

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.

./MyDatePicker.tsx
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"}
/>
);
}
September 2024
SuMoTuWeThFrSa

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.

FunctionReturn valueDescription
useDayPickerDayPickerContextReturn the current state of DayPicker and functions to navigate the calendar