Modal Dialog Tutorials

How to use the scheduler with ModalPopupExtender to create and edit reservations in a modal dialog.

How to use the event calendar and ModalPopupExtender to create new events and edit existing events in a modal dialog.

Replace the built-in confirm() modal dialog with a more flexible implementation that allows using custom appearance and button text (e.g. Yes/No).

Use an improved prompt() replacement to add more flexibility to the single-input modal dialog.

Simple helper for replacing alert() with a more flexible HTML-based modal dialog with support for CSS styling.

Open-source JavaScript modal dialog with rich features. It can display custom HTML or a standalone page. Supports drag&drop moving and automatic height adjustment.

DayPilot Modal is now available as a NPM package (@daypilot/modal) and can be used in Angular applications as well.

How to create a modal dialog with custom fields and let users edit JavaScript Scheduler events on click. The modal dialog fields are defined programmatically using an array.

Angular 6 project with Scheduler component that allows creating and editing events using a modal dialog.

Simple web application that shows how to use a modal dialog to create and edit JavaScript Scheduler events. Includes PHP source code for download.