JavaScript Calendar and Scheduler Tutorials

Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.

How to implement a toggle that switches between the read-only and edit modes of the JavaScript Calendar. Read-only events are marked with a padlock icon in the upper-right corner.

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

How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.

Use the 100% height mode of the calendar to avoid duplicate vertical scrollbars and keep headers fixed.

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.

How to build an ASP.NET Core application for visual workforce scheduling. Integrate a queue of unscheduled orders and a scheduling calendar that displays staff as columns.

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.

React application that will let you assign queued work orders to a specific employee and time slot. Includes a PHP backend with MySQL storage.

HTML5/JavaScript Gantt chart control that lets you display a timeline for a hierarchy of tasks and milestones. Task dependencies, drag and drop support, inline task creating, custom CSS themes. Sample PHP/MySQL project available for download.

Learn how to style linked events in the JavaScript Scheduler component to visualize dependencies and relationships.

Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.

Simple HTML5/PHP web application that shows how to enable infinite scrolling for the Scheduler UI component.

How to create a timesheet using the JavaScript/HTML5 timesheet component. Sample PHP/MySQL application source code for download.

ASP.NET Core project that uses JavaScript Scheduler component with dynamic event loading feature enabled. See what performance you can expect when displaying large data sets.

How to create a queue of tasks scheduled for a specific day. The exact time of day and resource can be assigned using drag and drop in the next step.