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.

HTML5 Tennis Court Reservation (PHP, MySQL, JavaScript)
HTML5 Tennis Court Reservation (PHP, MySQL, JavaScript)
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 SQLite database.
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 scheduler component.
HTML5 Scheduler: Splitting an Event
HTML5 Scheduler: Splitting an Event
Split events in HTML5 Scheduler at a specified location using right-click context menu.
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.
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 MVC projects with AJAX backend implementation.
HTML5 Machine/Production Job Scheduling Tutorial (PHP/MySQL)
HTML5 Machine/Production Job Scheduling Tutorial (PHP/MySQL)
PHP web application for machine/production job scheduling. Displays job assignments using a scheduler HTML5 component (including duration and dependencies). Works with MySQL database.
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.
React Monthly Calendar Tutorial
React Monthly Calendar Tutorial
React application that displays a monthly event calendar. Calendar events use custom background to show event type. Use a context menu to delete events and change color.
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.
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.
HTML5 Scheduler: Infinite Scrolling
HTML5 Scheduler: Infinite Scrolling
Simple HTML5/PHP web application that shows how to enable infinite scrolling for the Scheduler UI component.
Vue.js Gantt Chart Tutorial
Vue.js Gantt Chart Tutorial
Vue.js application that shows how to integrate and configure a Gantt chart. The Gantt chart component displays a timeline for a hierarchy of tasks and milestones.
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.
Vue.js Weekly Calendar Tutorial
Vue.js Weekly Calendar Tutorial
How to create weekly calendar Vue.js component in a web application. Includes a sample Vue.js project with JavaScript source code for download.
Creating JSON Backend for JavaScript Calendar in ASP.NET (C#)
Creating JSON Backend for JavaScript Calendar in ASP.NET (C#)
ASP.NET application that uses JavaScript calendar component with custom JSON endpoints (implemented by overriding Web Form pages).
JavaScript Calendar Online Configurator
JavaScript Calendar Online Configurator
Configure the JavaScript calendar component using an online configurator app and generate a ready-to-run HTML5/JavaScript project that includes all dependencies.
JavaScript Calendar: PDF Export Tutorial
JavaScript Calendar: PDF Export Tutorial
A simple HTML5/JavaScript web application that exports the current view of the JavaScript Calendar component (including appointments) as a PDF document. Pure client-side solution.
Vue.js Scheduler: Build a Reservation Application in 5 Minutes
Vue.js Scheduler: Build a Reservation Application in 5 Minutes
Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.
HTML5/JavaScript Scheduler: Online Configurator
HTML5/JavaScript Scheduler: Online Configurator
Use an online configurator to customize JavaScript scheduler component user interface. Generate and download a ready-to-run project.
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 49 Next