JavaScript
Drag and drop event moving is enabled by default (eventResizeHandling = "Update"). You can disable it by setting eventResizeHandling to "Disabled".
To learn how to disable drag-and-drop resizing for the whole calendar or for selected events, see the JavaScript Calendar in Read-Only Mode tutorial.
See also
Example
<div id="calendar"></div>
<script>
const calendar = new DayPilot.Calendar("calendar", {
onEventResized: (args) => {
dp.message("Resized: " + args.e.text());
// use an HTTP request to notify the server
},
// ...
});
calendar.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 Calendar 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 Calendar 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 EventMoveJavaScript.
-
The following variables are available to the client-side handler: e, newStart, newEnd (see DayPilot.Calendar.onEventResize)
-
The client side handler can call the server-side handler using eventResizeCallBack() and eventResizePostBack() method
Server-Side Handler
<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
...
EventResizeHandling = "CallBack"
OnEventResize="DayPilotCalendar1_EventResize"
/>Example EventMove handler:
protected void DayPilotCalendar1_EventResize(object sender, EventResizeEventArgs e)
{
// update the database
// ...
// reload events and refresh the calendar on the client side
DayPilotCalendar1.DataSource = LoadData(); // your method
DayPilotCalendar1.DataBind();
DayPilotCalendar1.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 (OnEventMove) using an AJAX callback.
Notify event handling type will update the Calendar 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 EventMoveJavaScript.
-
The following variables are available to the client-side handler: e, newStart, newEnd (see DayPilot.Calendar.onEventResize)
-
The client side handler can call the server-side handler using eventResizeCallBack() method
Server-Side Handler
@Html.DayPilotCalendar("dps", new DayPilotCalendarConfig {
BackendUrl = ResolveUrl("~/Calendar/Backend"),
...
EventResizeHandling = EventResizeHandlingType.CallBack
})The EventResize event can be handled by overriding the OnEventResize method in the DayPilotCalendar implementing class:
protected override void OnEventResize(EventMoveArgs 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";
}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.