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

You can use onEventMoving to customize the behavior when moving an event: implement custom rules, adjust the target start and end, and display feedback during the operation.

Declaration

DayPilot.Scheduler.onEventMoving(args)

Parameters

Invalid Moves

args.invalid (boolean, read-only; since version 2026.4.7083) is true when the Scheduler cannot place the primary event or any event in a multi-move at the proposed target. For example, a move that skips non-business time is invalid if the original event contains no business hours or the target has too few available business hours.

An invalid target is shown as a forbidden drop position. Use args.invalid to display an explanation; the Scheduler does not add one automatically. Use args.allowed = false for your own restrictions. Setting it to true cannot permit an invalid drop. args.overlapping separately reports overlap or disabled-cell conflicts.

args.invalid describes the proposed target when your handler starts. If the handler changes the target dates or resource, the Scheduler checks the changed target again.

To provide optional feedback:

onEventMoving: args => {
  if (args.invalid) {
    args.right.enabled = true;
    args.right.html = "This move cannot be completed here.";
  }
}

Notes

Use this event to validate the current target in real time, adjust args.start and args.end, and display inline feedback using args.left and args.right. Set args.allowed = false to prevent dropping at the current location.

The args.multimove array includes the main event as well (args.e). It is stored at args.multimove[0], and changes made to that item are ignored. Each item has the following structure:

  • event (DayPilot.Event) - source object (read-only)

  • start (DayPilot.Date) - new start

  • end (DayPilot.Date) - new end

  • resource (string | number) - new resource (read-only)

  • overlapping (boolean) - overlap status (read-only)

Examples

JavaScript

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

const dp = new DayPilot.Scheduler("dp", {
  onEventMoving: (args) => {
    document.querySelector("#msg").textContent = `${args.start} ${args.end} ${args.resource}`;
  },
  // ...
});
dp.init();

This example displays an inline message using the built-in start/end position indicators that are displayed in the Scheduler grid.

const dp = new DayPilot.Scheduler("dp", {
  onEventMoving: (args) => {
    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;
    }
  },
  // ...
});
dp.init();

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

const dp = new DayPilot.Scheduler("dp", {
  onEventMoving: (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;
    }
  },
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>
config: DayPilot.SchedulerConfig = {
  onEventMoving: (args) => {
    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;
    }
  },
  // ...
};

React

<DayPilotScheduler
  onEventMoving={onEventMoving}
/>
const onEventMoving = (args) => {
  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;
  }
};

Vue

<DayPilotScheduler
  @eventMoving="onEventMoving"
/>
const onEventMoving = (args) => {
  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;
  }
};

See Also

Event Moving [doc.daypilot.org]

Event Moving Customization [doc.daypilot.org]

HTML5 Machine/Production Job Scheduling Tutorial - PHP/MySQL [code.daypilot.org]

DayPilot.Scheduler.onEventMove

DayPilot.Scheduler.eventMovingStartEndEnabled

DayPilot.Scheduler Class

Availability

Availability of this API item in DayPilot editions:

ProductLitePro
DayPilot for JavaScript