JavaScript Calendar and Scheduler Tutorials

Quick-start JavaScript Scheduler project using DayPilot Lite, a Vite frontend generated by the UI Builder, and a PHP 8 JSON API with SQLite by default and optional MySQL/PostgreSQL support.

Learn how to search React Scheduler events, highlight matching text, and jump between results using Next and Previous buttons in a React 19 application.

How to switch the visible date range displayed by the Vue.js Scheduler using Previous and Next buttons.

Use Vue templates to add custom content to calendar cells: text, icons, or even Vue components. Use v-if to display content only in the cells you choose.

How to display custom text above Scheduler events in a reserved space. Display details about the event start, end or other related information.

How to add warm-up and cool-down time to Scheduler events. The additional time segments are stored and displayed automatically but drag and drop is only enabled for the core event.

How to display a timesheet in a React application. Learn how to configure the time axis, hide non-business hours, add daily totals, and edit records using drag and drop.

React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP, with SQLite default storage and optional MySQL.

Vue application that shows how to integrate and configure a Gantt chart. The Gantt chart component displays a timeline for a hierarchy of tasks and milestones.

How to highlight related Scheduler events on hover or click.

How to add context menu to resources/rows of the JavaScript Scheduler (edit, delete, add child resource).

How to limit the horizontal (date/time) position of an event and display the allowed range using event versions.

HTML5 web application for managing doctor appointments. Includes public and administration interface. Patients can request an appointment in one of the slots predefined using the administration interface. Implemented in PHP/MySQL.

How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.

How to use JavaScript/HTML5 Scheduler control from DayPilot Pro package in an ASP.NET Core web application.

How to customize JavaScript Scheduler time headers using built-in groups, custom HTML, and active areas.

Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.

Simple web application that displays tennis court availability and lets the users create a reservation using drag and drop. Includes a PHP project with sample MySQL/SQLite database.

Adding touch-friendly controls to the JavaScript event calendar using active areas - move handle, resize handle, delete button, and context menu with SVG icons.

How to select and highlight calendar columns on header click.