# Data Binding The Kendo UI for Angular Scheduler accepts an array of [`SchedulerEvent`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulerevent) objects through the [`events`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulercomponent#events) attribute of the `` tag. The Scheduler provides two approaches for data binding: * **Automatic data processing** with [`kendoSchedulerBinding`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/databindingdirective)—Handles filtering of out-of-range events and recurrence expansion in-memory. * **Manual data management** with the [`events`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulercomponent#events) property—Gives you full control over data processing. ## Automatic Data Processing The built-in [`kendoSchedulerBinding`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/databindingdirective) 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`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulerevent) interface structure. Dates must be represented by instances of the [JavaScript `Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://www.telerik.com/kendo-angular-ui/components/scheduler/data-binding#binding-to-custom-object-schemas) section. The following example demonstrates how to use the `kendoSchedulerBinding` directive to bind the Scheduler to local data. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/data-binding/directive/source.txt) To implement this functionality, create an array of events and bind it to the Scheduler: ```typescript Basic Setup 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) } ]; } ``` ```html HTML Binding ``` ### 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`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/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](https://www.telerik.com/kendo-angular-ui/components/scheduler/data-binding#binding-to-custom-object-schemas) section. The `async` pipe subscribes to the observable and provides the emitted event arrays to the `kendoSchedulerBinding` directive. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/data-binding/remote-data-binding/source.txt) To implement this functionality, create a service that fetches data and transforms it to match the SchedulerEvent interface: ```typescript Sample Service @Injectable() export class DataService { private dataSubject = new BehaviorSubject([]); // Keep subject writes inside the service while exposing events to the async pipe. public data$ = this.dataSubject.asObservable(); constructor(private http: HttpClient) {} public fetchEvents(): Observable { return this.http .get("https://demos.telerik.com/service/v2/core/Tasks") .pipe( // Convert API fields and date values to SchedulerEvent properties. map((data) => data.map((item) => this.mapToSchedulerEvent(item))), // Push transformed events to data$ so the async binding receives them. 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 }; } } ``` ```typescript Fetching Data in Component export class SchedulerComponent { public events$: Observable; constructor(private dataService: DataService) { this.events$ = this.dataService.data$; this.dataService.fetchEvents().subscribe(); } } ``` ```html Binding in Template ``` The `kendoSchedulerBinding` directive expands [recurring events](https://www.telerik.com/kendo-angular-ui/components/scheduler/recurring-events) in-memory by using the supplied [recurrence rule](https://www.telerik.com/kendo-angular-ui/components/scheduler/recurring-events/recurrence-rules). 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`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulercomponent#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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object to ensure their correct handling and formatting. The following example demonstrates the manual approach to data binding and custom event filtering. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/data-binding/manual/source.txt) To implement this functionality, create an array of events and bind it directly to the `events` property: ```typescript Basic Manual Setup 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) } ]; } ``` ```html HTML Manual Binding ``` ## Binding to Custom Object Schemas By default, the Scheduler accepts an array of [`SchedulerEvent`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulerevent) objects as data. To bind the component to custom objects, use the [`modelFields`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulercomponent#modelfields) property to map your model fields to the Scheduler's expected properties. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/data-binding/directive-custom-schema/source.txt) To implement this functionality, define your custom model interface and create a field mapping configuration: ```typescript Model Mapping // Use Scheduler-compatible types for fields referenced by modelFields. interface WorkOrder { workOrderId: number; operationName: string; scheduledStart: Date; scheduledEnd: Date; isFullShift: boolean; } // Map Scheduler properties to the corresponding WorkOrder fields. public workOrderFields: SchedulerModelFields = { id: 'workOrderId', title: 'operationName', start: 'scheduledStart', end: 'scheduledEnd', isAllDay: 'isFullShift' }; ``` ```html HTML Model Binding ``` 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`](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/datechangeevent) 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 `dateChange` event 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/data-binding/date-changed/source.txt) ## 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](https://www.telerik.com/kendo-angular-ui/components/scheduler/resources-grouping) article. ## Suggested Links * [Angular Scheduler Overview](https://www.telerik.com/kendo-angular-ui/components/scheduler) * [Scheduler Views Basics](https://www.telerik.com/kendo-angular-ui/components/scheduler/views) * [Scheduler Resources and Grouping](https://www.telerik.com/kendo-angular-ui/components/scheduler/resources-grouping) * [Scheduler Recurring Events](https://www.telerik.com/kendo-angular-ui/components/scheduler/recurring-events) * [Scheduler Timezones](https://www.telerik.com/kendo-angular-ui/components/scheduler/timezones) * [Scheduler Editing](https://www.telerik.com/kendo-angular-ui/components/scheduler/editing) * [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/schedulercomponent)