How to make a deep-copy of a draggable event onto the scheduler

Asked by Christian
7 years ago.

Hi,

We have developed a scheduler app using DayPilot Pro and have some draggable events external to the scheduler that we drag on and manipulate. We have built it using Angular and are using the draggable directive from the API to facilitate this. However it seems that the event that is created in the scheduler has a data object that is a shallow copy of the options set in the DayPilot makeDraggable function. So when we modify the event.tags object, it persists changes back to the event.tags object on the draggable element causing a multitude of issues.

Could you please let us know how to change this behaviour to create a true copy of the data on event create?

Thanks

how-to javascript

Answer posted by Dan Letecky [DayPilot]
7 years ago.

Hi Christian,

There are two options:

1. You can cancel the default action in onEventMove and create and add the event object manually using a deep copy of the data object:

dp.onEventMove = function(args) {
  if (args.external) {
    var cloned = JSON.parse(JSON.stringify(args.e.data));
    dp.events.add(new DayPilot.Event(cloned));
    args.preventDefault();
  }
};

2. Or you can just make a copy of the tags object:

dp.onEventMove = function(args) {
  if (args.external) {
    args.e.data.tags = JSON.parse(JSON.stringify(args.e.data.tags));
  }
};

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.