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.
Editing Templates
Editing templates let you customize the popover bodies and the recurrence summary of the built-in editor. The popover titles and actions remain unchanged.
Quick Create Template
The kendoSchedulerQuickCreateTemplate directive customizes the body of the quick create popover. To define the template, nest it inside the <kendo-scheduler> tag and set the quickCreate property to true.
The template context provides the quick create FormGroup as the default value and as formGroup. It also exposes the start, end, isAllDay, and resources fields of the selected slot.
When you use the kendoSchedulerReactiveEditing directive, the CreateFormGroupArgs.quickCreate property indicates whether the popover or the full edit form is needed. Each FormGroup requires a control for every field in its template.
The following example adds room and agenda fields and requires a meeting title. Save stores all values, while More options carries only the title to the full editor.
Event Overview Template
The kendoSchedulerEventOverviewTemplate directive customizes the body of the event overview popover. To define the template, nest it inside the <kendo-scheduler> tag. The eventOverview property is true by default.
The template context provides the displayed event as the default value and as event. It also exposes dataItem (the original model, including custom fields), start, end, and isAllDay.
For recurring events, the start and end fields of the context hold the occurrence dates, while dataItem holds the series dates.
The following example adds the meeting location and host to the event overview.
Recurrence Summary Template
The kendoSchedulerRecurrenceSummaryTemplate directive customizes the summary below Edit recurrence in the built-in edit dialog. The template context provides the recurrence rule as the default value, the parsedRule object, and the default localized text.
The following example adds a Recurrence: label in both the edit dialog and recurrence dialog.
Suggested Links
- Angular Scheduler Overview
kendoSchedulerEventTemplatekendoSchedulerAllDayEventTemplatekendoSchedulerAllDaySlotTemplatekendoSchedulerTimeSlotTemplatekendoSchedulerMonthDaySlotTemplatekendoSchedulerMajorTimeHeaderTemplatekendoSchedulerMinorTimeHeaderTemplatekendoSchedulerDateHeaderTemplatekendoSchedulerGroupHeaderTemplatekendoSchedulerAgendaDateTemplatekendoSchedulerAgendaTimeTemplatekendoSchedulerQuickCreateTemplatekendoSchedulerEventOverviewTemplatekendoSchedulerRecurrenceSummaryTemplate