Header & Footer Customization
The Kendo UI for Vue Native Scheduler allows us to edit its
footer while keeping the build-in functionalities of the component.
To redefine the built-in
footer we have to use the header and footer properties of the Scheduler. The two properties accept
slot templates inside which we define the custom content of the two elements.
The following example demonstrates how to conditionally render the
footer components, based on user configuration. In color, you can see the elements that are added among the default Scheduler
footer elements. We can also add custom DropDowns or pickers, based on the application requirements.
The above example uses the following components that are used under the hood with the default
- SchedulerNavigation(used in the header) - Displays the Navigation buttons in the header.
- NavigationDatePicker(used in the header) - Displays the DatePicker in the header.
- ToolbarSpacer (used in the header) - Adds empty space in the header.
- SchedulerViewSelector(used in the header) - Displays the list of Views available in the Scheduler.
- BusinessHours(used in the footer) - Displays the "Show full day" button available in some Scheduler views.