New to Kendo UI for AngularStart a free 30-day trial

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...