Skip to main content
Version: 9.14.0

Type Alias: CustomComponents

CustomComponents = { Button: typeof components.Button; 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:45

The components that can be customized using the components prop.

See​

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

Properties​

Button​

Button: typeof components.Button

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

Render any button element in DayPicker.

Deprecated​

Use CustomComponents.NextMonthButton or CustomComponents.PreviousMonthButton instead.

CaptionLabel​

CaptionLabel: typeof CaptionLabel

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

Render the caption label of the month grid.

Chevron​

Chevron: typeof Chevron

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

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

Day​

Day: typeof Day

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

Render the day cell in the month grid.

DayButton​

DayButton: typeof DayButton

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

Render the button containing the day in the day cell.

Dropdown: typeof Dropdown

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

Render the dropdown element to select years and months.

DropdownNav: typeof DropdownNav

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

Render the container of the dropdowns.

Footer: typeof Footer

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

Render the footer element announced by screen readers.

Month​

Month: typeof Month

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

Render the container of the MonthGrid.

MonthCaption​

MonthCaption: typeof MonthCaption

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

Render the caption of the month grid.

MonthGrid​

MonthGrid: typeof MonthGrid

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

Render the grid of days in a month.

Months​

Months: typeof Months

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

Wrapper of the month grids.

MonthsDropdown​

MonthsDropdown: typeof MonthsDropdown

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

Render the dropdown for selecting months.

Nav: typeof Nav

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

Render the navigation element with the next and previous buttons.

NextMonthButton​

NextMonthButton: typeof NextMonthButton

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

Render the next month button element in the navigation.

Option​

Option: typeof Option

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

Render the <option> HTML element in the dropdown.

PreviousMonthButton​

PreviousMonthButton: typeof PreviousMonthButton

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

Render the previous month button element in the navigation.

Root​

Root: typeof Root

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

Render the root element of the calendar.

Select​

Select: typeof Select

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

Render the select element in the dropdowns.

Week​

Week: typeof Week

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

Render the week rows.

Weekday​

Weekday: typeof Weekday

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

Render the weekday name in the header.

Weekdays​

Weekdays: typeof Weekdays

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

Render the row containing the week days.

WeekNumber​

WeekNumber: typeof WeekNumber

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

Render the cell with the number of the week.

WeekNumberHeader​

WeekNumberHeader: typeof WeekNumberHeader

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

Render the header of the week number column.

Weeks​

Weeks: typeof Weeks

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

Render the weeks section in the month grid.

YearsDropdown​

YearsDropdown: typeof YearsDropdown

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

Render the dropdown for selecting years.