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; }

The components that can be changed using the components prop.

Type declaration

Name	Type	Description
Button	typeof components.Button	Render any button element in DayPicker. Deprecated Use CustomComponents.NextMonthButton or CustomComponents.PreviousMonthButton instead.
CaptionLabel	typeof CaptionLabel	Render the caption label of the month grid.
Chevron	typeof Chevron	Render the chevron icon used in the navigation buttons and dropdowns.
Day	typeof Day	Render the day cell in the month grid.
DayButton	typeof DayButton	Render the button containing the day in the day cell.
Dropdown	typeof Dropdown	Render the dropdown element to select years and months.
DropdownNav	typeof DropdownNav	Render the container of the dropdowns.
Footer	typeof Footer	Render the footer element announced by screen readers.
Month	typeof Month	Render the container of the MonthGrid.
MonthCaption	typeof MonthCaption	Render the caption of the month grid.
MonthGrid	typeof MonthGrid	Render the grid of days in a month.
Months	typeof Months	Wrapper of the month grids.
MonthsDropdown	typeof MonthsDropdown	Render the dropdown with the months.
Nav	typeof Nav	Render the navigation element with the next and previous buttons.
NextMonthButton	typeof NextMonthButton	Render the next month button element in the navigation.
Option	typeof Option	Render the <option> HTML element in the dropdown.
PreviousMonthButton	typeof PreviousMonthButton	Render the previous month button element in the navigation.
Root	typeof Root	Render the root element of the calendar.
Select	typeof Select	Render the select element in the dropdowns.
Week	typeof Week	Render the week rows.
Weekday	typeof Weekday	Render the weekday name in the header.
Weekdays	typeof Weekdays	Render the row containing the week days.
WeekNumber	typeof WeekNumber	Render the cell with the number of the week.
WeekNumberHeader	typeof WeekNumberHeader	Render the header of the week number column.
Weeks	typeof Weeks	Render the weeks section in the month grid.
YearsDropdown	typeof YearsDropdown	Render the dropdown with the years.

See

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

Defined in

src/types/shared.ts:46