Templates

Updated on Sep 11, 2026

The Scheduler supports Kendo UI templates for customizing the content of events, all-day events, slots, headers, and tooltips. Use templates to display fields from Scheduler event data in a layout that matches your application.

For a runnable example, refer to the Scheduler templates demo.

Configure an Event Template

Set the eventTemplate option to a Kendo UI template. The template can use the event title, description, start, end, and resources fields.

The following example renders the event title and time range for each Scheduler event.

Example

View Source

<script id="event-template" type="text/x-kendo-template">
    <div class="event-template">
        <strong>#: title #</strong>
        <span>#: kendo.toString(start, "t") # - #: kendo.toString(end, "t") #</span>
    </div>
</script>

<div id="scheduler"></div>

<script>
    $("#scheduler").kendoScheduler({
        date: new Date("2025/6/12"),
        startTime: new Date("2025/6/12 08:00"),
        endTime: new Date("2025/6/12 18:00"),
        views: ["day", "week"],
        eventTemplate: $("#event-template").html(),
        dataSource: [
            {
                id: 1,
                title: "Project review",
                start: new Date("2025/6/12 10:00"),
                end: new Date("2025/6/12 11:00")
            }
        ]
    });
</script>

Configure Other Scheduler Templates

The Scheduler provides templates for other parts of its interface:

• allDayEventTemplate customizes all-day event content.
• dateHeaderTemplate customizes date headers.
• groupHeaderTemplate customizes resource group headers.
• majorTimeHeaderTemplate and minorTimeHeaderTemplate customize time headers.
• views.slotTemplate customizes time slots in supported views.
• views.tooltipTemplate customizes tooltips in the Year view.

See Also

• Scheduler Templates Demo
• Kendo UI Templates Overview
• Scheduler Event Template API
• JavaScript API Reference of the Scheduler