Customization
The Kendo UI for Vue Native 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.CalendarHeaderTitle—Renders the title for the current Calendar view.
Cells inside the View
You can customize or 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.
Modifying the Cells
To modify an individual cell inside the Calendar view, use the CalendarCell component from the @progress/kendo-date-dateinputs package. CalendarCell will acquire custom behavior and will modify only some of the cells.
For the
CalendarCellcomponent to work properly, pass back all properties.
The following example demonstrates how to customize individual cells within a Calendar view by applying custom styling based on cell state (weekend cells appear with reduced opacity, weekdays are bold).
Overriding the Default Properties
The 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
onClickevent.
The following example demonstrates how to gain full control over cell rendering by passing a raw HTML <td> element as the cell property, allowing complete customization of the cell structure and styling.
Other Child Components
Similar to the cell property, the Calendar allows you to modify or override other child element through its weekCell and headerTitle.
Cells inside the Week Column
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 true. CalendarWeekCell will receive relevant information about its state through the CalendarWeekCellProps.
Titles of Current Views
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 CalendarHeaderTitleProps
For the
CalendarHeaderTitlecomponent to work properly, pass back all properties.
The following example demonstrates how to customize the Calendar header title by adding an upward arrow indicator for non-century views and handling view change clicks through the click event.