# Header & Footer Customization

The Kendo UI for Vue Scheduler allows us to edit its `header` and `footer` while keeping the build-in functionalities of the component.

To redefine the built-in `header` and `footer` we have to use the [header](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#header) and [footer](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#footer) properties of the Scheduler. The two properties accept `slot` templates inside which we define the custom content of the two elements.

## Add custom elements to header and footer

The following example demonstrates how to conditionally render the `header` and `footer` components, based on user configuration. In color, you can see the elements that are added among the default **Scheduler** `header` and `footer` elements. We can also add custom DropDowns or pickers, based on the application requirements.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/custom-templates/header-footer/source.txt)

The above example uses the following components that are used under the hood with the default `Scheduler` configuration:

* 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.

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops)