# Data Binding

The KendoReact Scheduler component accepts an array of [`DataItem`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/dataitem) objects through the [`data`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#data) property.

## Getting Started

The `DataItem` type does not limit the user to a specific fields in the `data` array but expects that the [`modelFields`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#modelfields) property is set as well, or that the `DataItem` has the default fields mapping.

When you bind the Scheduler to data, note the following specifics:

* In order for the Scheduler to correctly render the data items, you have to define the `id`, `start`, and `end` fields.
* In order for the Scheduler to correctly handle and format dates, you have to represent them by instances of the JavaScript `Date` object.

## Using the data Property

The `data` property represents an array of objects which either have `id`, `start`, and `end` fields, or fields which represent the same values.

The following example demonstrates how to take a simple object and render it in the Scheduler. The **Breakfast with Tom** event is rendered between the **8:30 AM** and **9:00 AM** slots on **27th of August**. The example does no focus on the `timezone` property—for more information, refer to the article on [timezones](https://www.telerik.com/kendo-react-ui/components/scheduler/timezones).

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/data-binding/data/func/source.txt)

## Using the modelFields Property

Since the `data` array items can be of any type, you can provide a custom mapping from the data items of the Scheduler by using the [`modelFields`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#modelfields) property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/data-binding/model-fields/func/source.txt)

## Handling Data Changes

When the [`editable`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#editable) or the corresponding `drag`, `resize`, or `edit` fields are set to `true`, the Scheduler will call the [`onDataChange`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#ondatachange) callback function.

`onDataChange` provides the following collections of items:

* `updated`—Represents all updated items in the provided `data` collection.
* `created`—Represents the newly created items.
* `deleted`—Represents the deleted items from the provided `data` collection.

The most common scenario is to update the entries in your database and fetch the data again.

> Due to possible collisions with the `id` field of the newly created items and apart from notifying what changes need to be done, the Scheduler does not generate the new `data` collection. As a result, the handling of the data changes has to be controlled by you.

The following example demonstrates how to handle the `onDataChange` callback and update the local state. To trigger a data change, drag the slot in a different time slot. For more information, refer to the article on [editing the KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/editing).

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/data-binding/data-change/func/source.txt)

## Suggested Links

* [Editing in the KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/editing)
* [API Reference of the KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)