New events can be created by selecting time cells by dragging (or clicking a single cell). This will fire the onTimeRangeSelected event.
JavaScript Scheduler
Simple Prompt
// event creating dp.onTimeRangeSelected = function (args) { var name = prompt("New event name:", "Event"); dp.clearSelection(); if (!name) return; var e = new DayPilot.Event({ start: args.start, end: args.end, id: DayPilot.guid(), resource: args.resource, text: name }); dp.events.add(e); dp.message("Created"); };
See also:
Tutorial
Angular Scheduler
Tutorial
ASP.NET WebForms
Modal Dialog using DayPilot.Modal
<DayPilot:DayPilotScheduler ID="DayPilotScheduler1" runat="server" ... ClientObjectName="dps1" TimeRangeSelectedHandling="JavaScript" TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)" />
The timeRangeSelected() function will open a modal dialog using DayPilot.Modal.
<script type="text/javascript">
function timeRangeSelected(start, end, resource) { 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") { dps1.commandCallBack('refresh'); } dps1.clearSelection(); }; modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource); }
</script>
After creating the new event in the database (in New.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
@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript, TimeRangeSelectedJavaScript = "timeRangeSelected(start, end, resource)" })
The timeRangeSelected() function will open a modal dialog using DayPilot.Modal.
<script type="text/javascript">
function timeRangeSelected(start, end, resource) { 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.showUrl("New?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource); }
</script>
After creating the new event in the database (in New which is a standalone page/view) 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"; }