Event editing

See also: Online demo

Enable event editing

You need to make two changes to allow event editing:

  • Set EventClickHandling to Edit (to change the action on the client-side for event click)
  • Set EventEditHandling to PostBack, CallBack, or JavaScript (to handle the changes sumbission)

PostBack handling

If you set EventEditHandling to UserActionHandling.PostBack, each event edit will send a PostBack to the server (when the users confirms the changes by hitting <enter> or clicking outside of the edit box). You should handle EventEdit event on the server (you can do it by double-clicking EventEdit event in the Properties window in Visual Studio) and apply the changes to your data source (usually a database).

A typical EventEdit handler for PostBack will look like this:

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

        DayPilotCalendar1.DataBind();
}

In the EditEvent handler, you can apply custom rules to determine if the change is allowed. If you do not allow the change, 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 edit will send an AJAX callback to the server (when the users confirms the changes by hitting <enter> or clicking outside of the edit box).  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 EventEdit handler for AJAX callback will look like this:

protected void DayPilotCalendar1_EventEdit(object sender, DayPilot.Web.Ui.Events.EventEditEventArgs 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 EditEvent handler, you can apply custom rules to determine if the change 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 EventEdit 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 (EventEditEventArgs)

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:

  • Value
  • Text
  • NewText
  • Tag

JavaScript handling

You can also handle the edit 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.EventEditHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.EventEditJavaScript = "customEdit(e, newText);";
<script type="text/javascript">
    function customEdit(e, newText) {
        if (confirm('Do you really want to perform this action?')
            dpc1.eventEditPostBack(e, newText);
    }
</script>

Executing CallBack:

DayPilotCalendar1.EventResizeHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.EventResizeJavaScript = "customEdit(e, newText);";
<script type="text/javascript">
    function customResize(start, pstart, end, id, tag, border, step) {
        if (confirm('Do you really want to perform this action?')
            dpc1.eventEditCallBack(e, newText);
    }
</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
  • newText - string, new event text after edit

 

DayPilot for ASP.NET, DayPilot for Java