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.

JavaScript Scheduler: Pushing Existing Events Forward (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Forward (Drag and Drop)
How to configure the JavaScript Scheduler component to automatically move events at the target location during drag and drop.
Vue.js Scheduler Quick Start Tutorial
Vue.js Scheduler Quick Start Tutorial
Vue.js project that includes Scheduler component with basic configuration and all required boilerplate code.
JavaScript Scheduler: Alternate Column Colors
JavaScript Scheduler: Alternate Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
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.
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.
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.
JavaScript Scheduler: Undo/Redo
JavaScript Scheduler: Undo/Redo
Client-side undo/redo implementation for the JavaScript scheduler component. Displays the action history and the current position in the list.
JavaScript Resource Calendar: Column Filtering
JavaScript Resource Calendar: Column Filtering
How to implement mult-criteria column filtering in JavaScript resource calendar component. Filter the resource columns by text and category.
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.
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.
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.
Articles 1-20 of 54 Next