javascript scheduler moving multiple events drag drop

Supported since DayPilot Pro 8.0.

It is possible to enable drag and drop moving of all selected events at once.

  • This feature is disabled by default.

  • If event overlap prevention is enabled it will not be possible to drop the events at the new location if any of them conflicts with another event.

By default, multiple events can only be moved on the time (X axis). You can modify this behavior using multiMoveVerticalMode property:

  • "Disabled" (horizontal-only moving, default)

  • "Master" (the master event can be moved horizontally and vertically, other events stay in the original row)

  • "All" (all events can be moved horizontally and vertically)

JavaScript

Enable multimove using .allowMultiMove = true;

It is possible to get a list of all moved events using args.multimove in the following event handlers:

  • onEventMoving

  • onEventMove

  • onEventMoved

The args.multimove property holds an array of all updated events. Item structure:

The master event is accessible using args.e just like during regular event moving.

dp.eventClickHandling = "Select";
dp.allowMultiMove = true;
dp.onEventMoved = function(args) {
  dp.message("Events " + args.multimove.map(function(item) { return item.event.id(); }).join(', ') + " moved.");
};

Demo

Tutorial