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 and footer components are available for customization. We are actively working on exposing the navigation, viewSelector and businessHoursToggle 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');


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.

View Source
Change Theme: