html5 scheduler event moving indicator drag and drop

You can enable the real-time drag and drop event moving indicators using EventMovingStartEndEnabled property. The indicators are disabled by default.

The date/time format of the indicator text can be customized using EventMovingStartEndFormat property. It accepts format patterns supported by DayPilot.Date.toString() JavaScript method.

Introduced in DayPilot Pro version 7.8.

ASP.NET WebForms

<DayPilot:DayPilotScheduler
  ...
  EventMovingStartEndEnabled = "true"
  ...
/>

Demo

ASP.NET MVC

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  // ...
  EventMovingStartEndEnabled = true,
  EventMovingStartEndFormat = "MMMM d, yyyy"
})

Demo

JavaScript

Example

dp.eventMovingStartEndEnabled = true; 
dp.eventMovingStartEndFormat = "MMMM d, yyyy";

In adition to .eventMovingStartEndEnabled and .eventMovingStartEndFormat you can control the drag and drop indicators using onEventMoving event handler.

dp.onEventMoving = function(args) {
  args.left.enabled = true;
  args.left.html = args.start.toString("M/d/yyyy");
  args.right.enabled = false;
};

Demo