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.

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

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

Suggested Links

• Data Binding in the KendoReact Scheduler
• Grouping in the KendoReact Scheduler
• Handling the KendoReact Scheduler Resources
• API Reference of the KendoReact SchedulerDataChangeEvent
• KendoReact Scheduler