javascript scheduler event resizing drag drop

Scheduler events can be resized using drag and drop.

See Also

JavaScript

Drag and drop event resizing is enabled by default (eventResizeHandling = "Update")

See also

You can customize the resizing behavior using onEventResizing event handler.

Example

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onEventResized = function (args) {
    dp.message("Resized: " + args.e.text());

    // your own AJAX call to the server to notify it about the change
  };
  // ...
  dp.init();
</script>

ASP.NET WebForms

Drag and drop event moving is disabled by default.

It can be enabled using EventResizeHandling 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 (EventResize) 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 (EventResize) 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 notifies the server (EventResize) using an AJAX callback. Notify is much faster than CallBack.

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

Server-Side Handler

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  EventResizeHandling = "CallBack"
  OnEventResize="DayPilotScheduler1_EventResize" 
/>

Example EventResize handler:

protected void DayPilotScheduler1_EventResize(object sender, DayPilot.Web.Ui.Events.EventResizeEventArgs e)
{
  // update the database
  DbUpdateEvent(e.Id, e.NewStart, e.NewEnd);

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

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.

ASP.NET MVC

Drag & drop event moving is disabled by default.

It can be enabled using EventResizeHandling 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 (OnEventResize) using an AJAX callback.

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

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

Server-Side Handler

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

The EventResize event can be handled by overriding the OnEventResize method in the DayPilotScheduler implementing class:

protected override void OnEventResize(EventResizeArgs e)
{
  new EventManager(Controller).EventResize(e.Id, e.NewStart, e.NewEnd);
  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).AsEnumerable();  // your method for loading data

  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.