JavaScript Scheduler Tutorials

Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.

Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.

How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

How to link the JavaScript Scheduler component to a date picker that can change the visible date.

How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.

How to set alternating colors for JavaScript Scheduler columns (time headers and grid).

How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.

How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.

Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.

Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

Learn how to build an interactive scheduling application in Laravel using the DayPilot JavaScript Scheduler with a dynamic timeline, draggable events, and resource grouping.

Learn how to use the visual Scheduler component to build a restaurant table reservation application in ASP.NET Core. Create an intuitive UI that makes it easy to assign reservation requests to available tables.

HTML5 scheduler with drag and drop support. It displays a timeline for multiple resources grouped by category. PHP project with REST API backend and MySQL/SQLite storage is available for download.

How to create a new LWC component with DayPilot Scheduler and deploy it to your Salesforce org.

This tutorial shows how to create a PHP application that will let users manage and schedule work orders using a visual interface implemented using JavaScript/HTML5.

How to sort the Scheduler rows using custom fields. You can use the built-in row sorting support that displays icons in the column headers or the direct API.

PHP web application that allows to plan annual leave days using a visual HTML5 scheduler component.