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> tag to affect all views, or inside specific view components to customize event rendering for that view only.
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.
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.
If you would like to keep the default double-click editing of the all-day slot in an editable Scheduler, you need to add the custom attribute
data-day-slot="true"to the relevant elements within your all-day slot template (see example).
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.
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.
Multi-Week Slots
You can use the Multi-Week slot template to customize the rendering of the day slots for the Multi-Week view. To define the template, nest an <ng-template> tag with the kendoSchedulerMultiWeekDaySlotTemplate directive inside the <kendo-scheduler>, or in the <kendo-scheduler-multi-week-view> component.
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, Day, and Timeline 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>, <kendo-scheduler-week-view>, <kendo-scheduler-timeline-view>, <kendo-scheduler-timeline-week-view>, and <kendo-scheduler-timeline-month-view> components.
Minor-Time Headers
You can use the minor-time header template to customize the rendering of the minor time header slots for the Week, Day, and Timeline 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>, <kendo-scheduler-week-view>, <kendo-scheduler-timeline-view>, <kendo-scheduler-timeline-week-view>, and <kendo-scheduler-timeline-month-view> components.
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.
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.
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.
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.
Suggested Links
- Angular Scheduler Overview
kendoSchedulerEventTemplatekendoSchedulerAllDayEventTemplatekendoSchedulerAllDaySlotTemplatekendoSchedulerTimeSlotTemplatekendoSchedulerMonthDaySlotTemplatekendoSchedulerMajorTimeHeaderTemplatekendoSchedulerMinorTimeHeaderTemplatekendoSchedulerDateHeaderTemplatekendoSchedulerGroupHeaderTemplatekendoSchedulerAgendaDateTemplatekendoSchedulerAgendaTimeTemplate