Type Alias: CustomComponents
CustomComponents: {
Button
: typeofcomponents.Button
;CaptionLabel
: typeofCaptionLabel
;Chevron
: typeofChevron
;Day
: typeofDay
;DayButton
: typeofDayButton
;Dropdown
: typeofDropdown
;DropdownNav
: typeofDropdownNav
;Footer
: typeofFooter
;Month
: typeofMonth
;MonthCaption
: typeofMonthCaption
;MonthGrid
: typeofMonthGrid
;Months
: typeofMonths
;MonthsDropdown
: typeofMonthsDropdown
;Nav
: typeofNav
;NextMonthButton
: typeofNextMonthButton
;Option
: typeofOption
;PreviousMonthButton
: typeofPreviousMonthButton
;Root
: typeofRoot
;Select
: typeofSelect
;Week
: typeofWeek
;Weekday
: typeofWeekday
;Weekdays
: typeofWeekdays
;WeekNumber
: typeofWeekNumber
;WeekNumberHeader
: typeofWeekNumberHeader
;Weeks
: typeofWeeks
;YearsDropdown
: typeofYearsDropdown
; }
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