Skip to main content
Version: 8.10.1

Customization

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

Customization Props​

Prop NameTypeDescription
captionLayout"dropdown" | "buttons" |
"dropdown-buttons"		Change the layout of the caption.
Default is "buttons".
showOutsideDaysbooleanDisplay the days falling into the other months.
fixedWeeksbooleanDisplay 6 weeks per months.
hideWeekdayRowbooleanHide the row displaying the weekday names.
footerReactNodeDisplays 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

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} />
Month:
Year:
SuMoTuWeThFrSa

Outside Days​

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

<DayPicker showOutsideDays />
SuMoTuWeThFrSa
36
37
38
39
40

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 />
SuMoTuWeThFrSa
36
37
38
39
40
41

Multiple Months​

To display multiple months in the calendar, use the numberOfMonths prop.

Prop NameTypeDescription
numberOfMonthsnumberThe number of displayed months. Default is 1.
pagedNavigationbooleanPaginate the navigation.
reverseMonthsbooleanRender multiple months in reversed order.
<DayPicker numberOfMonths={2} />
SuMoTuWeThFrSa
SuMoTuWeThFrSa

Paged Navigation​

With pagedNavigation, the navigation jumps by the specified number of months at time.

<DayPicker numberOfMonths={2} pagedNavigation />
SuMoTuWeThFrSa
SuMoTuWeThFrSa

Week Numbers​

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

Prop NameTypeDescription
showWeekNumberbooleanDisplay the week numbers.
onWeekNumberClickWeekNumberClickEventHandlerEvent handler when the week number is clicked.
<DayPicker showWeekNumber onWeekNumberClick={setWeekNumber} />
SuMoTuWeThFrSa
Try clicking a week number.