Options:

The modal dialog can be displayed in various ways:

You can replace the built-in modal dialog with a custom solution.

ASP.NET WebForms

Modal Dialog using DayPilot.Modal

<DayPilot:DayPilotCalendar
  ID="DayPilotCalendar1" 
  runat="server" 
  ...
  ClientObjectName="dpc"
  EventClickHandling="JavaScript"
  EventClickJavaScript="editEvent(e.id())"
  OnCommand="DayPilotCalendar1_Command"
/>

The editEvent() function will open a modal dialog using DayPilot.Modal.

<script type="text/javascript">
  function editEvent(id) {
    var modal = new DayPilot.Modal();
    modal.top = 60;
    modal.width = 300;
    modal.opacity = 70;
    modal.border = "10px solid #d0d0d0";
    modal.closed = function() { 
      if(this.result == "OK") { 
        dpc.commandCallBack('refresh'); 
      }
      dpc.clearSelection();
   };
    modal.height = 250;
    modal.zIndex = 100;
    modal.showUrl("Edit.aspx?id=" + id);
  } 
</script>

After updating the event in the database (in Edit.aspx which is a standalone page) the .closed event handler is called and events in the Calendar are refreshed using .commandCallBack().

protected void DayPilotCalendar1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      DayPilotCalendar1.DataSource = loadData(); // your method
      DayPilotCalendar1.DataBind();
      DayPilotCalendar1.Update();
      break;
  }
}

Modal Dialog using ModalPopupExtender

See the event calendar and ModalPopupExtender tutorial for more details on how to use the event calendar with ModalPopupExtender from Ajax Control Toolkit.

ASP.NET MVC

Modal Dialog

Set EventClickHandling to JavaScript and open the dialog using EventClickJavaScript:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "editEvent(e.id())"
})

The editEvent() uses DayPilot.Modal to open a special page:

<script type="text/javascript">
  function editEvent(id) {
    var modal = new DayPilot.Modal();
    modal.top = 60;
    modal.width = 300;
    modal.opacity = 70;
    modal.border = "10px solid #d0d0d0";
    modal.closed = function() { 
      if(this.result == "OK") { 
        dpc.commandCallBack('refresh'); 
      }
      dpc.clearSelection();
   };
    modal.height = 250;
    modal.zIndex = 100;
    modal.showUrl("Edit/" + id);
  } 
</script>

After updating the event in the database (in Edit.aspx which is a standalone page) the .closed event handler is called and events in the Calendar are refreshed using .commandCallBack().

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      UpdateWithMessage("Refreshed");
      break;
  }
}

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 data-loading method

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
}

JavaScript

Simple Prompt

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.eventClicked = function(args) {
    var name = prompt("New event name:", "Event");
    if (!name) return;
    args.e.text(name);
    dp.events.update(args.e);
  };
  // ...
  dp.init();
</script>