Header & Footer CustomizationPremium
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
headerandfootercomponents are available for customization. We are actively working on exposing thenavigation,viewSelectorandbusinessHoursTogglecomponents.
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.