You can find a working example of the "new event" modal dialog in the following tutorial:
http://code.daypilot.org/59860/asp-net-mvc-5-event-calendar
The calendar is configured to display the modal dialog as soon as the user selected a time range:
@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
BackendUrl = Url.Action("Backend", "Calendar"),
ViewType = ViewType.Week,
TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "create(start, end)"
})
JavaScript
<script type="text/javascript">
function create(start, end) {
var m = new DayPilot.Modal();
m.closed = function () {
if (this.result == "OK") {
dp.commandCallBack('refresh');
}
dp.clearSelection();
};
m.showUrl('@Url.Action("Create", "Event")?start=' + start + '&end=' + end);
}
</script>
Modal dialog MVC view (Views/Event/Create.cshtml):
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.11.2.min.js")"></script>
<link href="@Url.Content("~/Media/layout.css")" rel="stylesheet" type="text/css" />
<style>
p, body, td { font-family: Tahoma, Arial, Sans-Serif; font-size: 10pt; }
</style>
<title></title>
</head>
<body style="padding:10px">
<form id="f" method="post" action="@Url.Action("New")">
<h1>New Event</h1>
<div>Text</div>
<div>@Html.TextBox("Text")</div>
<div>Start</div>
<div>@Html.TextBox("Start")</div>
<div>End</div>
<div>@Html.TextBox("End")</div>
<div class="space">
<input type="submit" value="Save" id="ButtonSave"/>
<a href="javascript:close()">Cancel</a>
</div>
<div class="space"> </div>
</form>
<script type="text/javascript">
function close(result) {
if (parent && parent.DayPilot && parent.DayPilot.ModalStatic) {
parent.DayPilot.ModalStatic.close(result);
}
}
$("#f").submit(function () {
var f = $("#f");
$.post(f.action, f.serialize(), function (result) {
close(eval(result));
});
return false;
});
$(document).ready(function () {
$("#Text").focus();
});
</script>
</body>
</html>
Note that the form submission is intercepted using jQuery and submitted using a special AJAX call. The modal dialog is closed using this following call:
parent.DayPilot.ModalStatic.close(result);
This passes control back to the main view - it fires the .closed event handler which updates the calendar using .commandCallBack():
// ...
m.closed = function () {
if (this.result == "OK") {
dp.commandCallBack('refresh');
}
dp.clearSelection();
};
// ...
The events are then refreshed using the OnCommand method on the server side:
protected override void OnCommand(CommandArgs e)
{
switch (e.Command)
{
case "refresh":
Update();
break;
}
}