Telerik scheduler - call another component for custom edit template

Question

I would like to call a component which contains only the custom edit template (to create a new task or edit) for my scheduler into the property "editable" of my scheduler.

I followed this solution but when I double click on the scheduler the edit window just displays "[Object object]"

The code of scheduler

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

The code of the method editTemplate()

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

The code of the component that contains the custom template

<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>

I think the problem comes from the method editTemplate but I don't understand why.

Anyone can help me ?

Thanks.

Answer 1

Seems you are mixed two options in the official solution. I have selected the second option and solves the problem on my end. Let's check it out.

The code of scheduler

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

The code of the method customEditorTemplate()

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

The code of the component that contains the custom template

<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>