Header in the React Scheduler
The React Scheduler component features a highly flexible header bar (toolbar) that manages navigation and view switching. Developers can fully customize this interface using the SchedulerHeader component to create tailored layouts, custom controls, and styled appearances.
SchedulerHeader component
The core of header customization is the Scheduler's header property. This property accepts a function that returns a SchedulerHeader component, giving you full control over the toolbar's structure.
By using this component you can reorder default items, insert custom React nodes (like buttons or images), or modify the behavior of standard navigation controls.
SchedulerHeader properties
The SchedulerHeader exposes several properties to configure the toolbar's behavior and appearance. Use these props to interact with specific sections of the header individually.
| Prop | Description |
|---|---|
children | Renders the default toolbar items in their standard order. |
todayProps | Properties for the Today button (icon, disabled state, variant, styles, or attributes). |
previousProps | Properties for the Previous navigation button (icon, appearance, behavior). |
nextProps | Properties for the Next navigation button (icon, style, functionality). |
dateRangeProps | Properties for the DateRange display (format, style, or custom templates). |
dateRangeTemplate | Custom rendering template for the date range label. |
viewSwitcherProps | Properties for the ViewSwitcher control (appearance, available views, interaction). |
overflowMode | Controls how toolbar items behave when space is limited (scrollable, popup, etc.). |
Built-in toolbar items
The Scheduler includes standard toolbar items essential for calendar navigation. These can be used without modification, customized, or hidden based on your application requirements.
| Item | Purpose |
|---|---|
Today | Instantly navigates the view to the current date. |
Previous | Buttons to traverse backward through date ranges. |
Next | Buttons to traverse forward through date ranges. |
DateRange | A text label showing the currently visible period. |
ViewSwitcher | Controls for toggling between views such as Day, Week, WorkWeek, and Month. |
Customizing the header layout
You can customize and extend the toolbar beyond its default arrangement by mixing built-in items with custom components through the use of ToolbarItem, ToolbarSeparator and
ToolbarSpacer.
For example, insert a company logo, add a New Event button, or reorder the navigation arrows. The example below demonstrates a fully customized header that reorders items and includes custom assets.
Hiding header elements
Flexibility also means simplifying the interface. You can hide specific controls or remove the header entirely for a minimalist look.
- Hide specific items - Pass
nullto props liketodayPropsorviewSwitcherPropsto remove those buttons while keeping the rest of the toolbar. - Hide entire header - Set the Scheduler's
headerproperty tofalseto remove the toolbar completely.