Editing

The Scheduler enables you to create, update, and delete its events.

Getting Started

The Scheduler provides a data property and an onDataChange callback to allow full user control. For more information on handling data changes, refer to the article on data binding.

To enable all edit modes in the Scheduler, set its editable property to true.

<Scheduler editable={true} />

To configure which edit modes will be enabled, set the editable property to an Object of type EditableProp with your custom configuration.

The EditableProp option provides the following options:

  • add—Allows the creation of a new DataItem when the user double-clicks a time or a day slot.
  • remove—Allows the deletion of the DataItem which is associated with the clicked event.
  • drag—Changes the start and end settings, or the provided resources configuration of the DataItem.
  • resize—Changes the duration of the DataItem.
  • edit—Provides advanced editing through a form component.
<Scheduler
    editable={{
        add: false,
        remove: false,
        drag: true,
        resize: true,
        edit: true
    }}
/>

Setup

The Scheduler provides the created, updated, and deleted data items through the onDataChange callback function.

The following example demonstrates how to allow editing in the Scheduler component and modify the local data based on the parameters that are passed as arguments to the onDataChange callback. To avoid the same id configurations on two data items, the following example uses a guid setting for the newly created data items.

import React from 'react';
import ReactDOM from 'react-dom';

import { displayDate, sampleData } from './events-utc';
import { Scheduler, TimelineView, DayView, MonthView } from '@progress/kendo-react-scheduler';
import { guid } from '@progress/kendo-react-common';

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

    const handleDataChange = ({ created, updated, deleted }) => {
        setData(old => old
            // Filter the deleted items
            .filter((item) => deleted.find(current => current.id === item.id) === undefined)
            // Find and replace the updated items
            .map((item) => updated.find(current => current.id === item.id) || item)
            // Add the newly created items and assign an `id`.
            .concat(created.map((item) => Object.assign({}, item, { id: guid() }))))
    }

    return (
        <Scheduler
            data={data}
            onDataChange={handleDataChange}
            editable={{
                add: true,
                remove: true,
                drag: true,
                resize: true,
                edit: true
            }}
            defaultDate={displayDate}
        >
            <TimelineView />
            <DayView numberOfDays={2}/>
            <MonthView />
        </Scheduler>
    )
}

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