Template in the React Scheduler

The Scheduler component supports flexible templates to customize headers, cells, and events. Create scheduler with conditional content, icons, and custom layouts that reflect your application's style and respond to data changes.

Customize Event appearance

Override default event rendering using the eventTemplate property to create custom event layouts. Add text, images, icons, links, badges, or buttons to control colors, typography, time format, and structure entirely.

Customize Date header appearance

Replace the default date header with a custom template using the dateHeader property. Combine formatted date text (e.g., "Tue 4") with icons or badges—such as weather information—to create informative, visually rich headers.

Customize Month cell header

Customize the header area within each Month view cell using the cellHeader property to display additional context like weather icons, badges, or counts. The template receives the cell date and renders formatted day labels with icons or labels based on custom logic.

Customize Month cell appearance

Style and decorate Month view cells based on the date using the cell property. Add Syncfusion icons, color tags, or custom classes to highlight weekends, holidays, or event-driven states. Return an empty fragment for unchanged cells.

Customize Header-indent

The headerIndent property enables the rendering of custom content, such as icons, badges, or text, within the top-left indent area of the Scheduler. When showWeekNumber is enabled, the template function receives HeaderIndentProps, providing access to the current week number for precise display control.

For example, a more icon can be integrated into the header indent to trigger a dropdown menu containing various time scale interval options (e.g., 60, 30, or 15 minutes). Selecting an option dynamically updates the timeScale property, offering a seamless method to adjust the level of detail in the calendar view directly from the interface.