DayPilot.Calendar.onEventMoving

The onEventMoving event handler fires in the JavaScript Calendar component while an event is being dragged to a new position. You can use it to customize the moving shadow and enforce business rules before the drop is completed.

Declaration

DayPilot.Calendar.onEventMoving(args)

Parameters

• args.e (DayPilot.Event object) - item being moved [read-only]
• args.start (DayPilot.Date) - current shadow start; since 2024.2.5922 the value can be modified
• args.end (DayPilot.Date) - current shadow end; since 2024.2.5922 the value can be modified
• args.resource (string | number) - current resource id; since 2024.2.5922 the value can be modified
• args.html (string) - shadow HTML
• args.cssClass (string) - shadow CSS class
• args.allowed (boolean) - enables or disables drop at the current position
• args.top.width (number) - width of the top text, null for auto
• args.top.space (number) - distance of the top text from the shadow in pixels
• args.top.html (string) - top HTML
• args.top.enabled (boolean) - enables or disables the top text
• args.bottom.width (number) - width of the bottom text, null for auto
• args.bottom.space (number) - distance of the bottom text from the shadow in pixels
• args.bottom.html (string) - bottom HTML
• args.bottom.enabled (boolean) - enables or disables the bottom text

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onEventMoving: args => {
    args.html = "Moving '" + args.e.text() + "' to " + args.start.toString("MMMM d, yyyy @ h:mm tt");
  },
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  onEventMoving: args => {
    args.html = "Moving '" + args.e.text() + "' to " + args.start.toString("MMMM d, yyyy @ h:mm tt");
  },
  // ...
};

React

<DayPilotCalendar
  onEventMoving={onEventMoving}
  {/* ... */}
/>

const onEventMoving = (args) => {
  args.html = "Moving '" + args.e.text() + "' to " + args.start.toString("MMMM d, yyyy @ h:mm tt");
};

Vue

<DayPilotCalendar
  @eventMoving="onEventMoving"
  <!-- ... -->
/>

const onEventMoving = (args) => {
  args.html = "Moving '" + args.e.text() + "' to " + args.start.toString("MMMM d, yyyy @ h:mm tt");
};

See Also

• Event Moving [doc.daypilot.org]
• DayPilot.Calendar.eventMoveHandling
• DayPilot.Calendar Class