Telerik scheduler -为自定义编辑模板调用另一个组件

Question

我想调用一个只包含我的调度器的自定义编辑模板(创建新任务或编辑)的组件到我的调度器的"editable“属性中。

我遵循了this solution，但当我双击调度程序时，编辑窗口只显示"Object object“

调度器的代码

<kendo-scheduler id="scheduler"
  :data-source="localDataSource"
  :event-template="eventTemplate"
  :editable="{template:editTemplate}" //here
>

方法editTemplate()的代码

methods: {
 editTemplate: function(){
   return {
     template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
   } 
 }
}

包含自定义模板的组件的代码

<template>
  <div class="k-edit-form-container">
    <p> Titre <input type="text" /> </p>
    <p>
      <span >Start <input data-role="datetimepicker" name="start" /> </span>
      <span >End <input data-role="datetimepicker" name="end" /> </span>
    </p>
  </div>
</template>

<script>
  export default {
    name:"CustomEditTemplate",
  }
</script>

我认为问题出在editTemplate方法上，但我不明白为什么。

有人能帮我吗？

谢谢。

Answer 1

看起来你在official solution中混合了两个选项。我选择了第二个选项，并在我这一端解决了问题。让我们来看看吧。

调度器的代码

<kendo-scheduler id="scheduler"
  :data-source="localDataSource"
  :event-template="eventTemplate"
  :editable-template="customEditorTemplate"
>

方法customEditorTemplate()的代码

methods: {
  customEditorTemplate: function(e) {
      var template = window.kendo.template(window.kendo.jQuery('#customEditorTemplate').html());
      return template(e);
  }
}

包含自定义模板的组件的代码

<template>
 <script id="customEditorTemplate" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <p> Titre <input type="text" /> </p>
    <p>
      <span >Start <input data-role="datetimepicker" name="start" /> </span>
      <span >End <input data-role="datetimepicker" name="end" /> </span>
    </p>
  </div>
 </script>
</template>