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 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

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

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

Su	Mo	Tu	We	Th	Fr	Sa

Double click to select a date

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