External drag and drop to existing event

Asked by Robin
4 years ago.

Hi,

I am dragging items external to the scheduler.

The first item creates a new event in the scheduler.

If I drag a second item and drop it on top of the previous item (on the same resource), I combine the data from the new item to the existing event.

To prevent the second item being rendered/added to the scheduler as a new event, when I detect the overlap, I use:

onEventMove: function(args) {
console.log("onEventMove", args);
args.preventDefault();
....
},

However, when I move this 'combined' event within the scheduler, forward/backwards in time or from one resource to another resource, I get the following error:

build.umd.js?b959:2427 Uncaught TypeError: Cannot read property 'removeChild' of null
at DayPilot.Scheduler.ub (daypilot-vue.min.js?0d32:24)
at DayPilot.Scheduler.Mi (daypilot-vue.min.js?0d32:25)

From this point onwards, the scheduler becomes unresponsive and I cannot move any events arround.

This only happens when I attempt to combine events. I can create many 'regular/non-combined' events and move them around afterwards without issue.

Does anybody have an idea of what might be causing this?

Or perhaps a bettwer way of combining events / preventing and overlapping event being added to the calendar as an event?

how-to javascript

Comment posted by Dan Letecky [DayPilot]
4 years ago.

You can use this approach instead but it would only allow dragging a different type of objects because it uses a different drag and drop API:
https://code.daypilot.org/12371/javascript-scheduler-events-as-drag-and-drop-target

However, simply calling args.preventDefault() in onEventMove doesn't seem to cause the problem. It might be the way you combine the events. Can you post the complete code?

Comment posted by Robin
4 years ago.

Hi Dan,

I'm still investigating to see if I can give more information. In the meantime, the following is what throws the error:

this.ub = function() {
if (f.todo && f.todo.del) {
var e = f.todo.del;
e.parentNode.removeChild(e),
f.todo.del = null
}
}

Comment posted by Dan Letecky [DayPilot]
4 years ago.

Hi Robin,

This code deletes the source item (from the external list) after drop.

It looks like you are deleting the source item yourself somewhere. In that case, you can add keepElement:true to the makeDraggable() call to prevent the Scheduler from trying to delete it:
https://api.daypilot.org/daypilot-scheduler-makedraggable/

Comment posted by Robin
4 years ago.

Hi Dan,

Brilliant, I came to the same conclusion. Was looking for a removeDraggable() function.

I'm not sure how I can apply keepElement:true however as some elements I'll want DayPilot to remove.

I've just found the following article however which is likely to be a better match ...

https://code.daypilot.org/12371/javascript-scheduler-events-as-drag-and-drop-target

Thanks for your continued help and I'll keep you posted.

Answer posted by Robin
4 years ago.

Hi Dan,

The simpler solution was to follow your idea:

keepElement: true

DayPilot makes no attempt to remove elements during any of it's callbacks then.

I then manage the list of external draggable items myself entirely. Thanks for the suggestion. Much appreciated.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

Hi Robin,

Great, thanks for the update!

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

External drag and drop to existing event

Products

Learn

Get Support

DayPilot Pro