Vue3 Composition API - editorTemplate

[Maurice Mullens]

I am trying to override the editorTemplate but when i double click i get the error: 

Uncaught TypeError: Cannot read properties of undefined (reading 'openEditor')

This is my code:

<template>

  <div class="flex flex-col pb-20 w-full h-full bg-gray-200">

    <h3 class="p-4">Shift planning</h3>

    <ejs-schedule height='800px' width='100%'

    :selectedDate='selectedDate'

    :showQuickInfo='false'

    :editorTemplate='editorTemplate'

    :eventSettings='eventSettings'

    :onPopupOpen='onPopupOpen'>

      <e-views>

        <e-view option='Day'></e-view>

        <e-view option='Week'></e-view>

        <e-view option='WorkWeek'></e-view>

        <e-view option='Month'></e-view>

        <e-view option='Agenda'></e-view>

      </e-views>

      <e-resources>

        <e-resource field="OwnerId" title="Owner" name="Owners" :dataSource="ownerDataSource" textField="OwnerText"

          idField="Id" colorField="OwnerColor">

        </e-resource>

      </e-resources>

    </ejs-schedule>

  </div>

</template>

<script setup>

import { provide } from "vue";

import EditorTemplateVue from './EditorTemplate.vue';

import {

  ScheduleComponent as EjsSchedule, ViewsDirective as EViews, ViewDirective as EView,

  ResourcesDirective as EResources, ResourceDirective as EResource,

  Day, Week, WorkWeek, Month, Agenda,

} from "@syncfusion/ej2-vue-schedule";

import { useAuthStore } from '@/stores';

const editorTemplate = () => ({ template: EditorTemplateVue });

const { me } = useAuthStore();

const onPopupOpen = (args) => {

  if (args.type === 'Editor') {

    let statusElement = args.element.querySelector('#EventType');

    if (!statusElement.classList.contains('e-dropdownlist')) {

       let dropDownListObject = new DropDownList({

         placeholder: 'Choose status',

         value: statusElement.value,

         dataSource: ['New', 'Requested', 'Confirmed']

       });

       dropDownListObject.appendTo(statusElement);

       statusElement.setAttribute('name', 'EventType');

     }

     let startElement = args.element.querySelector('#StartTime');

     if (!startElement.classList.contains('e-datetimepicker')) {

       new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);

     }

     let endElement = args.element.querySelector('#EndTime');

     if (!endElement.classList.contains('e-datetimepicker')) {

       new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);

     }

  }

};

const selectedDate = new Date(2024, 0, 10);

const eventSettings = {

  dataSource: [

    {

      Id: 1,

      Subject: 'Available',

      EventType: 'Confirmed',

      StartTime: new Date(2024, 0, 10, 9, 0),

      EndTime: new Date(2024, 0, 10, 17, 0),

      OwnerId: me.employee_nr

    },

    {

      Id: 2,

      Subject: 'Available',

      EventType: 'Confirmed',

      StartTime: new Date(2024, 0, 11, 9, 30),

      EndTime: new Date(2024, 0, 11, 17, 0),

      OwnerId: me.employee_nr

    },

    {

      Id: 3,

      Subject: 'Available',

      EventType: 'Requested',

      StartTime: new Date(2024, 0, 12, 9, 0),

      EndTime: new Date(2024, 0, 12, 16, 30),

      OwnerId: me.employee_nr

    }

  ]

};

const ownerDataSource = [

  { OwnerText: me.first_name + " " + me.last_name, Id: me.employee_nr, OwnerColor: "#ffaa00" },

];

provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>

<style>

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css';

</style>

The EditorTemplate.vue is like this:

<template>

    <table class="custom-event-editor" width="100%" cellpadding="5">

        <tbody>

            <tr>

                <td class="e-textlabel">Summary</td>

                <td colspan="4"><input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" /></td>

            </tr>

        <tr>

            <td class="e-textlabel">Status</td>

            <td colspan="4"><input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" /></td>

        </tr>

        <tr>

            <td class="e-textlabel">From</td>

            <td colspan="4"><input id="StartTime" class="e-field" type="text" name="StartTime" /></td>

        </tr>

        <tr>

            <td class="e-textlabel">To</td>

            <td colspan="4"><input id="EndTime" class="e-field" type="text" name="EndTime" /></td>

        </tr>

        <tr>

            <td class="e-textlabel">Reason</td>

            <td colspan="4">

                <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>

            </td>

        </tr>

    </tbody>

</table></template>

How can i make this work?

Thank you!

[Ashokkumar Karuppasamy]

Hi Maurice Mullens,

If the external modules template has not been initialized properly, issues may arise. Please use the provided code below, and it should resolve the problem.

[App.vue]

<script setup>

import { provide , createApp } from "vue";

import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";

import { TextBoxComponent as EjsTextbox } from "@syncfusion/ej2-vue-inputs";

import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

import EditorTemplateVue from "./EditorTemplate.vue";

import {

  ScheduleComponent as EjsSchedule,

  ViewsDirective as EViews,

  ViewDirective as EView,

  ResourcesDirective as EResources,

  ResourceDirective as EResource,

  Day,

  Week,

  WorkWeek,

  Month,

  Agenda,

  Resize,

  DragAndDrop,

} from "@syncfusion/ej2-vue-schedule";

 

const app = createApp({});

 

const editorTemplate = () => ({

  template: app.component('editorTemplate', EditorTemplateVue)});

 

</script>

[EditorTemplate.vue]

<template>

  <table class="custom-event-editor" width="100%" cellpadding="5">

  </table>

</template>

 

<script setup>

 

import { provide } from "vue";

 

</script>

 

The attached sample below demonstrate the solution. Please give it a try and let us know if you need any further assistance.

Regards,
Ashok

Attachment: VueCompositionEditorTemplate_5e849cb8.zip