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. Buy a license.

Live Demo

Modal Dialog with Custom Fields

DayPilot Pro includes the DayPilot.Modal component that lets you display a modal dialog.

The DayPilot.Modal.form() method accepts two parameters:

DayPilot.Modal.form(form[, data]);

Modal Dialog Fields

javascript-modal-dialog-custom-fields-first-last-name.png

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

javascript-modal-dialog-custom-fields-first-last-name-with-data.png

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

javascript-modal-dialog-custom-fields-first-last-name-initial-data.png

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

javascript-modal-dialog-custom-fields-date-picker.png

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>