Skip to main content

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

NameTypeDescription
Buttontypeof components.ButtonRender any button element in DayPicker. Deprecated Use CustomComponents.NextMonthButton or CustomComponents.PreviousMonthButton instead.
CaptionLabeltypeof CaptionLabelRender the caption label of the month grid.
Chevrontypeof ChevronRender the chevron icon used in the navigation buttons and dropdowns.
Daytypeof DayRender the day cell in the month grid.
DayButtontypeof DayButtonRender the button containing the day in the day cell.
Dropdowntypeof DropdownRender the dropdown element to select years and months.
DropdownNavtypeof DropdownNavRender the container of the dropdowns.
Footertypeof FooterRender the footer element announced by screen readers.
Monthtypeof MonthRender the container of the MonthGrid.
MonthCaptiontypeof MonthCaptionRender the caption of the month grid.
MonthGridtypeof MonthGridRender the grid of days in a month.
Monthstypeof MonthsWrapper of the month grids.
MonthsDropdowntypeof MonthsDropdownRender the dropdown with the months.
Navtypeof NavRender the navigation element with the next and previous buttons.
NextMonthButtontypeof NextMonthButtonRender the next month button element in the navigation.
Optiontypeof OptionRender the <option> HTML element in the dropdown.
PreviousMonthButtontypeof PreviousMonthButtonRender the previous month button element in the navigation.
Roottypeof RootRender the root element of the calendar.
Selecttypeof SelectRender the select element in the dropdowns.
Weektypeof WeekRender the week rows.
Weekdaytypeof WeekdayRender the weekday name in the header.
Weekdaystypeof WeekdaysRender the row containing the week days.
WeekNumbertypeof WeekNumberRender the cell with the number of the week.
WeekNumberHeadertypeof WeekNumberHeaderRender the header of the week number column.
Weekstypeof WeeksRender the weeks section in the month grid.
YearsDropdowntypeof YearsDropdownRender the dropdown with the years.

See

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

Defined in

src/types/shared.ts:46