Templates

Updated on Jul 17, 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.

<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