The CSS class to add to the container element. To change the name of the class instead, use classNames.root.

Change the class names of the HTML elements.

Use this prop when you need to change the default class names — for example when using CSS modules.

Change the class name for the day matching the modifiers.

Style to apply to the container element.

Change the inline styles of the HTML elements.

Change the inline style for the day matching the modifiers.

A unique id to replace the random generated id – used by DayPicker for accessibility.

The initial month to show in the calendar. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use month]] | and [[onMonthChange.

The month displayed in the calendar.

As opposed to DayPickerBase.defaultMonth, use this prop with DayPickerBase.onMonthChange to change the month programmatically.

Event fired when the user navigates between months.

The number of displayed months.

The earliest day to start the month navigation.

The latest day to end the month navigation.

The earliest month to start the month navigation.

The latest month to end the month navigation.

The earliest year to start the month navigation.

The latest year to end the month navigation.

Disable the navigation between months.

Paginate the month navigation displaying the numberOfMonths at time.

Render the months in reversed order (when numberOfMonths is greater than 1) to display the most recent month first.

Change the layout of the caption:

• buttons: display prev/right buttons
• dropdown: display drop-downs to change the month and the year

Note: the dropdown layout is available only when fromDate, fromMonth orfromYear and toDate, toMonth or toYear are set.

Display six weeks per months, regardless the month’s number of weeks. To use this prop, showOutsideDays must be set.

Hide the month’s head displaying the weekday names.

Show the outside days. An outside day is a day falling in the next or the previous month.

Show the week numbers column. Weeks are numbered according to the local week index.

• to use ISO week numbering, use the ISOWeek prop.
• to change how the week numbers are displayed, use the Formatters prop.

The index of the first day of the week (0 - Sunday). Overrides the locale's one.

See also ISOWeek.

The day of January, which is always in the first week of the year. See also https://date-fns.org/docs/getWeek and https://en.wikipedia.org/wiki/Week#Numbering

See also ISOWeek.

Use ISO week dates instead of the locale setting. See also https://en.wikipedia.org/wiki/ISO_week_date.

Setting this prop will ignore weekStartsOn and firstWeekContainsDate.

Map of components used to create the layout. Look at the components source to understand how internal components are built and provide your custom components.

Content to add to the table footer element.

When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled).

Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.

Apply the disabled modifier to the matching days.

Apply the hidden modifier to the matching days. Will hide them from the calendar.

Apply the selected modifier to the matching days.

The today’s date. Default is the current date. This Date will get the today modifier to style the day.

Add modifiers to the matching days.

The date-fns locale object used to localize dates.

Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.

The text direction of the calendar. Use ltr for left-to-right (default) or rtl for right-to-left.

A map of formatters. Use the formatters to override the default formatting functions.