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

• Set rowMoveHandling to "Update" to enable local row reordering. Its default, "Disabled", prevents row dragging.

• 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)

API: rowMoveHandling, rowDragHandleVisibility.

The examples show row drag handles and enable Update handling. Drag a handle to change the local resource order; save the accepted order separately in your application.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    rowMoveHandling: "Update",
    rowDragHandleVisibility: "Visible"
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      rowMoveHandling={"Update"}
      rowDragHandleVisibility={"Visible"}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const rowMoveHandling = "Update";
const rowDragHandleVisibility = "Visible";

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :rowMoveHandling="rowMoveHandling"
      :rowDragHandleVisibility="rowDragHandleVisibility"
    />
  </div>
</template>