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/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.
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.
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 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.
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 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.
JavaScript Scheduler: Dragging Items from Events
JavaScript Scheduler: Dragging Items from Events
How to drag items from events out of the Scheduler and drop it on a custom drop target. The source event data object is attached to the dragged item and can be read on drop.
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: 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.
JavaScript Scheduler: Displaying Holidays
JavaScript Scheduler: Displaying Holidays
How to configure the JavaScript Scheduler component to display custom holiday information and block drag and drop operations for the holiday cells.
Open-Source JavaScript Modal Dialog (DayPilot.Modal)
Open-Source JavaScript Modal Dialog (DayPilot.Modal)
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.
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.
JavaScript Calendar: Blocking Selected Dates
JavaScript Calendar: Blocking Selected Dates
Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.
JavaScript Scheduler: Warm-Up and Cool-Down Time
JavaScript Scheduler: Warm-Up and Cool-Down Time
How to add warm-up and cool-down time to Scheduler events. The additional time segments are stored and displayed automatically but drag and drop is only enabled for the core event.
JavaScript Scheduler: Displaying Group Availability
JavaScript Scheduler: Displaying Group Availability
How to show availability of child resources using color bars in the JavaScript Scheduler component.
JavaScript Scheduler: Skip Non-Business Cells during Drag and Drop
JavaScript Scheduler: Skip Non-Business Cells during Drag and Drop
How to add custom logic to the Scheduler component that skips non-business cells during drag and drop operations (event creating, event resizing, event moving).
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.
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.
JavaScript Scheduler: Resource Context Menu
JavaScript Scheduler: Resource Context Menu
How to add context menu to resources/rows of the JavaScript Scheduler (edit, delete, add child resource).
JavaScript Scheduler: Dynamic Event Loading (ASP.NET Core)
JavaScript Scheduler: Dynamic Event Loading (ASP.NET Core)
ASP.NET MVC Core project that uses JavaScript Scheduler component with dynamic event loading feature enabled. See what performance you can expect when displaying large data sets.
Articles 1-20 of 71 Next