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");
  if (!name) return;
  var e = new DayPilot.Event({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      resource: args.resource,
      text: name

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].