Row Moving

Rows displayed by the JavaScript Scheduler can be moved to a new position using drag and drop. 

• Includes resource tree support (insert before or after a node, as a child). 

• Custom rules using real-time event (onRowMoving).

• CSS styling (drag handler, target position indicator, forbidden location)

JavaScript

• Row moving can be enabled using rowMoveHandling ("Disabled").

• You can implement custom rules (allowed operations) using the onRowMoving event handler.

• The Scheduler control fires the onRowMove and onRowMoved events on drop (if the target position is not forbidden).

Demo

• JavaScript Scheduler: Row Moving Demo

See also

• DayPilot.Scheduler.onRowMove event

• DayPilot.Scheduler.onRowMoved event

• DayPilot.Scheduler.onRowMoving event

• DayPilot.Scheduler.rowMoveHandling property

Example

Scheduler config:

{
  rowMoveHandling: "Update",
  onRowMove: (args) => {
    console.log("source: " + args.source.id  + ", target: " + args.target.id + ", position: " + args.position);
  },
  onRowMoving: (args) => {
    if (args.target.id === "B" && args.position === "child") {
      args.position = "forbidden";
    }
  },
  // ...
}

Related Tutorials

• React Activity Planning System (Node, Express, PostgreSQL)