---
id: interfaces
title: Interfaces
---
<a id="docs"></a>

## DayPickerProps

The props used by the [DayPicker](#daypicker) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`className?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

CSS class to add to the root element.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`classNames?:`** [`DayPickerClassNames`](./type#daypickerclassnames)

Change the class names used by `DayPicker`.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`components?:`** [`CustomComponents`](./type#customcomponents)

Customize the internal components.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`days?:`** [`DaysModifiers`](./type#daysmodifiers)

An object of modifiers.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`daysClassNames?:`** [`DaysClassNames`](./type#daysclassnames)

Change the class names used for the [days modifiers](#days).

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`daysStyles?:`** [`DaysStyles`](./type#daysstyles)

Change the inline style for the [days modifiers](#days).

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dir?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

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

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`disabled?:`** [`DayMatcher`](./type#daymatcher)

Disable the matching days. Disabled days cannot be clicked.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`enableOutsideDaysClick?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Enable click event for outside days when [showOutsideDays](#showoutsidedays) is used.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`fixedWeeks?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Display six weeks per months, regardless the month’s number of weeks. Outsidedays will be always shown when setting this prop.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`formatCaption?:`** [`MonthCaptionFormatter`](./type#monthcaptionformatter)

Format the month caption text.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`formatDay?:`** [`DayFormatter`](./type#dayformatter)

Format the content of the day element.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`formatWeekNumber?:`** [`WeekNumberFormatter`](./type#weeknumberformatter)

Format the week numbers (when [showWeekNumber](#showweeknumber) is set).

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`formatWeekdayName?:`** [`WeekdayNameFormatter`](./type#weekdaynameformatter)

Format the weekday's name in the head element.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`fromMonth?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

Allow navigation after (and including) the specified month.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`hidden?:`** [`DayMatcher`](./type#daymatcher)

Hide the matching days.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`initialMonth?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The initial month to show in the calendar.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`locale?:`** [`dateFns.Locale`](https://date-fns.org/docs/Locale)

A locale object to localizethe user interface.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`month?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The rendered month. Implement [onMonthChange](#onmonthchange) to enable monthsnavigation.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`nextLabel?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

Label used for the next month button in [Navigation](#navigation). Set it to emptystring to hide the button.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`numberOfMonths?:`** [`number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number)

The number of months to render.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`onDayClick?:`** [`DayClickEventHandler`](./type#dayclickeventhandler)

Event handler when the user clicks on a day.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`onMonthChange?:`** [`MonthChangeEventHandler`](./type#monthchangeeventhandler)

Event handler when the month changes.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`onNextClick?:`** [`MonthChangeEventHandler`](./type#monthchangeeventhandler)

Event handler when the next month button is clicked.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`onPrevClick?:`** [`MonthChangeEventHandler`](./type#monthchangeeventhandler)

Event handler when the previous month button is clicked.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`pagedNavigation?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

When displaying multiple months, the navigation will be paginateddisplaying the [numberOfMonths](#numberofmonths) months at time instead ofone.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`prevLabel?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

Label used for the previous month button in [Navigation](#navigation). Set it toempty string to hide the button.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`reverseMonths?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Render the months in reversed order. Useful when [numberOfMonths](#numberofmonths) isgreater than `1`, to display the most recent month first.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`selected?:`** [`DayMatcher`](./type#daymatcher)

Apply the `selected` modifiers to the matching days.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`showCaption?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Show the month’s caption. As default, the caption displays month and year.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`showHead?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Show the month’s head. As default, it displays the weekday names accordingto [locale](#locale).

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`showNavigation?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Show the navigation bar. [onMonthChange](#onmonthchange) must be set.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`showOutsideDays?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

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

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`showWeekNumber?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Show the week numbers column.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`style?:`** [`CSSProperties`](undefined)

Style to apply to the root element.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`styles?:`** [`DayPickerStyles`](./type#daypickerstyles)

Inline styles to apply to the [DayPickerElements](#daypickerelements).

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`toMonth?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

Allow navigation before (and including) the specified month.



## DayProps

The props used by the [Day](#day) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`currentMonth:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The month the calendar belongs to. Used to calulate outside days.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`day:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The day to display in the calendar.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)

Reference to the props used by the DayPicker component.



## HeadProps

The props used by the [Head](#head) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)

Reference to the props used by the DayPicker component.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`locale:`** [`DateFns.Locale`](undefined)



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`showWeekNumber?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

Add a column to accommodate the week numbers.



## MonthCaptionProps

The props used by the [MonthCaption](#monthcaption) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)

Reference to the props used by the DayPicker component.

<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`month:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The month the caption is referring to.



## MonthTableProps

Props of the [Month](#month) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`month:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)





## NavigationProps

Props for the [Navigation](#navigation) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)





## WeekNumberProps

Props for the [WeekNumber](#weeknumber) component.



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`days:`** [[`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)]



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`number:`** [`number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number)





## WeekRowProps





<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`currentMonth:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`dayPickerProps:`** [`DayPickerProps`](./interface#daypickerprops)



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`week:`** [[`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)]



<a class="interface-syntax"></a>

<a class="syntax"></a>

` `**`weekNumber:`** [`number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number)
