Options:

  • Using a modal dialog (see below)

Note: The Monthly Calendar doesn't support inline event editing.

The modal dialog can be displayed in various ways:

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

JavaScript

Simple Prompt

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("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>

ASP.NET WebForms

Modal Dialog

<DayPilot:DayPilotMonth
  ID="DayPilotMonth1" 
  runat="server" 
  ...
  ClientObjectName="dpm"
  EventClickHandling="JavaScript"
  EventClickJavaScript="editEvent(e.id())"
  OnCommand="DayPilotMonth1_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") { 
        dpm.commandCallBack('refresh'); 
      }
      dpm.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 DayPilotMonth1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      DayPilotMonth1.DataSource = loadData(); // your method
      DayPilotMonth1.DataBind();
      DayPilotMonth1.Update();
      break;
  }
}

ASP.NET MVC

Modal Dialog

Set EventClickHandling to JavaScript and open the dialog using EventClickJavaScript:

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/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") { 
        dpm.commandCallBack('refresh'); 
      }
      dpm.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(VisibleStart, VisibleEnd).AsEnumerable();  // your data-loading method

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