New to Kendo UI for Vue? Start a free 30-day trial


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.
        editable: {
            add: true,
            remove: true,
            drag: true,
            resize: true,
            edit: true


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.

View Source
Change Theme:


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:

In this article

Not finding the help you need?