You can configure the Calendar component to display a modal dialog with event details on click. This will be the most common scenario.
The Pro version also supports inline editing which lets you edit the event text directly in the calendar event box without opening any popup.
In addition to using the event click handler, you can also open the modal dialog using double click, event context menu, or an event active area.
You can also replace the built-in modal dialog with a custom solution.
JavaScript Calendar
This JavaScript Calendar example shows how to use the built-in modal dialog to edit calendar events.
You can define fields that you want to edit (e.g. the standard start, end text), including custom fields.
To design your own modal dialog form, you can use the online modal dialog builder.
<div id="dp"></div>
<script type="text/javascript">
const dp = new DayPilot.Calendar("dp", {
onEventClicked: args => {
const form = [
{name: "Text", id: "text"},
{name: "Start", id: "start", type: "datetime"},
{name: "End", id: "end", type: "datetime"},
];
const modal = await DayPilot.Modal.form(form, args.e.data);
if (modal.canceled) {
return;
}
dp.events.update(modal.result);
},
// ...
});
dp.init();
</script>
ASP.NET WebForms
Modal Dialog using DayPilot.Modal
<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" ... ClientObjectName="dpc" EventClickHandling="JavaScript" EventClickJavaScript="editEvent(e.id())" OnCommand="DayPilotCalendar1_Command" />
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") {
dpc.commandCallBack('refresh');
}
dpc.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 events in the Calendar are refreshed using .commandCallBack().
protected void DayPilotCalendar1_Command(object sender, 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
Set EventClickHandling to JavaScript and open the dialog using EventClickJavaScript:
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
BackendUrl = ResolveUrl("~/Calendar/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") {
dpc.commandCallBack('refresh');
}
dpc.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 events in the Calendar 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";
}