Drag and Drop - JavaScript Scheduler

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

Drag and Drop Event Moving

javascript-scheduler-drag-drop-moving.png

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

javascript-scheduler-drag-drop-resizing.png

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

javascript-scheduler-drag-drop-creating.png

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

javascript-scheduler-autoscroll.png

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

javascript-scheduler-external-drag-drop.png

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

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java