DayPilot.Calendar.onColumnMoving

The onColumnMoving event handler lets you apply custom rules in real time during column moving in the JavaScript Calendar component. It fires repeatedly whenever the target position changes.

Available since 2022.3.5381.

Declaration

DayPilot.Calendar.onColumnMoving(args)

Parameters

• args.source - source calendar column being dragged (read-only)

• args.target - target reference column (read-only)

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

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onColumnMoving: args => {
    if (args.target && args.target.id === "locked") {
      args.position = "forbidden";
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onColumnMoving: args => {
    if (args.target && args.target.id === "locked") {
      args.position = "forbidden";
    }
  },
  // ...
};

React

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

const onColumnMoving = (args) => {
  if (args.target && args.target.id === "locked") {
    args.position = "forbidden";
  }
};

Vue

<DayPilotCalendar
  @columnMoving="onColumnMoving"
  <!-- ... -->
/>

const onColumnMoving = (args) => {
  if (args.target && args.target.id === "locked") {
    args.position = "forbidden";
  }
};

See Also

Column Moving [doc.daypilot.org]

DayPilot.Calendar.onColumnMove

DayPilot.Calendar.onColumnMoved

DayPilot.Calendar Class