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:

  • addAllows the creation of a new DataItem when the user double-clicks a time or a day slot.
  • removeAllows the deletion of the DataItem which is associated with the clicked event.
  • dragChanges the start and end settings, or the provided resources configuration of the DataItem.
  • resizeChanges the duration of the DataItem.
  • editProvides 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?