# Templates The Kendo UI Scheduler for Angular provides templates for customizing the rendering of its elements. ## Event Templates * [Event rendering](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#event-rendering) * [All-day events](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#all-day-events) ### 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 `` tag with the [`kendoSchedulerEventTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/eventtemplatedirective) directive inside the `` tag to affect all views, or inside specific view components to customize event rendering for that view only. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/event/source.txt) ### 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 `` tag with the [`kendoSchedulerAllDayEventTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/alldayeventtemplatedirective) directive inside the ``, ``, or `` component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/all-day-event/source.txt) ## Slot Templates * [All-day slots](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#all-day-slots) * [Time slots](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#time-slots) * [Month slots](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#month-slots) * [Multi-Week slots](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#multi-week-slots) ### 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 `` tag with the [`kendoSchedulerAllDaySlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/alldayslottemplatedirective) directive inside the ``, ``, or `` component. > If you would like to keep the default double-click editing of the all-day slot in an [editable Scheduler](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing), you need to add the custom attribute `data-day-slot="true"` to the relevant elements within your all-day slot template (see [example](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/drag-and-drop-listview-scheduler)). [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/all-day-slot/source.txt) ### 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 `` tag with the [`kendoSchedulerTimeSlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timeslottemplatedirective) directive inside the ``, or in the ``, ``, ``, ``, and `` components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/time-slot/source.txt) ### 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 `` tag with the [`kendoSchedulerMonthDaySlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthdayslottemplatedirective) directive inside the ``, or in the `` component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/month-slot/source.txt) ### 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 `` tag with the [`kendoSchedulerMultiWeekDaySlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/multiweekdayslottemplatedirective) directive inside the ``, or in the `` component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/multi-week-slot/source.txt) ## Header Templates * [Major-time headers](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#major-time-headers) * [Minor-time headers](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#minor-time-headers) * [Date headers](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#date-headers) * [Group headers](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#group-headers) ### 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 `` tag with the [`kendoSchedulerMajorTimeHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/majortimeheadertemplatedirective) directive inside the ``, or in the ``, ``, ``, ``, and `` components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/major-header/source.txt) ### 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 `` tag with the [`kendoSchedulerMinorTimeHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/minortimeheadertemplatedirective) directive inside the ``, or in the ``, ``, ``, ``, and `` components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/minor-header/source.txt) ### 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 `` tag with the [`kendoSchedulerDateHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/dateheadertemplatedirective) directive inside the ``, or in the ``, ``, ``, ``, and `` components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/date-header/source.txt) ### 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 `` tag with the [`kendoSchedulerGroupHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/groupheadertemplatedirective) directive inside the ``, or in the view components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/group-header/source.txt) ## Agenda Templates * [Agenda dates](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#agenda-dates) * [Agenda times](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#agenda-times) ### 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 `` tag with the [`kendoSchedulerAgendaDateTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/agendadatetemplatedirective) directive inside the `` or `` components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/agenda-date-header/source.txt) ### 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 `` tag with the [`kendoSchedulerAgendaTimeTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/agendatimetemplatedirective) directive inside the `` or `` components. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/agenda-time-header/source.txt) ## 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](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#quick-create-template) * [Event Overview template](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#event-overview-template) * [Recurrence Summary template](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#recurrence-summary-template) ### Quick Create Template The [`kendoSchedulerQuickCreateTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/quickcreatetemplatedirective) directive customizes the body of the [quick create popover](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#quick-create). To define the template, nest it inside the `` tag and set the [`quickCreate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective) directive, the [`CreateFormGroupArgs.quickCreate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/createformgroupargs#quickcreate) property indicates whether the popover or the [full edit form](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#built-in-edit-dialog) 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/quick-create/source.txt) ### Event Overview Template The [`kendoSchedulerEventOverviewTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/eventoverviewtemplatedirective) directive customizes the body of the [event overview popover](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#event-overview). To define the template, nest it inside the `` tag. The [`eventOverview`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/templates/event-overview/source.txt) ### Recurrence Summary Template The [`kendoSchedulerRecurrenceSummaryTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/recurrencesummarytemplatedirective) 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/recurring/editing/source.txt) ## Suggested Links * [Angular Scheduler Overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler) * [`kendoSchedulerEventTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/eventtemplatedirective) * [`kendoSchedulerAllDayEventTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/alldayeventtemplatedirective) * [`kendoSchedulerAllDaySlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/alldayslottemplatedirective) * [`kendoSchedulerTimeSlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timeslottemplatedirective) * [`kendoSchedulerMonthDaySlotTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthdayslottemplatedirective) * [`kendoSchedulerMajorTimeHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/majortimeheadertemplatedirective) * [`kendoSchedulerMinorTimeHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/minortimeheadertemplatedirective) * [`kendoSchedulerDateHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/dateheadertemplatedirective) * [`kendoSchedulerGroupHeaderTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/groupheadertemplatedirective) * [`kendoSchedulerAgendaDateTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/agendadatetemplatedirective) * [`kendoSchedulerAgendaTimeTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/agendatimetemplatedirective) * [`kendoSchedulerQuickCreateTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/quickcreatetemplatedirective) * [`kendoSchedulerEventOverviewTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/eventoverviewtemplatedirective) * [`kendoSchedulerRecurrenceSummaryTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/recurrencesummarytemplatedirective)