Customization

Use the customization props to customize the appearance of the calendar.

Customization Props

Prop Name	Type	Description
captionLayout	"dropdown" | "buttons" | "dropdown-buttons"	Change the layout of the caption. Default is "buttons".
showOutsideDays	boolean	Display the days falling into the other months.
fixedWeeks	boolean	Display 6 weeks per months.
hideWeekdayRow	boolean	Hide the row displaying the weekday names.
footer	ReactNode	Displays a footer below the calendar.

Caption Layout

Use the captionLayout prop to the layout of the caption used to navigate the calendar.

As default, DayPicker will show navigation buttons on the top corner.

<DayPicker captionLayout="buttons" /> // Default value

Dropdown Navigation

Use dropdown or dropdown-buttons to display a navigation dropdown.

warning

To use this prop, you need to set both fromYear and toYear. (This requirement will be removed in a next version.)

<DayPicker captionLayout="dropdown" fromYear={2010} toYear={2024} />
<DayPicker captionLayout="dropdown-buttons" fromYear={2010} toYear={2024} />

Outside Days

By default, DayPicker hides the days falling into the other months. Use showOutsideDays to display them.

<DayPicker showOutsideDays />

Fixed Weeks

In a year, months can have between 4 an 6 weeks. Use fixedWeeks with showOutsideDays to always display 6 weeks per month. This will prevent the grid changing its height while navigating the calendar.

note

In the current version, this prop requires showOutsideDays set to work. This requirement will be removed in the next major version.

<DayPicker showOutsideDays fixedWeeks />

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

<DayPicker numberOfMonths={2} pagedNavigation />

Week Numbers

To display the column with the week numbers, use the showWeekNumber prop. Use the onWeekNumberClick to handle the click event.

Prop Name	Type	Description
showWeekNumber	boolean	Display the week numbers.
onWeekNumberClick	WeekNumberClickEventHandler	Event handler when the week number is clicked.

<DayPicker showWeekNumber onWeekNumberClick={setWeekNumber} />