Templates

The Kendo UI Scheduler for Angular provides templates for customizing the rendering of its elements.

Event Templates

Event Rendering

You can use the event template to customize the rendering of the displayed events in the Scheduler. To define the template, nest an <ng-template> tag with the kendoSchedulerEventTemplate directive inside the <kendo-scheduler>, or in the view components.

Example
View Source
Edit In Stackblitz  
Change Theme:

All-Day Events

You can use the all-day event template to customize the rendering of the Week and Day views of all-day events. To define the template, nest an <ng-template> tag with the kendoSchedulerAllDayEventTemplate directive inside the <kendo-scheduler>, <kendo-scheduler-day-view>, or <kendo-scheduler-week-view> component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Slot Templates

All-Day Slots

You can use the all-day slot template to customize the rendering of the Week and Day views for all-day slots. To define the template, nest an <ng-template> tag with the kendoSchedulerAllDaySlotTemplate directive inside the <kendo-scheduler>, <kendo-scheduler-day-view>, or kendo-scheduler-week-view component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Time Slots

You can use the time slot template to customize the rendering of the time slots for the Week, Day, and Timeline views. To define the template, nest an <ng-template> tag with the kendoSchedulerTimeSlotTemplate directive inside the <kendo-scheduler>, or in the <kendo-scheduler-day-view>, <kendo-scheduler-week-view>, <kendo-scheduler-timeline-view>, <kendo-scheduler-timeline-week-view>, and <kendo-scheduler-timeline-month-view> components.

Example
View Source
Edit In Stackblitz  
Change Theme:

Month Slots

You can use the month slot template to customize the rendering of the day slots for the Month view. To define the template, nest an <ng-template> tag with the kendoSchedulerMonthDaySlotTemplate directive inside the <kendo-scheduler>, or in the <kendo-scheduler-month-view> component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Header Templates

Major-Time Headers

You can use the major-time header template to customize the rendering of the time header slots for the Week and Day views. To define the template, nest an <ng-template> tag with the kendoSchedulerMajorTimeHeaderTemplate directive inside the <kendo-scheduler>, or in the <kendo-scheduler-day-view> and <kendo-scheduler-week-view> components.

Example
View Source
Edit In Stackblitz  
Change Theme:

Minor-Time Headers

You can use the minor-time header template to customize the rendering of the minor time header slots for the Week and Day views. To define the template, nest an <ng-template> tag with the kendoSchedulerMinorTimeHeaderTemplate directive inside the <kendo-scheduler>, or in the <kendo-scheduler-day-view> and <kendo-scheduler-week-view> components.

Example
View Source
Edit In Stackblitz  
Change Theme:

Date Headers

You can use the minor-date header template to customize the rendering of the date header slots for the Week, Day, and Timeline views. To define the template, nest an <ng-template> tag with the kendoSchedulerDateHeaderTemplate directive inside the <kendo-scheduler>, or in the <kendo-scheduler-day-view>, <kendo-scheduler-week-view>, <kendo-scheduler-timeline-view>, <kendo-scheduler-timeline-week-view>, and <kendo-scheduler-timeline-month-view> components.

Example
View Source
Edit In Stackblitz  
Change Theme:

Group Headers

You can use the group header template to customize the rendering of resource slots that are grouped by views. To define the template, nest an <ng-template> tag with the kendoSchedulerGroupHeaderTemplate directive inside the <kendo-scheduler>, or in the view components.

Example
View Source
Edit In Stackblitz  
Change Theme:

Agenda Templates

Agenda Dates

You can use the agenda date template to customize the rendering of the date headers for the Agenda view. To define the template, nest an <ng-template> tag with the kendoSchedulerAgendaDateTemplate directive inside the <kendo-scheduler-agenda-view> or <kendo-scheduler> components.

Example
View Source
Edit In Stackblitz  
Change Theme:

Agenda Times

You can use the agenda time template to customize the rendering of the time headers for the Agenda view. To define the template, nest an <ng-template> tag with the kendoSchedulerAgendaTimeTemplate directive inside the <kendo-scheduler-agenda-view> or <kendo-scheduler> components.

Example
View Source
Edit In Stackblitz  
Change Theme: