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 implement custom rules (e.g. forbid selected target locations), adjust the target start/end, and to display feedback during moving.

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 - data from 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.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

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;
  }
};