Display live time updates on drag and drop in the cloned element

Question

Hello,I am using the eventTemplate to have a custom implementation of an appointment in the schedule. I am trying to display the live timestamps changes on the drag and resize events in my eventTemplate, but it seems the dragged element is a clone of the appointment and I don't know how to display these modifications in real time in my custom template. Note that when using the default template of syncfusion, the timestamps are changing in the clone elements as well. I want to replicate this behaviour.Thank you!

Vijay Ravi · Answer

Hi
Maxime,Based
on your requirement we prepare the vue sample to Display live time updates on
drag and drop in the cloned element by using event template. We suggest you to
use the drag
event to update the startTime and endTime of the clone element while dragging
as shown in the below highlighted code snippet. Please try our shared sample.
Let us know if you need any further assistance.Sample:
https://stackblitz.com/edit/live-interval-in-drag-iegkpa?file=src%2FApp.vue[app.vue]

<ejs-schedule
  id="Schedule"
  ref="ScheduleObj"
  :drag="dragging" >
    
  dragging(args) {
          let element = document.querySelector('.e-schedule').querySelector('.e-schedule-event-clone');
          let timeElement;
          if(element) {
            timeElement = element.querySelector('.time');
          }
          if(timeElement) {
            timeElement.innerText = '';
            let timeData = {
              StartTime: args.startTime,
              EndTime: args.endTime
            };
            timeElement.innerText = `Time: ${this.getTimeString(timeData)}`;
          }
    
      }

Regards,Vijay

Maxime Lepage · Answer

Alright! Thanks for the example. That fixes my issue.

Vijay Ravi · Answer

HI Maxime,Thanks for the update. We're glad to hear that the provided solution meets your requirements.Regards,Vijay