Overview
Edit events displayed in the JavaScript Scheduler component (click to open the modal dialog)
Programmatically create a modal dialog with custom fields (using DayPilot.Modal component).
Use the result to update the Scheduler data.
Includes a trial version of DayPilot Pro for JavaScript (see License below)
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.
Live Demo
Modal Dialog with Custom Fields
DayPilot Pro includes the DayPilot.Modal component that lets you display a modal dialog.
Simple pre-defined dialogs that replace the built-in browser dialogs are available - DayPilot.Modal.alert(), DayPilot.Modal.confirm(), DayPilot.Modal.prompt().
You can also display custom HTML or a specified page (see HTML5 Scheduler and Modal Dialog tutorial to see how to edit event details using a special page)
This tutorial explains how to use DayPilot.Modal.form() method which lets you define the modal content programmatically.
The DayPilot.Modal.form() method accepts two parameters:
DayPilot.Modal.form(form[, data]);Modal Dialog Fields
The form parameter lets you define the modal dialog fields:
DayPilot.Modal.form([
{name: "First Name", id: "first"},
{name: "Last Name", id: "last"}
]);Result Data Object
The method returns a Promise object that can be used to read the entered data:
DayPilot.Modal.form([
{name: "First Name", id: "first"},
{name: "Last Name", id: "last"}
]).then(function(args) {
if (!args.canceled) {
console.log("data", args.result); // {first: "John", last: "Doe"}
}
});Source Data Object
You can specify the source data object using the data parameter. It will be used to set the initial form values:
DayPilot.Modal.form(
[
{name: "First Name", id: "first"},
{name: "Last Name", id: "last"}
],
{
first: "Jane",
last: "Doe"
}
);The success handler (then() parameter) will create a new object which will include all fields from the source object (data) and all data modified in the modal dialog. This merged object is available as args.result.
DayPilot.Modal.form(
[
{name: "First Name", id: "first"},
{name: "Last Name", id: "last"}
],
{
first: "Jane",
last: "Doe",
id: 1204
}
).then(function(args) {
if (!args.canceled) {
console.log("data", args.result); // {first: "Jane", last: "Doe", id: 1204}
}
});Modal Dialog for Editing Scheduler Events
In this step, we will use the DayPilot.Modal.form() method to create a modal dialog that lets the users edit Scheduler event details on click.
As you can see, we define three dialog fields:
Name (using the default "text" type)
Start ("date" type with a specified date format)
End ("date" type with a specified date format)
The data is loaded from the event data object (DayPilot.Event.data available as args.e.data). The "text" field (Name) is displayed using a standard <input> element. The "date" fields (Start, End) are displayed using an <input> element using the specified date format (date picker is activated automatically on field focus).
The success event handler updates the Scheduler event using events.update() Scheduler method.
We also use the third options parameter to enable auto-focus of the first modal dialog field.
onEventClick: function(args) {
var form =[
{ name: "Name", id: "text"},
{ name: "Start", id: "start", dateFormat: "MMMM d, yyyy"},
{ name: "End", id: "end", dateFormat: "MMMM d, yyyy"},
];
var data = args.e.data;
var options = {
autoFocus: true
};
DayPilot.Modal.form(form, data, options).then(function(margs) {
console.log("modal", margs);
if (!margs.canceled) {
dp.events.update(margs.result);
}
});
},Full Source Code
This is the full JavaScript source code of the example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog</title>
<style type="text/css">
p, body, td { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; }
body { padding: 0px; margin: 0px; background-color: #ffffff; }
a { color: #1155a3; }
.space { margin: 10px 0px 10px 0px; }
.header { background: #003267; background: linear-gradient(to right, #011329 0%,#00639e 44%,#011329 100%); padding:20px 10px; color: white; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75); }
.header a { color: white; }
.header h1 a { text-decoration: none; }
.header h1 { padding: 0px; margin: 0px; }
.main { padding: 10px; margin-top: 10px; }
.generated { color: #999; }
.generated a { color: #999; }
</style>
<!-- DayPilot library -->
<script src="js/daypilot/daypilot-all.min.js"></script>
</head>
<body>
<div class="header">
<h1><a href='https://code.daypilot.org/60913/javascript-scheduler-edit-multiple-fields-modal-dialog'>JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog</a></h1>
<div><a href="https://javascript.daypilot.org/">DayPilot for JavaScript</a> - HTML5 Calendar/Scheduling Components for JavaScript/Angular/React</div>
</div>
<div class="main">
<div id="dp"></div>
<div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>
<script>
var dp = new DayPilot.Scheduler("dp", {
timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
scale: "Day",
days: 31,
startDate: "2020-03-01",
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: function (args) {
var dp = this;
DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
dp.clearSelection();
if (!modal.result) { return; }
dp.events.add(new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
}));
});
},
onEventClick: function(args) {
var form =[
{ name: "Name", id: "text"},
{ name: "Start", id: "start", dateFormat: "MMMM d, yyyy"},
{ name: "End", id: "end", dateFormat: "MMMM d, yyyy"},
];
var data = args.e.data;
var options = {
autoFocus: true
};
DayPilot.Modal.form(form, data, options).then(function(margs) {
console.log("modal", margs);
if (!margs.canceled) {
dp.events.update(margs.result);
}
});
},
treeEnabled: true,
});
dp.resources = [
{name: "Resource 1", id: "R1"},
{name: "Resource 2", id: "R2"},
{name: "Resource 3", id: "R3"},
{name: "Resource 4", id: "R4"},
{name: "Resource 5", id: "R5"},
{name: "Resource 6", id: "R6"},
{name: "Resource 7", id: "R7"},
{name: "Resource 8", id: "R8"},
{name: "Resource 9", id: "R9"},
];
dp.eventEndSpec = "Date";
dp.events.list = [
{
id: 1,
start: "2020-03-10T00:00:00",
end: "2020-03-14T00:00:00",
text: "Event 1",
resource: "R2"
}
];
dp.init();
</script>
</body>
</html>
