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

Editable

configuration

If set to true the user would be able to create new scheduler events and modify or delete existing ones.

editable

Boolean|Object

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Breakfast"
    }
  ],
  editable: false
});
</script>

editable.confirmation

Boolean|String

If set to true the scheduler will display a confirmation dialog when the user clicks the "destroy" button.

Can be set to a string which will be used as the confirmation text.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    confirmation: false
  },
  views: [
    {
      type: "day"
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    confirmation: "Are you sure you want to delete this meeting?"
  },
  views: [
    {
      type: "day"
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

editable.create

Boolean

If set to true the user can create new events. Creating is enabled by default.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    create: false
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

editable.destroy

Boolean

If set to true the user can delete events from the view by clicking the "destroy" button. Deleting is enabled by default.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    destroy: false
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

editable.editRecurringMode

String

Recurring events edit mode. The available modes are:

"dialog" (default) - displays a dialog that allows the user to choose whether the current occurrence or the entire series will be edited;
"series" - displays an editor for updating the entire series;
"occurrence" - only the current occurrence will be edited.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    editRecurringMode: "series"
  },
  views: [
    { type: "day" }
  ],
  dataSource: {
    data: [{
     id: 1,
     start: new Date("2013/6/5 8:00"),
     end: new Date("2013/6/5 10:00"),
     title: "my event",
     recurrenceRule: "FREQ=DAILY"
    }],
    schema: {
        model: {
            id: "id",
            fields: {
                id: {type: "number"}
            }
        }
    }
  }
});
</script>

editable.move

Boolean

If set to true the scheduler allows event moving. Dragging the event changes the start and end time.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Breakfast"
    }
  ],
  editable: {
    move: false
  }
});
</script>

editable.resize

Boolean

If set to true the scheduler allows event resizing. Dragging the resize handles changes the start or end time of the event.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Breakfast"
    }
  ],
  editable: {
    resize: false
  }
});
</script>

editable.template

String|Function

The template which renders the editor.

The template should contain elements whose name HTML attributes are set as the editable fields. This is how the Scheduler will know which field to update. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.

Use the role data attribute to initialize Kendo UI widgets in the template. Check data attribute initialization for more info.

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input data-bind="value: title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" data-bind="value: end" /></label>
   </p>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

editable.update

Boolean

If set to true the user can update events. Updating is enabled by default.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    update: false
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

editable.window

Object

Configures the Kendo UI Dialog instance that contains the desktop event editor. The configuration is optional.

The window property name is retained for backward compatibility. The supplied options are passed to a Dialog instance.

For more information, refer to the Dialog configuration API.

<div id="scheduler"></div>
<script>

function myOpenEventHandler(e) {
    // ...
}

$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    window: {
        title: "My Custom Title",
        animation: false,
        open: myOpenEventHandler
    }
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>