javascript html5 scheduler drag and drop moving

See also

JavaScript

Drag and drop event moving is enabled by default (eventMoveHandling is set to "Update")

Related events

DayPilot.Scheduler.onEventMoving

  • Fires during the drag phase whenever the target positions changes. You can use this event to display real-time information about the current position. You can also adjust the HTML of the drag and drop indicators.

DayPilot.Scheduler.onEventMove

  • Fires when the moving is finished (after drop) but before the default action is performed. The default action (set using eventMoveHandling) is set to "Update" by default. This means the event box will be moved to the selected position. You can use this event to check the move rules and cancel the moving using args.preventDefault() if necessary.

DayPilot.Scheduler.onEventMoved

  • Fires when the moving is finished and the default action is performed. If you cancel the moving in onEventMove this event will not be called. You can use this event to notify the server about the new event position using an AJAX call.

Example - Display a Message

<div id="dp"></div>
<script type="application/javascript">
  const dp = new DayPilot.Scheduler("dp", {
    onEventMoved: (args) => {
      dp.message("Moved: " + args.e.text());
      // your own AJAX call to the server to notify it about the change
    },
    // ...
  });
  dp.init();
</script>

Example - Ask for Confirmation using a Modal Dialog

This example uses DayPilot.Modal.confirm() to display a modal dialog that asks for confirmation. If you cancel the confirmation dialog, the event will not be moved - the default action is canceled using args.preventDefault() method.

The DayPilot.Modal.confirm() method is asynchronous (it returns a Promise). That means it is necessary to switch to the async mode using args.async = true (otherwise the delayed args.preventDefault() call would be ignored).

You can replace the basic DayPilot.Modal.confirm() dialog with a custom dialog created using DayPilot.Modal.form().

<div id="dp"></div>
<script type="application/javascript">
  const dp = new DayPilot.Scheduler("dp", {
    onEventMove: async (args) => {
      args.async = true;
      const modal = await DayPilot.Modal.confirm("Do you really want to move this event?");
      if (modal.canceled) {
          args.preventDefault();
      }
      args.loaded();
    },
    // ...
  });
  dp.init();
</script>

Tutorials

ASP.NET WebForms

Drag and drop event moving is disabled by default.

It can be enabled using EventMoveHandling property. It has to be set to one of the following values:

  • CallBack
  • PostBack
  • Notify
  • JavaScript

PostBack event handling type will fire a server-side event handler (EventMove) using a PostBack (or partial AJAX PostBack if the scheduler is inside an UpdatePanel).

CallBack event handling type will fire a server-side event handler (EventMove) using an AJAX callback. CallBack is much faster than PostBack (and partial PostBack).

Notify event handling type will update the scheduler on the client immediately and then notify the server (EventMove) using an AJAX callback. Notify is much faster than CallBack.

JavaScript event handling will fire the JavaScript code specified in EventMoveJavaScript.

Server-Side Handler

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  EventMoveHandling = "CallBack"
  OnEventMove="DayPilotScheduler1_EventMove" 
/>

Example EventMove handler:

protected void DayPilotScheduler1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs e)
{
  // update the database
  // ...

  // reload events and refresh the scheduler on the client side
  DayPilotScheduler1.DataSource = LoadData();  // your method
  DayPilotScheduler1.DataBind();
  DayPilotScheduler1.UpdateWithMessage("Event moved.");
}

If any changes are made to the event data set (which is the typical case), it is necessary to redraw the event set on the client side using an Update() or UpdateWithMessage() call.

Asking for Confirmation

The server-side event handler will only be fired if the user confirms the action:

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  
  ClientObjectName="dps"
  EventMoveHandling = "JavaScript"
  EventMoveJavaScript="if (confirm('Do you really want to move this event?')) { dps.eventMoveCallBack(e, newStart, newEnd, newResource); } "
  OnEventMove="DayPilotScheduler1_EventMove" 
/>

ASP.NET MVC

Drag & drop event moving is disabled by default.

It can be enabled using EventMoveHandling property. It has to be set to one of the following values:

  • CallBack
  • Notify
  • JavaScript

CallBack event handling will fire a server-side event handler (OnEventMove) using an AJAX callback.

Notify event handling type will update the scheduler on the client immediately and then notify the server using an AJAX call. Notify is much faster than CallBack.

JavaScript event handling will fire the JavaScript code specified in EventMoveJavaScript.

  • The following variables are available to the client-side handler: e, newStart, newEnd, newResource, external, ctrl, shift (see DayPilot.Scheduler.onEventMove)
  • The client side handler can call the server-side handler using eventMoveCallBack() method

Server-Side Handler

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  EventMoveHandling = EventMoveHandlingType.CallBack
})

The EventMove event can be handled by overriding the OnEventMove method in the DayPilotScheduler implementing class:

protected override void OnEventMove(EventMoveArgs e)
{
  new EventManager(Controller).EventMove(e.Id, e.NewStart, e.NewEnd, e.NewResource);
  Update();
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
    return;
  }

  Events = new EventManager(Controller).FilteredData(StartDate, EndDate, (string)ClientState["filter"]).AsEnumerable();

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
  DataResourceField = "resource";
}

If any changes are made to the event data set (which is the typical case), it is necessary to redraw the event set on the client side using an Update() call.