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.
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.
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
kendoSchedulerEventTemplate
kendoSchedulerAllDayEventTemplate
kendoSchedulerAllDaySlotTemplate
kendoSchedulerTimeSlotTemplate
kendoSchedulerMonthDaySlotTemplate
kendoSchedulerMajorTimeHeaderTemplate
kendoSchedulerMinorTimeHeaderTemplate
kendoSchedulerDateHeaderTemplate
kendoSchedulerGroupHeaderTemplate
kendoSchedulerAgendaDateTemplate
kendoSchedulerAgendaTimeTemplate
- API Reference of the SchedulerComponent