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, 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.

import React from 'react';
import ReactDOM from 'react-dom';
import { Scheduler, DayView } from '@progress/kendo-react-scheduler';

const displayDate = new Date(2019, 7, 27)
const data = [{
    id: 0,
    title: 'Breakfast with Tom',
    start: new Date("2019-08-27T08:30:00.000Z"),
    end: new Date("2019-08-27T09:00:00.000Z"),
}]

const App = () => {
    return (
        <Scheduler data={data} defaultDate={displayDate} timezone="Etc/UTC">
            <DayView />
        </Scheduler>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));

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.

import React from 'react';
import ReactDOM from 'react-dom';
import { Scheduler, DayView } from '@progress/kendo-react-scheduler';

const displayDate = new Date("2019-08-26T21:00:00.000Z")

const data = [{
    TaskID: 0,
    Subject: 'Breakfast with Tom',
    Start: new Date("2019-08-27T05:30:00.000Z"),
    End: new Date("2019-08-27T06:00:00.000Z"),
}, {
    TaskID: 1,
    Subject: 'Lunch with Loren',
    Start: new Date("2019-08-27T09:00:00.000Z"),
    End: new Date("2019-08-27T10:00:00.000Z"),
}]

const modelFields = {
    id: 'TaskID',
    title: 'Subject',
    start: 'Start',
    end: 'End'
}

const App = () => {
    return (
        <Scheduler data={data} displayDate={displayDate} modelFields={modelFields}>
            <DayView />
        </Scheduler>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));

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 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.

import React from 'react';
import ReactDOM from 'react-dom';
import { Scheduler, DayView } from '@progress/kendo-react-scheduler';

const displayDate = new Date("2019-08-26T21:00:00.000Z")

const defaultData = [{
    id: 0,
    title: 'Move me to 10:30 AM',
    start: new Date("2019-08-27T06:00:00.000Z"),
    end: new Date("2019-08-27T06:30:00.000Z"),
}]

const App = () => {
    const [data, setData] = React.useState(defaultData);

    const handleDataChange = React.useCallback(
        ({ updated }) => {
            setData(old => old
                .map((item) => updated.find(current => current.id === item.id) || item))
        },
        [data, setData]
    )
    return (
        <Scheduler
            data={data}
            onDataChange={handleDataChange}

            editable={{ drag: true }}
            displayDate={displayDate}
        >
            <DayView />
        </Scheduler>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));
 /