Options:

You can also open the modal dialog from the event context menu.

JavaScript

Modal Dialog

See also the following tutorials on using the DayPilot modal dialog with the Scheduler to edit events:

Quick example:

<div id="dp"></div>

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");

    // ...
    
    dp.onEventClick = function(args) {
        var form = [
          { name: "Text", id: "text" }
        ];
        
        var data = args.e.data;
        
        DayPilot.Modal.form(form, data).then(function(modal) {
            if (modal.canceled) {
                return;
            }
            console.log("Updated data", modal.result);
        });
    };
                    
    dp.init();

</script>

Simple Prompt

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

Angular

Tutorial

ASP.NET WebForms

Modal Dialog using DayPilot.Modal

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  ClientObjectName="dps1"
  EventClickHandling="JavaScript"
  EventClickJavaScript="editEvent(e.id())"
/>

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") { 
        dps.commandCallBack('refresh'); 
      }
      dps.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 the events in Scheduler are refreshed using .commandCallBack().

protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      DayPilotScheduler1.DataSource = loadData(); // your method
      DayPilotScheduler1.DataBind();
      DayPilotScheduler1.Update();
      break;
  }
}

Modal Dialog using ModalPopupExtender

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

ASP.NET MVC

Modal Dialog

Set EventClickHandling to JavaScript and open the dialog using EventClickJavaScript:

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/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") { 
        dps.commandCallBack('refresh'); 
      }
      dps.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 the events in Scheduler 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";
  DataResourceField = "resource";
}