DayPilot.Scheduler.onEventMoving

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

• args.allowed (boolean) - determines whether the event can be dropped at the current location

• args.ctrl (boolean) - Ctrl key pressed

• args.shift (boolean) - Shift key pressed

• args.meta (boolean) - Meta key pressed

• args.alt (boolean) - Alt key pressed

• args.cssClass (string) - CSS class added to the shadow

• args.areaData - value of the data property of the active area used as the drag handle; see HTML5 Machine/Production Job Scheduling Tutorial - PHP/MySQL

• args.link - link outline definition; see HTML5 Machine/Production Job Scheduling Tutorial - PHP/MySQL

• args.start (DayPilot.Date) - current target start

• args.end (DayPilot.Date) - current target end

• args.duration (DayPilot.Duration) - event duration

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

• args.external (boolean) - true when the event comes from an external source

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

• args.multimove - array of all events being moved during multi-moving together with their new positions

• args.resource (string | number) - ID of the current row

• args.row (DayPilot.Row) - current row object

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

• args.left.html (string) - HTML of the inline start indicator; the default value uses DayPilot.Scheduler.eventMovingStartEndFormat

• args.left.enabled (boolean) - displays the inline start indicator; the default value is set by DayPilot.Scheduler.eventMovingStartEndEnabled

• args.right.html (string) - HTML of the inline end indicator; the default value uses DayPilot.Scheduler.eventMovingStartEndFormat

• args.right.enabled (boolean) - displays the inline end indicator; the default value is set by DayPilot.Scheduler.eventMovingStartEndEnabled

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