如何编辑Kendo Scheduler弹窗模板并自定义结束时间下拉框

我来帮你搞定Kendo Scheduler遇到的这两个问题——自定义编辑器字段无法编辑，还有把结束时间转成下拉列表的需求，咱们一步步拆解解决：

你说尝试了Telerik的脚本但只能创建新弹窗、没法编辑已有内容，核心原因大概率是自定义模板没和Scheduler的事件数据做好双向绑定，或者“Edit as New”按钮的逻辑有问题。

解决方案： #

1. 确保自定义模板用data-bind绑定字段
   你的代码里用了editable: { template: $("#editor").html() }，但没给出#editor的内容。要让字段能编辑，模板里的元素必须通过data-bind属性关联到Scheduler事件的对应字段（比如title、start、end），示例模板如下：

   <script id="editor" type="text/x-kendo-template">
     <div class="k-edit-label">
       <label for="title">Title</label>
     </div>
     <div class="k-edit-field">
       <input type="text" class="k-input k-textbox" data-bind="value: title" name="title" required="required" />
     </div>
     <!-- 其他字段（比如start）同理，用对应的Kendo组件+data-bind -->
   </script>
   

2. 修复“Edit as New”按钮的逻辑
   你之前的代码是创建空白新事件，而且可能因为弹窗动态生成导致事件绑定失效。修改成复制当前事件数据的方式，同时确保按钮只添加一次：

   edit: function(e) {
     if (!e.event.isNew()) {
       // 避免重复添加按钮
       if (!$("#editasnew").length) {
         $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
         // 绑定点击事件，复制当前事件创建新条目
         $("#editasnew").on("click", function(){
           var scheduler = $("#scheduler").data("kendoScheduler");
           scheduler.cancelEvent();
           // 复制原有事件数据，移除id让Scheduler识别为新事件
           var newEventData = $.extend({}, e.event.toJSON());
           delete newEventData.id;
           newEventData.title = "Copy of " + newEventData.title; // 可选：给新事件加标识
           setTimeout(function(){
             scheduler.addEvent(newEventData);
           }, 300);
         });
       }
     }
   }
   

要把end字段从默认的日期选择器改成下拉列表，需要在自定义模板里替换对应的组件，同时确保下拉选项的value能被Kendo解析为Date类型。

解决方案： #

在#editor模板里添加下拉列表，用Kendo的DropDownList组件（更贴合UI风格），绑定到end字段：

<script id="editor" type="text/x-kendo-template">
  <!-- 其他字段（title、start）的模板代码... -->
  <div class="k-edit-label">
    <label for="end">End Time</label>
  </div>
  <div class="k-edit-field">
    <input id="endDropdown" data-bind="value: end" data-role="dropdownlist" 
           data-value-field="value" data-text-field="text" 
           data-source='[{"text":"09:00 AM", "value":"2013-06-06T09:00:00"}, {"text":"10:00 AM", "value":"2013-06-06T10:00:00"}, {"text":"11:00 AM", "value":"2013-06-06T11:00:00"}]' />
  </div>
</script>

这里的关键是：下拉选项的value要用ISO格式的日期字符串（比如2013-06-06T09:00:00），这样Kendo能自动把它解析为Date类型，正确回写到事件数据里。

把上面的修改整合到你的代码里，最终版本如下：

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

<script id="editor" type="text/x-kendo-template">
  <div class="k-edit-label">
    <label for="title">Title</label>
  </div>
  <div class="k-edit-field">
    <input type="text" class="k-input k-textbox" data-bind="value: title" name="title" required="required" />
  </div>

  <div class="k-edit-label">
    <label for="start">Start Time</label>
  </div>
  <div class="k-edit-field">
    <input type="text" data-role="datetimepicker" data-bind="value: start" name="start" required="required" />
  </div>

  <div class="k-edit-label">
    <label for="end">End Time</label>
  </div>
  <div class="k-edit-field">
    <input id="endDropdown" data-bind="value: end" data-role="dropdownlist" 
           data-value-field="value" data-text-field="text" 
           data-source='[{"text":"09:00 AM", "value":"2013-06-06T09:00:00"}, {"text":"10:00 AM", "value":"2013-06-06T10:00:00"}, {"text":"11:00 AM", "value":"2013-06-06T11:00:00"}]' />
  </div>
</script>

<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  edit: function(e) {
    if (!e.event.isNew()) {
      if (!$("#editasnew").length) {
        $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
        $("#editasnew").on("click", function(){
          var scheduler = $("#scheduler").data("kendoScheduler");
          scheduler.cancelEvent();
          var newEventData = $.extend({}, e.event.toJSON());
          delete newEventData.id;
          newEventData.title = "Copy of " + newEventData.title;
          setTimeout(function(){
            scheduler.addEvent(newEventData);
          }, 300);
        });
      }
    }
  },
  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>

内容的提问来源于stack exchange，提问作者Dichado