DayPilot.Calendar.onColumnMoved

The onColumnMoved event handler fires in the JavaScript Calendar component when the user completes drag-and-drop column moving, after the new hierarchy has already been stored.

Available since 2022.3.5381.

Declaration

DayPilot.Calendar.onColumnMoved(args)

Parameters

• args.source - information about the moved calendar column

• args.target - information about the target reference column

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

Notes

At this point, DayPilot.Calendar.columns.list already reflects the updated hierarchy. Use DayPilot.Calendar.onColumnMove(args) if you need to inspect the move before the new positions are stored.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onColumnMoved: args => {
    console.log(args.source.id, args.position, args.target && args.target.id);
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onColumnMoved: args => {
    console.log(args.source.id, args.position, args.target && args.target.id);
  },
  // ...
};

React

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

const onColumnMoved = (args) => {
  console.log(args.source.id, args.position, args.target && args.target.id);
};

Vue

<DayPilotCalendar
  @columnMoved="onColumnMoved"
  <!-- ... -->
/>

const onColumnMoved = (args) => {
  console.log(args.source.id, args.position, args.target && args.target.id);
};

See Also

Column Moving [doc.daypilot.org]

DayPilot.Calendar.onColumnMove

DayPilot.Calendar.columns.list

DayPilot.Calendar Class