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. 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
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.