DayPicker API

DayPicker Props

canChangeMonth boolean = true

Enable the navigation between months.

captionElement React.Element | React.Component | (props) ⇒ Element

A React element or constructor to use as caption. This element will receive the following props:

• date: Date The currently displayed month.
• localeUtils: Object The localeUtils object passed to the component.
• locale: string The current locale passed to the component.
• onClick The onCaptionClick function, if specified.

The default caption is a div with class DayPicker-Caption, showing a “month year”.

See also this example using this props to display an element to switch between months and years.

className string

Additional CSS class names to add to the container.

classNames Object

The CSS class names used when rendering the component. See defaults on GitHub.

You can use this prop to adopt the custom styles imported via CSS Modules. See Styling.

The object expects the following keys:

{
  container,            // The container element
  wrapper,              // The wrapper element, used for keyboard interaction
  interactionDisabled,  // Added to the container when there's no interaction with the calendar

  navBar,         // The navigation bar with the arrows to switch between months
  navButtonPrev,  // Button to switch to the previous month
  navButtonNext,  // Button to switch to the next month
  navButtonInteractionDisabled,  // Added to the navbuttons when disabled with fromMonth/toMonth props

  months,         // Container of the months table
  month,          // The month's main table
  caption,        // The caption element, containing the current month's name and year
  weekdays,       // Table header displaying the weekdays names
  weekdaysRow,    // Table row displaying the weekdays names
  weekday,        // Cell displaying the weekday name
  body,           // Table's body with the weeks
  week,           // Table's row for each week
  day,            // The single day cell

  footer,         // The calendar footer (only with todayButton prop)
  todayButton,    // The today button (only with todayButton prop)

  /* default modifiers */
  today,          // Added to the day's cell for the current day
  selected,       // Added to the day's cell specified in the "selectedDays" prop
  disabled,       // Added to the day's cell specified in the "disabledDays" prop
  outside,        // Added to the day's cell outside the current month
}

containerProps Object

Props to pass to the container div HTML element.

className, role, tabIndex, onKeyDown, onFocus and onBlur must be passed directly to the component. E.g.:

<DayPicker
  containerProps={ { className: 'will_be_ignored' } }
  className="will_work"
/>

disabledDays Date | Object | Date[] | (day: Date) ⇒ boolean

Day(s) that should appear as disabled. Set a disabled modifier. See Matching days for a reference of the accepted value types.

enableOutsideDaysClick boolean = true

When showOutsideDays is enabled, enable click events for outside days.

firstDayOfWeek number = 0 (Sunday)

The day to use as first day of the week, starting from 0 (Sunday) to 6 (Saturday).

fixedWeeks boolean = false

Display 6 weeks per months, regardless the month’s number of weeks. Outside days will be always shown if setting this to true.

fromMonth Date

The first allowed month. Users won’t be able to navigate or interact with the days before it. See also toMonth.

initialMonth Date = new Date() (current month)

The month to display in the calendar at first render. This differs from the month prop, as it won’t re-render the calendar if its value changes.

labels Object = { nextMonth: "Next Month", previousMonth: "Previous Month" }

Labels to use as aria-label HTML attributes.

The object expects the following keys (as strings):

{
  previousMonth,  // Used for the button to navigate the previous month
  nextMonth,      // Used for the button to navigate the next month
}

locale string = "en"

The calendar’s locale. See Localization.

localeUtils Object = LocaleUtils

Object of functions to format dates and to get the first day of the week. You can pass your own object for advanced localization. See Localization.

modifiers Object

An object of day modifiers. See matching days.

modifiersStyles Object

An object of inline styles added to the day cells when a modifier is matched. Use this prop to style day cells inline instead of using CSS classes. See Styling.

month Date

The month to display in the calendar. This differs from the initialMonth prop, as it causes the calendar to re-render when its value changes.

months string[]

An array containing the long month names to use in the month’s header. Default to the English months names.

navbarElement React.Element | React.Component | (props) ⇒ React.Element

A React Element or React Component to render the navigation bar. It will receive the following props:

• month: Date The currently displayed month
• previousMonth: Date
• nextMonth: Date
• onPreviousClick: () ⇒ void
• onNextClick: () ⇒ void

numberOfMonths number = 1

The number of months to render.

pagedNavigation boolean = false

When displaying multiple months, navigation will be paginated displaying the numberOfMonths at time instead of one.

renderDay (day: Date, modifiers: Object) ⇒ React.Element

Returns the content of a day cell. As default it returns day’s current date.

renderWeek (weekNumber: number, week: Array) ⇒ React.Element

Returns the content of the week element when showWeekNumbers is set. As default it returns the week number.

reverseMonths boolean = false

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

selectedDays Date | Object | Date[] | (day: Date) ⇒ boolean

Day(s) that should appear as selected. Set a selected modifier. See Matching days for a reference of the accepted value types.

showOutsideDays boolean = false

Display the days falling outside the current month.

showWeekDays boolean = true

Display the weekday names in the calendar header.

showWeekNumbers boolean = false

Display the year’s week number next to each week (example).

todayButton string

Display a button to switch to the current month using the provided string as label.

toMonth Date

The last allowed month. Users won’t be able to navigate or interact with the days after it. See also fromMonth.

weekdayElement React.Element | React.Component | (props) ⇒ React.Element

A React Element or React Component to render the weekday cells in the header. It will receive the following props:

• weekday number
• className string
• localeUtils Object
• locale string

weekdaysLong string[]

An array containing the long weekdays names to use in the month’s header. Defaults to the English weekdays names. Must start from Sunday.

weekdaysShort string[]

An array containing the short weekdays names to use in the month’s header. Defaults to the English weekdays names. Must start from Sunday.

Event handlers

onCaptionClick (currentMonth: date, e: SyntheticEvent) ⇒ void

Event handler when the user clicks on the caption in the header displaying the month.

onDayClick (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the user clicks on a day cell.

onBlur (e: SyntheticEvent) ⇒ void

Event handler when the calendar get the blur event.

onDayFocus (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the day cell gets the focus event.

onDayKeyDown (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the day cell gets the keydown event.

onDayMouseDown (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the mouse button is pressed on a day cell.

onDayMouseEnter (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the mouse enters a day cell.

onDayMouseLeave (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the mouse leave a day cell.

onDayMouseUp (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the mouse button is released on a day cell.

onDayTouchStart (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the day cell gets the touchStart event.

onDayTouchEnd (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

Event handler when the day cell gets the touchEnd event.

onFocus (e: SyntheticEvent) ⇒ void

Event handler when the calendar get the focus event

onKeyDown (e: SyntheticEvent) ⇒ void

Event handler when the calendar get the keydown event

onMonthChange (month: date) ⇒ void

Event handler when the month is changed, i.e. clicking the navigation buttons or using the keyboard.

onWeekClick (weekNumber: number, days: date[], e: SyntheticEvent) ⇒ void

Event handler when the user clicks on a week number (when showWeekNumbers is set to true).

onTodayButtonClick (day: Date, modifiers: string[], e: SyntheticEvent) ⇒ undefined

Event handler when the user clicks on the today button (when todayButton is set).

Public Methods

showMonth (month: date) ⇒ void

Show the given month in the calendar.

showPreviousMonth () ⇒ void

Show the previous month in the calendar.

showNextMonth () ⇒ void

Show the next month in the calendar.

showPreviousYear () ⇒ void

Show the previous year in the calendar.

showNextYear () ⇒ void

Show the next year in the calendar.