The Calendar enables the user to render custom components instead of the default ones and, in this way, to customize most of the child Calendar components which are otherwise inaccessible.
The user can replace the following default Calendar components with custom ones:
CalendarCell—Renders the cells inside the Calendar view.
CalendarWeekCell—Renders the cells inside the Calendar week column.
CalendarNavigationItem—Renders the items in the Navigation of the Calendar.
CalendarHeaderTitle—Renders the title for the current Calendar view.
You can customize or completely replace each individual cell inside the Calendar view with a custom component by passing a
cell property to the Calendar. The
cell property accepts Vue component, a render function, or a named slot. The custom cell receives relevant information about the state of the cell through the [props of the Calendar](% slug api_dateinputs_native_calendarcellprops %).
To modify an individual cell inside the Calendar view, use the
CalendarCell component from the
CalendarCell will acquire custom behavior and will modify only some of the cells.
CalendarCellcomponent to work properly, pass back all properties.
cell property allows you to pass any
<td /> element as a
CalendarCell. This approach is useful for gaining full control over the cell because the
CalendarCell component will render additional elements for the default styling.
For the custom cell to allow date selection, manually pass or handle the
CalendarWeekCell component represents the week number.
CalendarWeekCell is only visible in the
month view of the Calendar and if the
weekNumber property is set to
CalendarWeekCell will receive relevant information about its state through the
CalendarHeaderTitle component represents the title of the current Calendar view and also functions as a button for changing the current view.
CalendarHeaderTitle will receive relevant information about its state through the
CalendarHeaderTitlecomponent to work properly, pass back all properties.