HTML5 Calendar/Scheduling Tutorials

This list includes tutorials about building interactive scheduling applications using JavaScript/HTML5 calendar and scheduler components. These tutorials guide you through the process of creating diverse scheduling systems. They cover the development of various applications, including shift planning systems, event calendars, hotel room booking systems, and annual leave schedulers.

You will learn how to use JavaScript with PHP, ASP.NET Core or Spring Boot to create intuitive, drag-and-drop interfaces. In addition, the tutorials delve into more advanced topics like filtering options, handling real-time zoom levels, and configuring advanced features like event targets. Get the skills to build versatile and user-friendly scheduling applications that leverage the capabilities of HTML5 and JavaScript.

ASP.NET Core Scheduler (.NET 8)
ASP.NET Core Scheduler (.NET 8)
How to use JavaScript/HTML5 Scheduler control from DayPilot Pro package in an ASP.NET Core web application.
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
A tutorial that shows how to create a PHP reservation system for hotel rooms with JavaScript/HTML5 frontend. The user interface includes a visual scheduling calendar with drag and drop support. MySQL and SQLite databases.
HTML5/JavaScript Event Calendar (Open-Source)
HTML5/JavaScript Event Calendar (Open-Source)
Weekly HTML5/JavaScript event calendar with CSS themes, drag and drop support, date navigator. Sample PHP and ASP.NET Core projects with REST backend implementation.
Tutorial: Machine/Production Job Scheduling Web Application (Spring/Java)
Tutorial: Machine/Production Job Scheduling Web Application (Spring/Java)
Tutorial with source code - a web application for scheduling dependent machine/production jobs, implemented in Spring Boot (Java).
Monthly Calendar in Spring Boot/Java (Open-Source)
Monthly Calendar in Spring Boot/Java (Open-Source)
Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.
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.
Weekly Event Calendar in Spring Boot/Java (Open-Source)
Weekly Event Calendar in Spring Boot/Java (Open-Source)
Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
Open-Source 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.
JavaScript Scheduler: Events as Drag and Drop Target
JavaScript Scheduler: Events as Drag and Drop Target
How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.
ASP.NET Core Weekly Calendar (Open-Source)
ASP.NET Core Weekly Calendar (Open-Source)
Simple ASP.NET Core web application that displays event data in a weekly calendar. Uses Entity Framework Core for data access.
JavaScript/HTML5 Scheduler: Filtering Rooms by Availability
JavaScript/HTML5 Scheduler: Filtering Rooms by Availability
How to filter rooms displayed in the JavaScript Scheduler component using a complex filter - by size and date availability.
HTML5 Scheduler: Hiding Rows without Events
HTML5 Scheduler: Hiding Rows without Events
How to hide Scheduler rows that have no events using row filtering feature.
ASP.NET Core Monthly Calendar (.NET 7, JavaScript/HTML5, Open-Source)
ASP.NET Core Monthly Calendar (.NET 7, JavaScript/HTML5, Open-Source)
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio 2022 project 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.
JavaScript Scheduler: Zoom
JavaScript Scheduler: Zoom
How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.
DayPilot in a Mobile App (Cordova/PhoneGap)
DayPilot in a Mobile App (Cordova/PhoneGap)
Using DayPilot HTML5 event calendar in a mobile application (iOS, Android, Windows Phone) created using Cordova/PhoneGap.
JavaScript/HTML5 Scheduler PDF Export (Paged by Month)
JavaScript/HTML5 Scheduler PDF Export (Paged by Month)
Simple HTML web application that exports the Scheduler to PDF (client-side).
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 Machine/Production Job Scheduling Application (MySQL)
PHP Machine/Production Job Scheduling Application (MySQL)
This tutorial shows how to create a PHP web application for machine/production job scheduling. The visual HTML5 scheduling grid displays task assignments, duration and dependencies. Users can use drag and drop to change the schedule.
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.
Articles 1-20 of 42 Next