DayPilot.Calendar.onColumnMove

The onColumnMove event handler fires in the JavaScript Calendar component when the user completes drag-and-drop column moving, before the new positions are stored.

Available since 2022.3.5381.

Declaration

DayPilot.Calendar.onColumnMove(args)

Parameters

• args.source - information about the moved calendar column

• args.target - information about the target reference column

• args.position ("before" | "after" | "child" | "forbidden") - new position relative to the target column

• args.preventDefault() - cancels the move

Notes

When this event fires, DayPilot.Calendar.columns.list still contains the original order. Use DayPilot.Calendar.onColumnMoved(args) to inspect the updated hierarchy.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  columnMoveHandling: "Update",
  onColumnMove: args => {
    if (args.position === "forbidden") {
      args.preventDefault();
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  columnMoveHandling: "Update",
  onColumnMove: args => {
    if (args.position === "forbidden") {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotCalendar
  columnMoveHandling="Update"
  onColumnMove={onColumnMove}
  {/* ... */}
/>

const onColumnMove = (args) => {
  if (args.position === "forbidden") {
    args.preventDefault();
  }
};

Vue

<DayPilotCalendar
  columnMoveHandling="Update"
  @columnMove="onColumnMove"
  <!-- ... -->
/>

const onColumnMove = (args) => {
  if (args.position === "forbidden") {
    args.preventDefault();
  }
};

See Also

Column Moving [doc.daypilot.org]

DayPilot.Calendar.onColumnMoving

DayPilot.Calendar.onColumnMoved

DayPilot.Calendar.columns.list

DayPilot.Calendar Class