Data Binding
The Kendo UI for Angular Scheduler accepts an array of SchedulerEvent objects through the events attribute of the <kendo-scheduler> tag.
The Scheduler provides two approaches for data binding:
- Automatic data processing with
kendoSchedulerBinding—Handles filtering of out-of-range events and recurrence expansion in-memory. - Manual data management with the
eventsproperty—Gives you full control over data processing.
Automatic Data Processing
The built-in kendoSchedulerBinding directive automatically filters events that are out of range and expands recurring series in-memory. Use this approach when you want the Scheduler to handle data processing for you.
Loading Events from Local Data
The kendoSchedulerBinding directive accepts an array of events that match the SchedulerEvent interface structure. Dates must be represented by instances of the JavaScript Date object to ensure their correct handling and formatting. If your data is in a different format, you need to transform it to match the SchedulerEvent interface or use field mapping as described in Binding to Custom Object Schemas section.
The following example demonstrates how to use the kendoSchedulerBinding directive to bind the Scheduler to local data.
To implement this functionality, create an array of events and bind it to the Scheduler:
export class SchedulerComponent {
public events: SchedulerEvent[] = [
{
id: 1,
title: 'Team Meeting',
start: new Date(2025, 5, 15, 9, 0),
end: new Date(2025, 5, 15, 10, 30),
recurrenceRule: 'FREQ=DAILY;COUNT=5;'
},
{
id: 2,
title: 'Project Review',
start: new Date(2025, 5, 15, 14, 0),
end: new Date(2025, 5, 15, 15, 0)
},
{
id: 3,
title: 'Client Presentation',
start: new Date(2025, 5, 15, 11, 0),
end: new Date(2025, 5, 15, 12, 30)
}
];
}Loading Events from Remote Data
When you receive data from a service or API, pipe it through the async pipe. The service must return data that matches the SchedulerEvent interface structure. If your service returns data in a different format, you need to either transform it to match the SchedulerEvent interface or use field mapping as described in Binding to Custom Object Schemas section.
The async pipe subscribes to the observable and provides the emitted event arrays to the kendoSchedulerBinding directive.
To implement this functionality, create a service that fetches data and transforms it to match the SchedulerEvent interface:
@Injectable()
export class DataService {
private dataSubject = new BehaviorSubject<SchedulerEvent[]>([]);
public data$ = this.dataSubject.asObservable();
constructor(private http: HttpClient) {}
public fetchEvents(): Observable<SchedulerEvent[]> {
return this.http
.get<any[]>("https://demos.telerik.com/service/v2/core/Tasks")
.pipe(
map((data) => data.map((item) => this.mapToSchedulerEvent(item))),
tap((events) => this.dataSubject.next(events))
);
}
private mapToSchedulerEvent(item: any): SchedulerEvent {
return {
id: item.TaskID,
title: item.Title,
start: parseDate(item.Start),
end: parseDate(item.End),
isAllDay: item.IsAllDay,
recurrenceRule: item.RecurrenceRule
};
}
}The kendoSchedulerBinding directive expands recurring events in-memory by using the supplied recurrence rule. The rule is evaluated only for the visible time period of the current view.
Determining whether an event occurs in the current time period requires the evaluation of the recurrence rule. In practice, events with set recurring rules must be supplied unless the final date of the recurrence can be determined on the server.
Manual Data Management
You can bind events directly using the events attribute of the Scheduler. This approach bypasses the built-in filtering and recurrence engine, giving you complete control over the data.
Use manual data management when you want to:
- Handle recurrence processing on the server.
- Implement custom filtering logic.
- Manage large datasets with server-side pagination.
- Control exactly which events appear in the view.
Dates must be represented by instances of the JavaScript Date object to ensure their correct handling and formatting.
The following example demonstrates the manual approach to data binding and custom event filtering.
To implement this functionality, create an array of events and bind it directly to the events property:
export class SchedulerComponent {
public events: SchedulerEvent[] = [
{
id: 1,
title: 'Meeting',
start: new Date(2023, 5, 15, 9, 0),
end: new Date(2023, 5, 15, 10, 0)
}
];
}Binding to Custom Object Schemas
By default, the Scheduler accepts an array of SchedulerEvent objects as data. To bind the component to custom objects, use the modelFields property to map your model fields to the Scheduler's expected properties.
To implement this functionality, define your custom model interface and create a field mapping configuration:
// Custom model interface
interface WorkOrder {
workOrderId: number;
operationName: string;
scheduledStart: Date;
scheduledEnd: Date;
isFullShift: boolean;
// ... other properties
}
// Field mapping configuration
public workOrderFields: SchedulerModelFields = {
id: 'workOrderId',
title: 'operationName',
start: 'scheduledStart',
end: 'scheduledEnd',
isAllDay: 'isFullShift'
};The modelFields object maps Scheduler properties to your custom model field names. The field names are strings, but your model properties must be the correct types:
| Scheduler Property | Description |
|---|---|
id | Maps to your unique identifier field (e.g., 'workOrderId'). Your model property must be of type string or number. |
title | Maps to your event title field (e.g., 'operationName'). Your model property must be of type string. |
description | Maps to your event description field (e.g., 'operationDetails'). Your model property must be of type string. |
start | Maps to your start date field (e.g., 'scheduledStart'). Your model property must be of type Date. |
end | Maps to your end date field (e.g., 'scheduledEnd'). Your model property must be of type Date. |
startTimezone | Maps to your start timezone field (e.g., 'startTZ'). Your model property must be of type string or null. |
endTimezone | Maps to your end timezone field (e.g., 'endTZ'). Your model property must be of type string or null. |
isAllDay | Maps to your all-day flag field (e.g., 'isFullShift'). Your model property must be of type boolean. |
recurrenceRule | Maps to your recurrence rule field (e.g., 'repeatPattern'). Your model property must be of type string or null. |
recurrenceId | Maps to your recurrence parent ID field (e.g., 'repeatId'). Your model property must be of type string, number, or null. |
recurrenceExceptions | Maps to your recurrence exceptions field (e.g., 'repeatExceptions'). Your model property must be of type string or null. |
Loading Events on Demand
The dateChange event fires each time the current date range changes. This allows you to load event data in smaller chunks that cover only the currently visible time period, which improves performance when you have many events.
Use this approach when you want to:
- Load events for specific date ranges instead of all events at once.
- Improve performance with large datasets.
- Reduce memory usage by loading only visible events.
- Fetch fresh data when users navigate to different time periods.
- Implement server-side filtering based on the current view.
The
dateChangeevent does not necessarily fire when the views get switched—for example, an Agenda and a Week view may cover the same date range.
The following example demonstrates how to handle the dateChange event to load events for the visible date range.
Binding of Resources
The Scheduler supports binding events to resources for organization and grouping capabilities. Resources allow you to assign metadata like meeting rooms, attendees, or equipment to events.
For comprehensive information about resource configuration, grouping, and examples, see the Resources and Grouping article.