Text Boxes in Scheduler Event Dialog Not Working

[Brian]

I have added the Scheduler control to my page and I'm able to show the calendar. When I click on a day, it will allow me to enter a new event using the simple dialog. But when I double-click a day or if I hit the "More Details" button to bring up the full dialog with date/time picker and repeat options, the text boxes are not enabled. I'm not able to click in the Title, Location, or Description boxes to enter any data. I've tried installed the ej2-vue-inputs package, but that hasn't helped. Any ideas?

Thanks!

Brian

[Brian]

I'm using Bootstrap-Vue along with the SyncFusion controls.  I've figured out that if I put the schedule component inside of a modal dialog (<b-modal>), the edit event dialog box does not work right.  However, if I just keep it on the main page, it works.

However, when I click a date on the right side of the calendar, it shifts the entire calendar off the left side of the screen.  When I'm click "ok" when done editing the event, it does not shift back and now the calendar is not displayed until I refresh the screen.

Thanks,

Brian

[Ravikumar Venkatesan]

Hi Brian, 

Greetings from Syncfusion support. 

Text Boxes in Scheduler Event Dialog Not Working 

We have validated your above query at our end. Due to the <b-modal> styles, the input elements inside the Schedule editor window not working. We have resolved this problem by setting up the editor window target element as the parent element of the Schedule as shown below in the created event of the Schedule. For the same, we have prepared a sample that can be available from the below link. 

[App.vue] 

<template> 

  <div class="hello"> 

    <b-button id="modal-btn" @click="modalShow = !modalShow">Show Schedule</b-button> 

 

    <b-modal v-model="modalShow" size="xl"> 

      <ejs-schedule id="Schedule" ref="scheduleObj" :created="onCreated"></ejs-schedule> 

    </b-modal> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

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

Vue.use(SchedulePlugin); 

 

export default { 

  name: "HelloWorld", 

  methods: { 

    onCreated: function (args) { 

      if (this.$refs.scheduleObj) { 

        var dlg = document.querySelector(".e-schedule-dialog").ej2_instances[0]; 

        var modalBody = document.querySelector(".modal-body"); 

        // Changing the Scheudle editor target 

        dlg.target = modalBody; 

      } 

    }, 

  }, 

}; 

</script> 

When I click a date on the right side of the calendar, it shifts the entire calendar off the left side of the screen. 

We have validated your above query at our end. But, we are unable to reproduce the problem at our end and it works as expected. Kindly check the below-shared sample and if you still facing the same problem share the below details to serve you better. 

• Reproduce the problem in the below-shared sample or
• Share a sample that illustrates the problem which would help us to proceed further.

Sample: https://codesandbox.io/s/ej2-vue-schedule-inside-the-b-modal-sample-forked-tb6oh?file=/src/components/HelloWorld.vue 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan