Skip to main content

Custom Components

Draft

This documentation is still a work in progress. If you have any questions, ask to the discussions page on Github.

Use the components prop to replace some of the internal components used by DayPicker with a custom implementation.

For example, if you need to customize the component creating the day cell, you can replace the DayContent component with a custom implementation.

./CustomDayContent.tsx
import { type DayContentProps } from "react-day-picker";

/** Replace the 19th with an emoji */
export function CustomDayContent(props: DayContentProps) {
return (
<span style={{ position: "relative", overflow: "visible" }}>
{props.date.getDate() === 19 ? ` 🎉` : props.date.getDate()}
</span>
);
}

Then passed the custom component to the DayPicker component:

./MyApp.jsx
import { CustomDayContent } from "./CustomDayContent";

<DayPicker
components={{
DayContent: CustomDayContent // Replace the DayContent component
}}
/>;
SuMoTuWeThFrSa

Supported Components

The customizable components are defined in the CustomComponents interface. Pass any of these to the components prop.

warning

The custom components are not part of the stable API yet, and may change in future versions.

ComponentDescription
CaptionThe caption for each month.
CaptionLabelThe caption for each month.
DayThe day cell.
DayContentThe content of the day cell.
DropdownThe dropdown used for navigation
FooterThe footer element.
HeadThe head of the grid.
HeadRowThe row with the week names.
IconDropdownThe icon used for the dropdown.
IconLeftThe icon used for the previous month navigation.
IconRightThe icon used for the next month navigation.
MonthsWrapper for the Months grid.
RowRender the grid row.
WeekNumberRender the week number.

DayPicker Hooks

When creating custom components, you will find useful the DayPicker hooks.

import { useDayPicker } from "react-day-picker";
HookReturnsDescription
useDayPickerDayPickerContextValueGet the props passed to DayPicker.
useNavigationNavigationContextValueNavigate between months and years .
useDayRenderDayRenderRender the day cell from a custom Day component.
useFocusContextFocusContextValueHandle the focus between elements.
useActiveModifiersActiveModifiersReturns the modifiers applied to a day.

Examples

Custom Caption

Implement a custom Caption component with next/previous buttons. Note the use of the useNavigation hook to navigate between months.

import { format } from "date-fns";
import { CaptionProps, DayPicker, useNavigation } from "react-day-picker";

function CustomCaptionComponent(props: CaptionProps) {
const { goToMonth, nextMonth, previousMonth } = useNavigation();
return (
<h2>
{format(props.displayMonth, "MMM yyy")}
<button
disabled={!previousMonth}
onClick={() => previousMonth && goToMonth(previousMonth)}
>
Previous
</button>
<button
disabled={!nextMonth}
onClick={() => nextMonth && goToMonth(nextMonth)}
>
Next
</button>
</h2>
);
}

export function CustomCaption() {
return (
<DayPicker
components={{
Caption: CustomCaptionComponent
}}
/>
);
}

Jul 2024

SuMoTuWeThFrSa

Range Selections with Shift Key

Implement a custom Day component to select ranges while pressing the Shift key. See examples/RangeShiftKey.tsx for the full source code.

SuMoTuWeThFrSa

Please pick a day.