DayPilot.Scheduler.onEventMoving

The onEventMoving event is fired in real time whenever the JavaScript Scheduler event shadow is moved to another position during drag & drop event moving.

You can use onEventMoving to customize the behavior when moving an event: to implement custom rules (e.g., forbid selected target locations), adjust the target start/end, and display feedback during the process.

Declaration

DayPilot.Scheduler.onEventMoving(args);

Parameters

• args.allowed - boolean value that determines whether it is possible to drop the event at this location

• args.ctrl - Ctrl key pressed (boolean)

• args.shift - Shift key pressed (boolean)

• args.meta - Meta key pressed (boolean)

• args.alt - Alt key pressed (boolean)

• args.cssClass - CSS class to be added to the shadow

• args.areaData - value of the data property of the active area that was used as drag handle (for an example, see HTML5 Machine/Production Job Scheduling Tutorial - PHP/MySQL)

• args.link - link outline (for an example, see HTML5 Machine/Production Job Scheduling Tutorial - PHP/MySQL)

• args.start - start date/time of the current position (DayPilot.Date object)

• args.end  - end date/time of the current position (DayPilot.Date object)

• args.duration - duration of the event (DayPilot.Duration object)

• args.e - event object (DayPilot.Event object)

• args.external - true if the event comes from an external source

• args.html - HTML of the shadow object (since 8.3.2589)

• args.multimove - an array of all events being moved during multi-moving (and their new positions)

• args.resource - id of the current row (string)

• args.row - an object representing the current row (DayPilot.Row)

• args.position - position index inside a cell when event position mode is enabled

• args.left.html - HTML of the inline start indicator; the default value is the start date/time formatted using the pattern specified using eventMovingStartEndFormat

• args.left.enabled - when set to true, the inline start indicator is displayed; the default value is set by the eventMovingStartEndEnabled property

• args.right.html - HTML of the inline end indicator; the default value is the end date/time formatted using the pattern specified using eventMovingStartEndFormat

• args.right.enabled - when set to true, the inline end indicator is displayed; the default value is set by the eventMovingStartEndEnabled property

Moving multiple events

The args.multimove array items have the following structure:

• args.multimove[].event - DayPilot.Event object (read-only)

• args.multimove[].start (DayPilot.Date) - new start

• args.multimove[].end (DayPilot.Date) - new end

• args.multimove[].resource (string | number) - new resource (read-only)

• args.multimove[].overlapping (boolean) - overlapping status (read-only)

The args.multimove array includes the main event as well (args.e). It’s stored at the first position, as args.multimove[0]. Changes made to this item are ignored.

JavaScript Examples

This example displays a custom message at a custom location outside of the Scheduler component:

dp.onEventMoving = function(args) {
  $("#msg").html(args.start + " " + args.end + " " + args.resource);
};

This example displays an inline message using the built-in start/end position indicators that are displayed in the Scheduler grid (before/after the the target location).

dp.onEventMoving = function(args) {
  // don't allow moving from A to B
  if (args.e.resource() === "A" && args.resource === "B") {
      args.left.enabled = false;
      args.right.enabled = true;
      args.right.html = "You can't move an event from resource A to B";

      args.allowed = false;
  }
};

You can prevent moving Scheduler events outside of the visible range:

dp.onEventMoving = function(args) {

  if (args.end > dp.visibleEnd()) {
      args.left.enabled = true;
      args.left.html = "You can't drag the event out of the visible range";
      args.right.enabled = true;
      args.allowed = false;
  }

  if (args.start < dp.visibleStart()) {
      args.right.enabled = true;
      args.right.html = "You can't drag the event out of the visible range";
      args.left.enabled = true;
      args.allowed = false;
  }
};