Options:
- Inline editing
- Using a modal dialog (see below)
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:
- HTML5 Scheduler and Modal Dialog (jQuery, PHP)
- JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog
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"; }