DayPicker Anatomy

To better understand the documentation, familiarize yourself with the elements that compose DayPicker:

Navigation Bar: Contains arrows to navigate between months.
Month Caption: Displays the title of the current month.
Weekdays Row: Shows the names of the weekdays.
Weeks: Rows that display the days of the month.
Day: Represents a day of the month, which can have different modifiers, such as:
- selected: The day is selected.
- disabled: The day is disabled.
- hidden: The day is hidden.
- focused: The day has focus.
- today: The day is today.
- outside: The day is outside the current month.
- range_start: The day is the start of a selected range.
- range_middle: The day is inside a selected range.
- range_end: The day is the end of a selected range.
Footer: An ARIA live region that displays custom footer content, often used to announce selected dates.

The stylable UI elements are mapped to CSS classes. A complete list can be found in the UI enum.

Month CaptionNavigation BarNavigation ButtonsWeekdays RowWeekdaysWeek Number HeaderWeek RowsWeek NumbersDay / DayButtonToday's DateDisabled DayRange StartRange MiddleRange EndSelected DayOutside DaysFooter

Rendered Structure

DayPicker renders the calendar with this component structure:

Root
├── Months
│   ├── Nav
│   │   ├── PreviousMonthButton
│   │   │   └── Chevron
│   │   └── NextMonthButton
│   │       └── Chevron
│   └── Month
│       ├── MonthCaption
│       │   ├── CaptionLabel
│       │   └── DropdownNav
│       │       ├── MonthsDropdown
│       │       │   └── Dropdown
│       │       │       └── DropdownRoot
│       │       │           ├── Select
│       │       │           │   └── Option
│       │       │           └── CaptionLabel
│       │       │               └── Chevron
│       │       └── YearsDropdown
│       │           └── Dropdown
│       │               └── DropdownRoot
│       │                   ├── Select
│       │                   │   └── Option
│       │                   └── CaptionLabel
│       │                       └── Chevron
│       └── MonthGrid
│           ├── Weekdays
│           │   ├── WeekNumberHeader
│           │   └── Weekday
│           └── Weeks
│               └── Week
│                   ├── WeekNumber
│                   └── Day
│                       └── DayButton
└── Footer

Some components are conditional:

Footer renders only when the footer prop is set.
Week-number elements render only with showWeekNumber.
Dropdown elements render only with a dropdown captionLayout.
Navigation placement depends on navLayout: the hierarchy above shows the default placement; with navLayout="around", navigation buttons render beside the month caption, and with navLayout="after", the navigation bar renders after the caption in the last month.

Rendered Structure​

Rendered Structure