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:
- event click
- double click
- event context menu
- event active area
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"; }