Documentation

Modal Form

DayPilot.Modal.form() lets you programmatically create a modal dialog with custom form fields.

Form Fields

Interactive fields:

• Text (single-line text)

• Text area (multi-line text)

• Select (drop-down list)

• Searchable (searchable drop-down list)

• Date (date field with a date picker)

• Time (time picker)

• Date/time (combined date and time fields)

• Checkbox

• Checkbox with children

• Radio (list of options)

• Radio with children

• Table (tabular data)

Read-only fields:

• Title

• Image

• Inline text

• Inline HTML

• Scrollable HTML

Field properties:

• Automatic field type detection

• Disabled fields

• Field value validation

Data object

How to map form fields to data object properties

Validation

Add a custom validator that prevents submission

Buttons

• Rename default fields

Localization

• Setting a locale

• Date/time field format

Styling

• CSS Theme

• Overriding Selected Styles

• Default CSS theme

Plugins - Adding custom form fields

Tutorials

Introduction

• DayPilot Modal Overview

JavaScript

• JavaScript alert() Replacement

• JavaScript confirm() Replacement

• JavaScript prompt() Replacement

Angular/TypeScript

• Using DayPilot Modal in Angular Application

API Docs

• https://api.daypilot.org/daypilot-modal-class/