Vue 3 scheduler editor Template pass dynamic props

[Manish]

Hello

Please help me to solve below issue.
need to pass props to editorTemplate  in ej2-vue-schedule with vue 3.
I have attached example below. Please check that and help me to solve it.

Attachment: Vue3_schedular_edit_template_props_issue_d70e970c.zip

[Ravikumar Venkatesan]

Hi Manish,

Greetings from Syncfusion support.

We have validated your query “Vue 3 scheduler editor Template pass dynamic props” at our end. We have achieved your requirement by rendering the editorTemlate as shown in the below code snippet.

[Schedule.vue]

<template>

  <div>

    {{ onEditorTemplate }}

    <ejs-schedule id="Schedule" :eventSettings="eventSettings" :editorTemplate="onEditorTemplate">

    </ejs-schedule>

  </div>

</template>

 

<script>

import { ScheduleComponent, Day, Week, WorkWeek, Month, DragAndDrop, Resize } from "@syncfusion/ej2-vue-schedule";

import { ViewsDirective, ViewDirective } from "@syncfusion/ej2-vue-schedule";

 

import { createApp } from "vue";

 

const app = createApp();

import editorTemplateVue from "./editorTemplateVue.vue";

 

var editorTemplate = app.component("onEditorTemplate", {

  components: {

    'editor-template': editorTemplateVue

  },

  data() {

    return {

      users: [

        { id: 1, name: "john" },

        { id: 2, name: "doe" },

      ],

    }

  },

  template: '<editor-template :users="users"></editor-template>'

});

 

export default {

  name: "schedule",

  components: {

    "ejs-schedule": ScheduleComponent,

    "e-views": ViewsDirective,

    "e-view": ViewDirective,

  },

  data() {

    return {

      onEditorTemplate: function () {

        return {

          template: editorTemplate

        };

      },

    };

  },

};

</script>

We have achieved the same requirement using the slot template support as shown in the below code snippet. The slot template support was provided for ej2-vue components on release 20.1.47.

[Schedue.vue]

<template>

  <div>

    <ejs-schedule id="Schedule" :eventSettings="eventSettings" :editorTemplate="'editorTemplate'">

      <template v-slot:editorTemplate="{data}">

        <editor-template :users="users" :eventData="data"></editor-template>

      </template>

    </ejs-schedule>

  </div>

</template>

 

<script>

import { ScheduleComponent, Day, Week, WorkWeek, Month, DragAndDrop, Resize } from "@syncfusion/ej2-vue-schedule";

import { ViewsDirective, ViewDirective } from "@syncfusion/ej2-vue-schedule";

import editorTemplateVue from "./editorTemplateVue.vue";

 

export default {

  name: "schedule",

  components: {

    "ejs-schedule": ScheduleComponent,

    "e-views": ViewsDirective,

    "e-view": ViewDirective,

    "editor-template": editorTemplateVue

  },

  data() {

    return {

      users: [

        { id: 1, name: "john" },

        { id: 2, name: "doe" },

      ],

    };

  },

};

</script>

Kindly try the shared solution and let us know if you need any further assistance on this.

Release notes: https://ej2.syncfusion.com/vue/documentation/release-notes/20.1.47/?type=all#common

Slot template: https://ej2.syncfusion.com/vue/documentation/common/template/#slots

Regards,

Ravikumar Venkatesan 

Attachment: ej2vue3scheduleeditortemplate_2b6fc3c4.zip