JavaScript Scheduling Tutorials

This page lists tutorials that show how to create a scheduling web application for various fields, such as internal company use (timesheetproductionshared resource reservation), services (doctor appointment schedulinghotel room reservation), and project management.

Beginners can start with basic tutorials that explain the basic concepts like installation and initial configuration of the the components (e.g. HTML5 Scheduler). Experienced users can continue with more advanced projects that show how to use the Scheduler in a real-world scenario. There are also tutorials that demonstrate specific features of the scheduler and calendar components (dynamic loadingPDF exportinfinite scrolling). If you are looking for a specific use case which is missing, you can drop us a note in the forum.

All tutorials include a downloadable project with source code. You can use the project source code to start your own implementation and save some time with the initial setup and configuration. The tutorial text explains the key areas of the code and shows different views and options using screenshots.

The projects use HTML5 and plain JavaScript interface for the frontend (UI). Most of the tutorial use PHP as the server-side technology for the backend (REST API), but there are also tutorials for other server-side technologies (ASP.NET CoreSpring Boot).

There is also an online configurator tool available that lets you customize selected properties of the components. It shows the changes immediately using a live preview. You can use it to create a quick proof-of-concept project - the configurator will generate a downloadable project that includes the dependencies and the selected component configuration.

In addition to vanilla JavaScript, DayPilot also supports popular JavaScript client-side frameworks, including AngularJSAngularReact, and Vue.js.

DayPilot.Modal: Open-Source JavaScript Modal Dialog
DayPilot.Modal: Open-Source JavaScript Modal Dialog
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.
AJAX Scheduler for JavaScript/PHP
AJAX Scheduler for JavaScript/PHP
This tutorial shows how to use DayPilot AJAX Scheduler to create a JavaScript/HTML5 event scheduler application with PHP backend.
React Weekly Calendar Tutorial
React Weekly Calendar Tutorial
React application that displays a weekly event calendar using DayPilot React calendar component. Includes a date picker for changing the visible week. Appearance customized using CSS.
Monthly Event Calendar for JavaScript/HTML5/PHP
Monthly Event Calendar for JavaScript/HTML5/PHP
Drag and drop monthly event calendar for JavaScript/HTML5. Full calendar CSS styling support. Includes a sample PHP backend with SQL database.
Using JavaScript/HTML5 Event Calendar in Spring Boot (Java)
Using JavaScript/HTML5 Event Calendar in Spring Boot (Java)
Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar.
HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.
HTML5 Monthly Calendar and ASP.NET Core
HTML5 Monthly Calendar and ASP.NET Core
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio 2017 project for download.
HTML5/JavaScript Gantt Chart (PHP, MySQL)
HTML5/JavaScript Gantt Chart (PHP, MySQL)
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.
JavaScript/HTML5 Timesheet (PHP, MySQL)
JavaScript/HTML5 Timesheet (PHP, MySQL)
How to create a timesheet using the JavaScript/HTML5 timesheet component. Sample PHP/MySQL application source code for download.
HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)
HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)
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.
Using JavaScript/HTML5 Scheduler in Spring Boot (Java)
Using JavaScript/HTML5 Scheduler in Spring Boot (Java)
Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.
React Scheduler Tutorial
React Scheduler Tutorial
Add a scheduler UI component to your React application in a few easy steps. Fast data loading, drag and drop, appearance customization options.
PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)
PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)
PHP web application that allows to plan annual leave days using a visual HTML5 scheduler component.
PHP Tennis Court Reservation (HTML5/JavaScript Frontend, MySQL Database)
PHP Tennis Court Reservation (HTML5/JavaScript Frontend, MySQL Database)
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.
JavaScript Resource Calendar Tutorial (PHP/MySQL)
JavaScript Resource Calendar Tutorial (PHP/MySQL)
How to use HTML5/JavaScript resource calendar component to create a dynamic schedule. The calendar loads data (resources and events) using a REST API that is implemented using PHP and MySQL.
JavaScript Scheduler: Swapping Events (Drag and Drop)
JavaScript Scheduler: Swapping Events (Drag and Drop)
How to implement event swapping using drag an drop in the JavaScript Scheduler component. Detect events at the target position and move the target event to the source position after drop. The Scheduler provides real-time feedback during dragging.
JavaScript Scheduler: Keyboard Navigation
JavaScript Scheduler: Keyboard Navigation
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.
HTML5 Scheduler
HTML5 Scheduler
HTML5 scheduler with drag and drop support. Displays a timeline for multiple resources grouped by category. Sample PHP project with AJAX backend implementation. Uses MySQL to store the scheduler data.
PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)
PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)
A tutorial that shows how to create a PHP shift planning system - a web application that lets you manage shifts for multiple locations using a visual JavaScript scheduler component.
HTML5 Hotel Room Booking (JavaScript, PHP, MySQL)
HTML5 Hotel Room Booking (JavaScript, PHP, MySQL)
Tutorial with source code - PHP web application for hotel room reservation with HTML5 user interface supporting drag and drop. MySQL and SQLite databases.
Articles 1-20 of 105 Next