Skip to main content
Version: next

Type Alias: CustomComponents

CustomComponents = { CaptionLabel: typeof CaptionLabel; Chevron: typeof Chevron; Day: typeof Day; DayButton: typeof DayButton; Dropdown: typeof Dropdown; DropdownNav: typeof DropdownNav; Footer: typeof Footer; Month: typeof Month; MonthCaption: typeof MonthCaption; MonthGrid: typeof MonthGrid; Months: typeof Months; MonthsDropdown: typeof MonthsDropdown; Nav: typeof Nav; NextMonthButton: typeof NextMonthButton; Option: typeof Option; PreviousMonthButton: typeof PreviousMonthButton; Root: typeof Root; Select: typeof Select; Week: typeof Week; Weekday: typeof Weekday; Weekdays: typeof Weekdays; WeekNumber: typeof WeekNumber; WeekNumberHeader: typeof WeekNumberHeader; Weeks: typeof Weeks; YearsDropdown: typeof YearsDropdown; }

Defined in: src/types/shared.ts:43

The components that can be customized using the components prop.

See​

https://daypicker.dev/guides/custom-components

Properties​

CaptionLabel​

CaptionLabel: typeof CaptionLabel

Defined in: src/types/shared.ts:47

Render the caption label of the month grid.

Chevron​

Chevron: typeof Chevron

Defined in: src/types/shared.ts:45

Render the chevron icon used in the navigation buttons and dropdowns.

Day​

Day: typeof Day

Defined in: src/types/shared.ts:49

Render the day cell in the month grid.

DayButton​

DayButton: typeof DayButton

Defined in: src/types/shared.ts:51

Render the button containing the day in the day cell.

Dropdown: typeof Dropdown

Defined in: src/types/shared.ts:53

Render the dropdown element to select years and months.

DropdownNav: typeof DropdownNav

Defined in: src/types/shared.ts:55

Render the container of the dropdowns.

Footer: typeof Footer

Defined in: src/types/shared.ts:57

Render the footer element announced by screen readers.

Month​

Month: typeof Month

Defined in: src/types/shared.ts:59

Render the container of the MonthGrid.

MonthCaption​

MonthCaption: typeof MonthCaption

Defined in: src/types/shared.ts:61

Render the caption of the month grid.

MonthGrid​

MonthGrid: typeof MonthGrid

Defined in: src/types/shared.ts:63

Render the grid of days in a month.

Months​

Months: typeof Months

Defined in: src/types/shared.ts:65

Wrapper of the month grids.

MonthsDropdown​

MonthsDropdown: typeof MonthsDropdown

Defined in: src/types/shared.ts:91

Render the dropdown for selecting months.

Nav: typeof Nav

Defined in: src/types/shared.ts:67

Render the navigation element with the next and previous buttons.

NextMonthButton​

NextMonthButton: typeof NextMonthButton

Defined in: src/types/shared.ts:73

Render the next month button element in the navigation.

Option​

Option: typeof Option

Defined in: src/types/shared.ts:69

Render the <option> HTML element in the dropdown.

PreviousMonthButton​

PreviousMonthButton: typeof PreviousMonthButton

Defined in: src/types/shared.ts:71

Render the previous month button element in the navigation.

Root​

Root: typeof Root

Defined in: src/types/shared.ts:75

Render the root element of the calendar.

Select​

Select: typeof Select

Defined in: src/types/shared.ts:77

Render the select element in the dropdowns.

Week​

Week: typeof Week

Defined in: src/types/shared.ts:81

Render the week rows.

Weekday​

Weekday: typeof Weekday

Defined in: src/types/shared.ts:83

Render the weekday name in the header.

Weekdays​

Weekdays: typeof Weekdays

Defined in: src/types/shared.ts:85

Render the row containing the week days.

WeekNumber​

WeekNumber: typeof WeekNumber

Defined in: src/types/shared.ts:87

Render the cell with the number of the week.

WeekNumberHeader​

WeekNumberHeader: typeof WeekNumberHeader

Defined in: src/types/shared.ts:89

Render the header of the week number column.

Weeks​

Weeks: typeof Weeks

Defined in: src/types/shared.ts:79

Render the weeks section in the month grid.

YearsDropdown​

YearsDropdown: typeof YearsDropdown

Defined in: src/types/shared.ts:93

Render the dropdown for selecting years.