javascript scheduler drag drop event moving target indicators

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

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

Introduced in DayPilot Pro version 7.8.

JavaScript

Example

{
  eventMovingStartEndEnabled: true,
  eventMovingStartEndFormat: "MMMM d, yyyy",
  // ...
}

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

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

Demo

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