DragDrop updating in eventSettingsTemplate

[Daniel Duc Trinh]

Hi,

I would like to update the Start and End time of an appointment which i am dragging it around. However, i am not able to make it works. even i am using onDrag() function.

public onDrag(args: any): void {

const draggingStartTime = args['startTime'];

const draggingEndTime = args['endTime'];

const eventElement = args.element;

const timeElement = eventElement.querySelector('.time strong');

timeElement.textContent = `${this.formatTime(

draggingStartTime

)} - ${this.formatTime(draggingEndTime)}`;

if (timeElement) {

timeElement.innerHTML = timeElement.textContent;

}

}

this function is change the time on the appointment that i want to drag. but its not change its reflection while i am actually dragging around. 

any advise would highly appreciate. 

Thank you

[Swathi Ravi]

Hi Daniel,

The issue is caused by updating the appointment element instead of the clone element, resulting in the time not being updated. You can resolve this by updating the time within the clone element, as demonstrated in the shared snippet below.

[app.component.ts]

export class AppComponent {

  private instance: Internationalization = new Internationalization();

  

  public getTimeString(value: Date): string {

    return this.instance.formatDate(value, { skeleton: 'hm' });

  }

  public onDrag(args: any): void {

    const draggingStartTime = args['startTime'];

    const draggingEndTime = args['endTime'];

    const eventElement = document.querySelector('.e-schedule-event-clone.e-drag-clone');

    const timeElement = eventElement.querySelector('.time');

    timeElement.textContent = `${this.getTimeString(

      draggingStartTime

    )} - ${this.getTimeString(draggingEndTime)}`;

    if (timeElement) {

      timeElement.innerHTML = timeElement.textContent;

    }

  }

}

Sample:  https://stackblitz.com/edit/schedule-update-time-on-dragging-event-4dszoh?file=src%2Fapp.component.ts

Output:

Regards,

Swathi Ravi

[Daniel Duc Trinh]

Thank you

[Swathi Ravi]

Daniel,

You are welcome. Get back to us if you need any further assistance.

[Daniel Duc Trinh]

in my html file <ejs-schedule>. i have this setup

```

(popupOpen)="onSyncfusionPopupOpen($event)"

[allowDragAndDrop]="true"

                      (dragStart)="onDragStart($event)"

                      (dragStop)="onDragStop($event)"

                      (drag)="onDrag($event)"

```

so i have a small issue when i switch my app to mobile mode (touch screen). then onSyncfusionPopupOpen() and DragDrop feature is not working well together.

With regular mode (Desktop):

1. One click on appointment => onSyncfusionPopupOpen()
2. Hold and move appointment => DragDrop 

It works perfect

Now i switch to mobile mode (touch screen) in google chrome developer

1. One touch on  appointment => onSyncfusionPopupOpen() => Great
2. Hold and move appointment => it keeps onSyncfusionPopupOpen() and not allow me to Drag and Drop

Any assistance would be great. cause my app will be in touch screen mode mostly

Thanks

[Daniel Duc Trinh]

in touch screen mobile mode, i wish i can have one touch to open onSyncfusionPopupOpen() and if i touch and hold for about 2 seconds then it will be able to drag.

[Swathi Ravi]

Daniel,

We checked the issue you reported and found that drag and drop functionality for appointments works in mobile view. When you click on an appointment and tap + hold, the popupOpen event will be triggered. As you drag the appointment, the drag events will be triggered as well. Please refer to the video demo we shared for further clarification.

 Sample: schedule-update-time-on-dragging-event (forked) - StackBlitz

Attachment: scheduledraganddropinmobileview_6523ec2f.zip

[Daniel Duc Trinh]

hi,

Thanks for responding.

I dont want the popupOpen triggers while i am dragging. so basically , if one touch => popupOpen, if touch and hold => dragging trigger (no popupOpen)

Thanks again

Daniel,

[Daniel Duc Trinh]

i was trying the example you gave me 

https://schedule-update-time-on-dragging-event-45jwrb.stackblitz.io/

and open in google chrome developer mode and change to iphone 14 plus ( mobile view for example). I touch and hold the appointment, sometime its working as i expected ( dragging ), but most of the time its trigger the mouse's right click action. 

Not sure what is missing 

[Daniel Duc Trinh]

here is my onSyncfusionPopupOpen()

onSyncfusionPopupOpen(event: any) {

if (event.type === 'QuickInfo' || event.type === 'ViewEventInfo') {

event.cancel = true;

const appointment = event.data?.['Info'];

// open appointment drawer

this.onOpenAppointmentDetail(

appointment.appointment_id,

appointment.appointment_status

);

}

}

[Daniel Duc Trinh]

My application will be running in a touch screen AIO computer. It works perfectly using the mouse. but when my client start using their finger to drag appointments around. it start acting weird. i found out that without onSyncfusionPopupOpen() its working fine. but i need onSyncfusionPopupOpen() to show the detail of an appoit

[Swathi Ravi]

Daniel,

We need additional details to proceed with your query further. Please provide the following information:

1. A video showing the issue you encountered while dragging and dropping appointments in the Scheduler.

2. The browser version and zoom level you are using.

3. Your screen resolution.

4. Did you check the issue on an emulator or a real device?

This information will be very helpful in assisting you better and providing a more effective solution.