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.

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.
JavaScript confirm() Replacement
JavaScript confirm() Replacement
Replace the built-in confirm() modal dialog with a more flexible implementation that allows using custom appearance and button text (e.g. Yes/No).
JavaScript Scheduler: Alternate Column Colors
JavaScript Scheduler: Alternate Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
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.
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.
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.
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.
JavaScript Scheduler: Dragging Files and Other Items from Desktop
JavaScript Scheduler: Dragging Files and Other Items from Desktop
How to configure the JavaScript Scheduler component to accept files dragged from the desktop. The file will be converted to a Scheduler event on drop.
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.
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 2019 project for download.
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.
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.
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue 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 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.
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.
React Work Order Planning System (PHP/MySQL)
React Work Order Planning System (PHP/MySQL)
React application that will let you assign queued work orders to a specific employee and time slot. Includes a PHP backend with MySQL storage.
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 Restaurant Table Reservation Application (HTML5/JavaScript Frontend)
PHP Restaurant Table Reservation Application (HTML5/JavaScript Frontend)
PHP application that lets you record restaurant table reservations and find a free table using a visual user interface. With MySQL database storage.
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.
Articles 1-20 of 115 Next