DayPilot.Calendar.onEventMove

The onEventMove event handler fires when drag and drop event moving in the JavaScript Calendar is completed, before the default action is performed.

Declaration

DayPilot.Calendar.onEventMove(args)

Parameters

• args.e (DayPilot.Event) - calendar event being moved

• args.newStart (DayPilot.Date) - new event start

• args.newEnd (DayPilot.Date) - new event end

• args.newResource (string | number) - ID of the new resource in resource calendar mode

• args.external (boolean) - indicates that the event was dragged from an external source

• args.ctrl (boolean) - state of the Ctrl key

• args.shift (boolean) - state of the Shift key

• args.preventDefault() - cancels the default action configured by DayPilot.Calendar.eventMoveHandling

Notes

The default action is specified using DayPilot.Calendar.eventMoveHandling and is enabled by default. Call args.preventDefault() when you need to cancel the move before it is applied.

• You can check custom rules for the target position.

• You can ask users for confirmation before actually moving the calendar event.

See also DayPilot.Calendar.onEventMoved, which fires after the default action. This event handler is also available in the open-source calendar component.

In api=1 mode, this event is only called if eventMoveHandling is set to "JavaScript". This API mode is used in versions with an integrated server-side part (ASP.NET WebForms, ASP.NET MVC, Java). The legacy signature is onEventMove(e, newStart, newEnd, newResource, external, ctrl, shift).

Legacy parameters:

• e (DayPilot.Event) - reference to the moved item

• newStart (DayPilot.Date) - new event start

• newEnd (DayPilot.Date) - new event end

• newResource (string) - ID of the new resource

• external (boolean) - true if this was a move from an external source

• ctrl (boolean) - true if the Ctrl key was pressed on drop

• shift (boolean) - true if the Shift key was pressed on drop

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onEventMove: (args) => {
    if (args.external) {
      args.preventDefault();
      console.log("External drop forbidden");
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onEventMove: (args) => {
    if (args.external) {
      args.preventDefault();
      console.log("External drop forbidden");
    }
  },
  // ...
};

React

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

const onEventMove = (args) => {
  if (args.external) {
    args.preventDefault();
    console.log("External drop forbidden");
  }
};

Vue

<DayPilotCalendar
  @eventMove="onEventMove"
  <!-- ... -->
/>

const onEventMove = (args) => {
  if (args.external) {
    args.preventDefault();
    console.log("External drop forbidden");
  }
};

See Also

Event Moving [doc.daypilot.org]

External Drag and Drop [doc.daypilot.org]

DayPilot.Calendar.eventMoveHandling

DayPilot.Calendar.onEventMoved

DayPilot.Calendar Class