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.

DayPilot.Modal: Open-Source JavaScript Modal Dialog
DayPilot.Modal: Open-Source JavaScript Modal Dialog
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.
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.
PHP Machine/Production Job Scheduling Application (MySQL)
PHP Machine/Production Job Scheduling Application (MySQL)
This tutorial shows how to create a PHP web application for machine/production job scheduling. The visual HTML5 scheduling grid displays task assignments, duration and dependencies. Users can use drag and drop to change the schedule.
JavaScript Scheduler: Context Menu for External Items
JavaScript Scheduler: Context Menu for External Items
How to add DayPilot context menu to any DOM element.
JavaScript Calendar: Selecting and Highlighting Columns
JavaScript Calendar: Selecting and Highlighting Columns
How to select and highlight calendar columns on header click.
JavaScript Scheduler: Select a Time Range over Multiple Rows
JavaScript Scheduler: Select a Time Range over Multiple Rows
The JavaScript Scheduler allows selecting a time range over multiple adjacent rows at once.
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.
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 Gantt Chart: Show/Hide Columns using Context Menu
JavaScript Gantt Chart: Show/Hide Columns using Context Menu
Use a dynamically-generated context menu to show/hide data columns of the JavaScript Gantt chart.
JavaScript Scheduler: Show/Hide Columns using Context Menu
JavaScript Scheduler: Show/Hide Columns using Context Menu
How to add a context menu to the JavaScript Scheduler header that will let users toggle column visibility.
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.
JavaScript Scheduler: Row Sorting Customization
JavaScript Scheduler: Row Sorting Customization
How to customize the JavaScript Scheduler row sorting feature. You can define custom sort icons (Font Awesome or other icon sets or custom images), disable sorting for selected events, and adjust the sorting logic.
HTML5 Scheduler: Splitting an Event
HTML5 Scheduler: Splitting an Event
Split events in HTML5 Scheduler at a specified location using right-click context menu.
JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog
JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog
How to create a modal dialog with custom fields and let users edit JavaScript Scheduler events on click. The modal dialog fields are defined programmatically using an array.
Vue.js Scheduler: Changing Visible Date
Vue.js Scheduler: Changing Visible Date
How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.
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: Row Sorting Tutorial
JavaScript Scheduler: Row Sorting Tutorial
How to sort the Scheduler rows using custom fields. Use built-in row sorting support that displays icons in the column headers or direct API.
React Calendar: Rendering JSX in Events
React Calendar: Rendering JSX in Events
How to render custom JSX components in events displayed by the React Calendar component.
JavaScript Scheduler: Displaying Text above Events
JavaScript Scheduler: Displaying Text above Events
How to display custom text above Scheduler events in a reserved space. Display details about the event start, end or other related information.
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).
Articles 1-20 of 97 Next