DayPilot.Modal.form

The form() method displays a modal dialog with the specified fields.

Availability:

• Standalone DayPilot.Modal library, since version 3.0 (open-source) 

• DayPilot Lite for JavaScript, since version 2021.2.261 (open-source)

• DayPilot Pro for JavaScript, since version 2019.4.4153 (commercial)

Instead of building the form manually using the API, you can design it using a visual tool:

• DayPilot Modal Builder

For a detailed description of the available form field types, please see the documentation.

Declaration

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

Parameters

• form (array) - the modal dialog fields

• data (object) - the source data object (it will be used to fill the initial values)

• options (object) - an object that specifies custom DayPilot.Modal properties

Form Fields

The form array items have the following structure:

• name (string) - the field name that will be displayed as a description

• id (string) - the field id; it will be used to load the data from the data object and to store the value in args.result object

• type ("text" | "date" | "datetime" | "searchable" | "select" | "radio" | "checkbox" | "table" | "title" | "image" | "html" | "textarea" | "scrollable") - the field type (see the docs)

• dateFormat (string) - the date/time format used for "date" fields; it uses the patterns from DayPilot.Date.toString()

• columns (array) - specifies table columns for "table" fields; each item is an object with name, id, and type  properties (types supported: "text", "number", "select"); "select" fields specify options using options property

• height (number) - height (in pixels) for "textarea" and "scrollable" fields

• html (string) - specifies static HTML content for "html" and "scrollable" fields

• text (string) - specifies static text content for "html" and "scrollable" fields

• image (string) - specifies static image URL for "image" fields

• children (string) - optional children for "radio" fields

• cssClass (string) - custom CSS class to be applied to the field

• disabled (boolean) - make the field disabled if set to true

• onValidate (function) - validation callback

• onNewRow (function) - new row content callback for "table" fields

• options (array) - the items used for "select" fields; each item is an object with name (item text) and id (item value) properties

Example:

const form = [
  {name: "First Name", id: "first"},
  {name: "Last Name", id: "last"},
  {name: "Birthday", id: "birthday", dateFormat: "MMMM d, yyyy"}
];
const modal = await DayPilot.Modal.form(form);
console.log(args.result);

Field Type Detection

The field type doesn't always have to be specified explicitly for form items. When detecting the field type, the following rules will be applied:

• If the form item has an image value specified, "image" type will be used

• If the form item has an html or text value specified, "html" type will be used

• If the form item has an options value specified, "searchable" type will be used

• If the form item has a columns value specified, "table" type will be used

• If the form item has a dateFormat value specified, "date" type will be used

• Otherwise, the "text" field type will be used.

Return Value

A Promise. The success handler of the promise will be called when the modal dialog is closed (using either the Cancel button or by clicking the background). The failure handler is never called.

The success handler receives an args parameter which holds a copy of the data object (updated with selected values) as args.result.

Tutorial

• JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog

Examples

Example with async/await syntax (ES2017, not supported in IE):

const form = [
  {name: "First Name", id: "first"},
  {name: "Last Name", id: "last"}
];

const data = {
  first: "Jane",
  last: "Doe",
  id: 1204
};

const args = await DayPilot.Modal.form(form, data);
if (!args.canceled) {
  console.log("data", args.result);   //  {first: "Jane", last: "Doe", id: 1204
}

Traditional syntax (ES5):

var form = [
  {name: "First Name", id: "first"},
  {name: "Last Name", id: "last"}
];

var data = {
  first: "Jane",
  last: "Doe",
  id: 1204
};

DayPilot.Modal.form(form, data).then(function(args) {
  if (!args.canceled) {
    console.log("data", args.result);   //  {first: "Jane", last: "Doe", id: 1204}
  }
});

Validation example:

var resources = [
  {name: "Resource A", id: "A"},
  {name: "Resource B", id: "B"},
  {name: "Resource C", id: "C"},
];

function validateTextRequired(args) {
  var value = args.value || "";
  if (value.trim().length === 0) {
    args.valid = false;
    args.message = "Text required";
  }
  else if (value.toLowerCase().includes("a")) {
    args.valid = false;
    args.message = "Text must not contain 'a'.";
  }
  else if (value.includes("2020")) {
    args.valid = false;
    args.message = "2020 not allowed.";
  }
}

var form = [
  {name: "Text", id: "text", onValidate: validateTextRequired },
  {name: "Note", id: "note", onValidate: validateTextRequired },
  {name: "Start", id: "start", type: "date", onValidate: validateTextRequired},
  {name: "End", id: "end", type: "date"},
  {name: "Resource", id: "resource", options: resources, onValidate: validateTextRequired},
];

var data = {
  start: "2020-11-01",
  end: "2020-11-02",
  resource: "B"
};

DayPilot.Modal.form(form, data).then(function(modal) {
  console.log(modal);
});