Data Binding
The KendoReact Scheduler component accepts an array of DataItem objects through the 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 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, andendfields. - In order for the Scheduler to correctly handle and format dates, you have to represent them by instances of the JavaScript
Dateobject.
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.
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 property.
Handling Data Changes
When the editable or the corresponding drag, resize, or edit fields are set to true, the Scheduler will call the onDataChange callback function.
onDataChange provides the following collections of items:
updated—Represents all updated items in the provideddatacollection.created—Represents the newly created items.deleted—Represents the deleted items from the provideddatacollection.
The most common scenario is to update the entries in your database and fetch the data again.
Due to possible collisions with the
idfield of the newly created items and apart from notifying what changes need to be done, the Scheduler does not generate the newdatacollection. 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.