Event moving

See also: Live demo

Enable event moving

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

PostBack handling

If you set EventMoveHandling to UserActionHandling.PostBack, each event move will send a PostBack to the server. You should handle EventMove 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 EventMove handler for PostBack will look like this:

protected void DayPilotCalendar1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs e)
{
    // Update your database
    // ...
    DayPilotCalendar1.DataBind();
}

In the MoveEvent handler, you can apply custom rules to determine if the move is allowed. If you do not allow the move, 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 move will execute an AJAX callback to the server. The same event handler is executed as in the PostBack scenario. 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 EventMove handler for AJAX callback will look like this:

protected void DayPilotCalendar1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs 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 MoveEvent handler, you can apply custom rules to determine if the move is allowed. If you do not allow the move, you do not have to call DataBind() and Update() and the calendar event will stay at its original position.

Note: When the EventMove 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 (EventMoveEventArgs)

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

• NewColumn
• NewStart
• NewEnd
• OldStart 
• OldEnd
• Source
• Tag
• Value

JavaScript handling

You can also handle the move 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.EventMoveHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.EventMoveJavaScript = "customMove(e, newStart, newEnd, oldColumn, newColumn);";

<script type="text/javascript">
    function customMove(e, newStart, newEnd, oldColumn, newColumn) {
        if (confirm('Do you really want to perform this action?')
            dpc1.eventMovePostBack(e, newStart, newEnd, oldColumn, newColumn);
    }
</script>

Executing CallBack:

DayPilotCalendar1.EventMoveHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.EventMoveJavaScript = "customMove(e, newStart, newEnd, oldColumn, newColumn);";

<script type="text/javascript">
    function customMove(e, newStart, newEnd, oldColumn, newColumn) {
        if (confirm('Do you really want to perform this action?')
            dpc1.eventMoveCallBack(e, newStart, newEnd, oldColumn, newColumn);
    }
</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
• oldColumn - string, original column id
• newColumn - string, new column id