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

Modify the Editor Templates of the Scheduler upon New Events


Product Progress® Kendo UI® Scheduler for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I show or hide different parts of the editor template based on the event state?


The following example demonstrates how to achieve the desired scenario. As a result, if the event is not new, the template hides the Title field and displays a message.

<div id="example">
      <div id="scheduler"></div>
    <script id="customEditorTemplate" type="text/x-kendo-template">
<!-- notice how the Title is hidden if the event is new -->
<div data-bind="visible: isNew">
  <div class="k-edit-label"><label for="title">Title</label></div>
  <div data-container-for="title" class="k-edit-field">
      <input type="text" data-role="textbox" name="title" required="required" data-bind="value:title">
<div data-bind="invisible: isNew">
    <h4>The 'Title' field is hidden, because event is not new</h4>
<div class="k-edit-label">
    <label for="start">Start</label>
<div data-container-for="start" class="k-edit-field">
    <input type="text"
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
    <span data-bind="text: startTimezone"></span>
    <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
<div class="k-edit-label"><label for="end">End</label></div>
<div data-container-for="end" class="k-edit-field">
    <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <span data-bind="text: endTimezone"></span>
    <span data-bind="text: startTimezone, invisible: endTimezone"></span>
    <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
<div class="k-edit-label"><label for="isAllDay">All day event</label></div>
<div data-container-for="isAllDay" class="k-edit-field">
    <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
<div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>
<div data-container-for="recurrenceRule" class="k-edit-field">
    <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
<div class="k-edit-label"><label for="description">Description</label></div>
<div data-container-for="description" class="k-edit-field">
    <textarea name="description" data-role="textarea" data-bind="value:description"></textarea>
<div class="k-edit-label"><label for="ownerId">Owner</label></div>
<div data-container-for="ownerId" class="k-edit-field">
    <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                    data-value-field="value" data-text-field="text">
      <option value="1">Alex</option>
      <option value="2">Bob</option>
      <option value="3">Charlie</option>
      $(function() {
          date: new Date("2022/6/13"),
          startTime: new Date("2022/6/13 07:00 AM"),
          height: 600,
          views: [
            { type: "workWeek", selected: true },
          editable: {
            template: $("#customEditorTemplate").html(),
          eventTemplate: $("#event-template").html(),
          timezone: "Etc/UTC",
          dataSource: {
            batch: true,
            transport: {
              read: {
                url: "",
                dataType: "jsonp"
              update: {
                url: "",
                dataType: "jsonp"
              create: {
                url: "",
                dataType: "jsonp"
              destroy: {
                url: "",
                dataType: "jsonp"
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: kendo.stringify(options.models)};
            schema: {
              model: {
                id: "taskId",
                fields: {
                  taskId: { from: "TaskID", type: "number" },
                  title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                  start: { type: "date", from: "Start" },
                  end: { type: "date", from: "End" },
                  startTimezone: { from: "StartTimezone" },
                  endTimezone: { from: "EndTimezone" },
                  description: { from: "Description" },
                  recurrenceId: { from: "RecurrenceID" },
                  recurrenceRule: { from: "RecurrenceRule" },
                  recurrenceException: { from: "RecurrenceException" },
                  ownerId: { from: "OwnerID", defaultValue: 1 },
                  isAllDay: { type: "boolean", from: "IsAllDay" }
          resources: [
              field: "ownerId",
              title: "Owner",
              dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }

See Also

In this article