New events can be created by selecting time cells using drag and drop. This will fire onTimeRangeSelected event.
JavaScript Calendar
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:
- DayPilot.Calendar.onTimeRangeSelect
- DayPilot.Calendar.onTimeRangeSelected
- DayPilot.Calendar.events.add()
ASP.NET WebForms
Modal Dialog using DayPilot.Modal
<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" ... ClientObjectName="dpc1" TimeRangeSelectedHandling="JavaScript" TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)" OnCommand="DayPilotCalendar1_Command" />
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") { dpc1.commandCallBack('refresh'); } dpc1.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 DayPilotCalendar1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e) { switch (e.Command) { case "refresh": DayPilotCalendar1.DataSource = loadData(); // your method DayPilotCalendar1.DataBind(); DayPilotCalendar1.Update(); break; } }
Modal Dialog using ModalPopupExtender
See the event calendar and ModalPopupExtender tutorial for more details on how to use the event calendar with ModalPopupExtender from Ajax Control Toolkit.
ASP.NET. MVC
Modal Dialog
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { BackendUrl = ResolveUrl("~/Calendar/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") { dpc.commandCallBack('refresh'); } dpc.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"; }
Tutorial
- ASP.NET MVC 5 Event Calendar Tutorial