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: true,
            remove: true,
            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.

Customization

The Scheduler provides configurations we can use for the customization of the Edit Form of the component. For more details about each customization option see the following links:

• Native Scheduler - Custom Editing Form
• Native Scheduler - Set Edit Form initial values
• Native Scheduler - Custom validation messages

Suggested Links

• Data Binding in the Kendo UI for Vue Native Scheduler
• Grouping in the Kendo UI for Vue Native Scheduler
• Handling the Native Scheduler Resources
• API Reference of the SchedulerDataChangeEvent