Scheduler Web Component Tutorials

How to calculate resource utilization for time slots and show a bar chart in a fixed row displayed at the top of the Angular Scheduler component.

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.

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 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.

This tutorial explains how to create a visual ASP.NET Core application for scheduling shifts (multiple locations and employees). It uses a modern UI that lets you manage shifts using drag and drop.

ASP.NET Core application with drag and drop UI that lets you assign and schedule work orders. Includes a queue of unscheduled tasks, graphical team availability/utilization, context menu with additional actions, dialog for editing work order details.

Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.

Learn how to build an ASP.NET Core-based hotel room booking management application featuring a drag-and-drop interface, filter functionality, integration with SQL Server and Entity Framework, all visualized using a JavaScript Scheduler component.

PHP application that lets you record restaurant table reservations and find a free table using a visual user interface. With MySQL database storage.

Angular 21 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.

ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slots), and doctor (manage existing appointments).

How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.

Build a Next.js scheduler with a horizontal timeline (one year, day-by-day) featuring a date picker with scroll synchronization, a timeline header context menu for bulk day actions, and column highlighting.