Calendar: Event Resizing

event-resizing.png

See also: Online demo

Enable Event Resizing

By default, event resizing is disabled. You can enable it by setting DayPilotCalendar.EventResizeHandling to JavaScript, PostBack, or CallBack.

PostBack Handling

If you set EventResizeHandling to UserActionHandling.PostBack, each event resize will send a PostBack to the server. You should handle EventResize event on the server (you can do it by double-clicking EventResize event in the Properties window in Visual Studio) and apply the changes to your data source (usually a database).

A typical EventResize handler for PostBack will look like this:

protected void DayPilotCalendar1_EventResize(object sender, DayPilot.Web.Ui.Events.EventResizeEventArgs e)
{
        // Update your database
        // ...

        DayPilotCalendar1.DataBind();
}

In the ResizeEvent handler, you can apply custom rules to determine if the resize is allowed. If you do not allow the resize, you do not have to call DataBind() and the calendar event will stay at its original position.

CallBack Handling

If you choose CallBack handling, each event resize will execute an AJAX callback to the server. In the handler, you should update your data source and call DataBind(). If you call Update() method the changes will be sent back to the client and the events will be redrawn according to the new state.

A typical EventResize handler for AJAX callback will look like this:

protected void DayPilotCalendar1_EventResize(object sender, DayPilot.Web.Ui.Events.EventResizeEventArgs e)
{
        // Update your database
        // ...

        DayPilotCalendar1.DataBind();
        DayPilotCalendar1.Update();
}

Note that the same event handler is used for PostBack and CallBack events. You can detect the event source (PostBack or CallBack) by checking e.Source property.

In the ResizeEvent handler, you can apply custom rules to determine if the resize is allowed. If you do not allow it, you do not have to call DataBind() and Update() and the calendar event will stay at its original position.

Note: When the EventResize handler is invoked by AJAX callback, the state of page controls is not available (in contrast to PostBack).

Note: If you do not use PostBack handling on your page (either for DayPilot or for any other control) you should turn off ViewState to improve the page performance.

Server-Side Event Arguments (EventResizeEventArgs)

The EventResize handler will receive information about the action performed on the client (this applies both to PostBack and CallBack). EventResizeEventArgs class contains the following properties:

JavaScript Handling

You can also handle the resize event on the client side. Because it is necessary to redraw the calendar after the update you will want to call server-side PostBack or CallBack event from your JavaScript code after performing the custom operations.

Executing PostBack:

DayPilotCalendar1.EventResizeHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.EventResizeJavaScript = "customResize(e, newStart, newEnd);";<script type="text/javascript">
    function customResize(e, newStart, newEnd) {
        if (confirm('Do you really want to perform this action?')
            dpc1.eventResizePostBack(e, newStart, newEnd);
    }
</script>

Executing CallBack:

DayPilotCalendar1.EventResizeHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.EventResizeJavaScript = "customResize(e, newStart, newEnd);";<script type="text/javascript">
    function customResize(start, pstart, end, id, tag, border, step) {
        if (confirm('Do you really want to perform this action?')
            dpc1.eventResizeCallBack(e, newStart, newEnd);
    }
</script>

Note: dpc1 is the value of DayPilotCalendar.ClientObjectName. If you don't specify ClientObjectName the object name will be the value of DayPilotCalendar.ClientID (usually something like DayPilotCalendar1 but it can be ctl00$ContentPlaceHolder1$DayPilotCalendar1 if you use master pages).

Note: CallBack is executed asynchronously so you cannot expect that the calendar will be updated right after WebForm_DoCallback is executed.

Client-Side Event Arguments

The following variables are available in the JavaScript handler:

  • e - DayPilotCalendar.Event, event details
  • newStart - Date, new event start after a move
  • newEnd - Date, new event end after a move

See Also

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java