Bi-Scheduler Drag and Drop React

Question

Hi,We have requirement to drag and drop appointments between two schedulers. A user should be able to drag a appoinment from jan 2020 from the first scheduler to jun 2020 in the second. Can this be achieved using react?Regards

Nevitha Ravi · Accepted Answer

Hi Subramonian, 

Thanks for your update. 

We have modified the sample to render the month view in both the schedule and added drag and drop between two schedulers by adding eventDragArea and dragStop event to both the scheduler. Please refer to the following sample and let us know if this meets your requirement. 
https://stackblitz.com/edit/react-drag-and-drop-between-two-schedulers-xegmwh?file=index.js 

Regards, 
Nevitha

Praveenkumar Narasimhanaidu · Answer

Hi Subramonian, 

Greetings from Syncfusion support..! 

We have validated your requirement “Drag and Drop between two schedulers” at our end and prepared a sample for your reference using eventDragArea which can be viewed from the following link. 
Sample: https://stackblitz.com/edit/react-drag-and-drop-between-two-schedulers?file=index.js 
Index.js 




onDragStop(args) { 
    var schedule2 = document.getElementById('schedule2'); 
    if (schedule2) { 
      var cellData = this.scheduleObj2.getCellDetails(args.target); 
 
      var eventData = { 
        Id: this.scheduleObj2.getEventMaxID() + 1, 
        Subject: args.data.Subject, 
        StartTime: cellData.startTime, 
        EndTime: cellData.endTime 
      }; 
      this.scheduleObj2.addEvent(eventData); //to add appointment to second scheduler 
      this.scheduleObj1.deleteEvent(args.data.Id); //to delete it from first scheduler 
    } 
    args.cancel = true; 
  } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Praveenkumar

R I Subramonian · Answer

Hi Praveen,

Thanks a lot for preparing the sample application. But for my requirement I will be using month view. There seems to be an issue when using month view. I am unable to drag the appointment outside the first scheduler. One more thing is that the drag and drop should be possible from the first to second scheduler and vice versa. So is there a way of knowing if we are moving an appointment from from the first scheduler to the second or the from the second scheduler to the first, since we be maintaining separate data source for the two schedulers. Is this something that can be resolved?

Regards,

Subramonian Inian

R I Subramonian · Answer

Hi,

Thank you for the update. Can you please confirm the below behaviors as well.

1) In month view it s not possible to drag the appointment outside of the scheduler. Can this be resolved?

2) Is it possible to identify the from and to entities during drag and drop. That is if I'm dragging from the first scheduler to second I should be able to identify the same via code.

Can you please confirm on the above scenarios.

Regards,

Subramonian

Nevitha Ravi · Answer

Hi Subramonian, 

Thanks for your update. 

Q1: Our previously shared sample is in month view in which drag and drop is working. 
Q2: In the dragStop event you can find where the appointment to be dropped and from which it is dropped. We have modified the sample to use same dragStop event handler for both the scheduler. Using target you can find the dropped scheduler and with the help of element you can check from which schedule it is dropped. 
https://stackblitz.com/edit/react-drag-and-drop-between-two-schedulers-djivnt?file=index.js 

  onDragStop(args) { 
    if (schedule2) { 
      var cellData = args.target 
        .closest('.e-schedule') 
        .ej2_instances[0].getCellDetails(args.target); 
      var eventData = { 
        Id: this.scheduleObj2.getEventMaxID() + 1, 
        Subject: args.data.Subject, 
        StartTime: cellData.startTime, 
        EndTime: cellData.endTime, 
        IsAllDay: cellData.isAllDay 
      }; 
      args.target.closest('.e-schedule').ej2_instances[0].addEvent(eventData); //To find the dropped scheduler and add event to it 
      args.element 
        .closest('.e-schedule') 
        .ej2_instances[0].deleteEvent(args.data.Id); 
    } //to find the dragged scheduler and delete event from it. 
    args.cancel = true; 
  } 


Please try the sample, if you face any issue please share the image or video reference of the problem to help you resolve the issue. 

Regards, 
Nevitha

R I Subramonian · Answer

Hi Nivetha,Thanks for the update.Can you please confirm the below behavior.1) In month view it s not possible to drag the appointment outside of the scheduler, But in other views its possile.I have an attached a video for this.Regards,SubramonianAttachment: SyncFusion_c431612d.zip

Nevitha Ravi · Answer

Hi Subramonian, 

Thanks for your update. 

We could replicate the issue ‘clone appointments are not moved out of scheduler in month view’ at our end and confirm this as defect. We have logged a bug report which can be tracked through the following link. 
https://www.syncfusion.com/feedback/25820/clone-appointment-not-moved-out-of-schedule-in-month-view 

The fix for the issue will be included in our Volume 2 main release scheduled on end of June 2021. We would appreciate your patience until then. 

Regards, 
Nevitha

Nevitha Ravi · Answer

Hi Subramonian, 

Thanks for being patience. 

We are glad to announce that our weekly patch release v19.1.67 is rolled out successfully. The reported defect with external drag between two schedulers in Month view has been resolved in this release. 
So, we suggest you upgrade our Syncfusion package to the latest version to avail of this fix. 

https://ej2.syncfusion.com/react/documentation/release-notes/19.1.67/?type=all#schedulehttps://www.syncfusion.com/feedback/25820/clone-appointment-not-moved-out-of-schedule-in-month-view  
Kindly check the reported defect in the latest version and get back to us if you need any further assistance. 

Regards, 
Nevitha