JavaScript Calendar and Scheduler Tutorials

Drag and drop monthly event calendar for JavaScript/HTML5. Full calendar CSS styling support. Includes a sample PHP backend with SQL database.

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

How to configure the JavaScript Scheduler component to accept files dragged from the desktop. The file will be converted to a Scheduler event on drop.

How to make parallel HTTP requests, wait for all of them to complete and update the JavaScript Scheduler once.

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

How to implement mult-criteria column filtering in JavaScript resource calendar component. Filter the resource columns by text and category.

Spring Boot application for project management that uses DayPilot Pro to display a Gantt chart.

How to load HTML5 scheduler events from the server dynamically during scrolling. Includes a sample PHP server backend.

A simple HTML5/JavaScript web application that exports the current view of the JavaScript Calendar component (including appointments) as a PDF document. Pure client-side solution.

HTML5 sample that shows how to export the JavaScript Scheduler to multi-page PDF file (5 rows per page).

How to export the monthly calendar to a PDF document using the built-in image export feature. Adds custom text to the exported PDF file.

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

Interactive event calendar for JavaScript/HMTL5 with support for drag and drop operations. Full calendar CSS styling support. Includes a sample PHP backend with SQL database.

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.

How to enable keyboard navigation in the JavaScript Scheduler component. Use the keyboard to focus cells in the grid, select a time range and edit existing events.

How to add a special row to the JavaScript Scheduler time header that will let users select multiple columns using drag and drop.

How to display time separators in the time header of the JavaScript Scheduler (in addition to the Scheduler grid).

How to add DayPilot context menu to any DOM element.

Use a dynamically-generated context menu to show/hide data columns of the JavaScript Gantt chart.

How to customize the JavaScript Scheduler row sorting feature. You can define custom sort icons (Font Awesome or other icon sets or custom images), disable sorting for selected events, and adjust the sorting logic.