Header & Footer Customization
The KendoReact Scheduler renders a navigation
and viewSelector
components inside the header
and businessHoursToggle
component inside footer
. Those components provides quick access to the available views
and allows for fast date
navigation or business-hours
toggle.
Currently, only the
header
andfooter
components are available for customization. We are actively working on exposing thenavigation
,viewSelector
andbusinessHoursToggle
components.
Importing the default components
The default header
is contained in the @progress/kendo-react-scheduler
package:
// ES2015 module syntax
import { SchedulerHeader, SchedulerFooter } from '@progress/kendo-react-scheduler';
// CommonJS format
const { SchedulerHeader, SchedulerFooter } = require('@progress/kendo-react-scheduler');
Customization
To customize the header
or footer
component, provide the corresponding header or footer property to the Scheduler
.
The following example demonstrates how to conditionally render the header
and footer
components, based on user configuration and add additional tools to the footer
.