Drag and Drop - JavaScript Scheduler

The scheduler supports drag and drop operations, such as event creating, moving, and resizing.

Drag and Drop Event Moving

Drag and drop event moving is enabled by default (.eventMoveHandling = "Update")

See also event moving [doc.daypilot.org].

// event moving
dp.onEventMoved = function (args) {
  dp.message("Moved: " + args.e.text());
};

Drag and Drop Event Resizing

Drag and drop event resizing is enabled by default (.eventResizeHandling = "Update").

See also event resizing [doc.daypilot.org].

dp.onEventResized = function (args) {
  dp.message("Resized: " + args.e.text());
};

Drag and Drop Event Creating

The users of the scheduler can select a time range using a mouse or touch. This action will fire onTimeRangeSelected event - you can use it to create a new event and add it to the scheduler.

See also Event creating.

// event creating
dp.onTimeRangeSelected = function (args) {
  var name = prompt("New event name:", "Event");
  dp.clearSelection();
  if (!name) return;
  var e = new DayPilot.Event({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      resource: args.resource,
      text: name
  });
  dp.events.add(e);
  dp.message("Created");
};

AutoScroll during Event Moving

When the user reaches the viewport edge during drag and drop event moving the scheduler will start scrolling automatically.

See also AutoScroll [doc.daypilot.org].

Drag and Drop from an External List

The scheduler lets you drag external items (from a list of unscheduled events) to the grid.

See also external drag and drop [doc.daypilot.org].