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: Find Next Free Slot
JavaScript Scheduler: Find Next Free Slot
Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.
JavaScript Scheduler: Copy Multiple Events
JavaScript Scheduler: Copy Multiple Events
Copy multiple Scheduler events using copy & paste or using drag and drop.
React: Activity Planning System (Node, Express, PostgreSQL)
React: Activity Planning System (Node, Express, PostgreSQL)
Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.
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: Wait for Parallel HTTP Requests to Complete
JavaScript Scheduler: Wait for Parallel HTTP Requests to Complete
How to make parallel HTTP requests, wait for all of them to complete and update the JavaScript Scheduler once.
JavaScript Scheduler: Event Types
JavaScript Scheduler: Event Types
How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.
React Shift Scheduling Application (PHP/MySQL Backend)
React Shift Scheduling Application (PHP/MySQL Backend)
React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP and MySQL.
JavaScript prompt() Replacement
JavaScript prompt() Replacement
Use an improved prompt() replacement to add more flexibility to the single-input modal dialog.
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.
Production Workflow Scheduling Tutorial (ASP.NET Core)
Production Workflow Scheduling Tutorial (ASP.NET Core)
Schedule manufacturing jobs by assigning tasks to individual machines using drag and drop. Includes an ASP.NET Core application for download, data is stored in an SQL Server database.
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.
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.
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: Switching Day/Week/Month Views
JavaScript Scheduler: Switching Day/Week/Month Views
How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.
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.
React Scheduler: Rendering JSX Components in Row Headers
React Scheduler: Rendering JSX Components in Row Headers
How to insert React components or direct JSX to Scheduler row headers.
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.
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
How to configure the JavaScript Scheduler component to automatically move events at the target location during drag and drop.
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.
Tutorial: JavaScript Scheduler Time Header Customization
Tutorial: JavaScript Scheduler Time Header Customization
How to draw a custom timeline in the DayPilot Pro JavaScript Scheduler time header.
Articles 1-20 of 114 Next