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.
Jul 12, 2020
Back to JavaScript Scheduling Tutorials
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.
Jul 12, 2020
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.
Jul 6, 2020
How to add DayPilot context menu to any DOM element.
Jul 3, 2020
How to select and highlight calendar columns on header click.
Jun 29, 2020
The JavaScript Scheduler allows selecting a time range over multiple adjacent rows at once.
Jun 1, 2020
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.
May 21, 2020
Tutorial with source code - PHP web application for hotel room reservation with HTML5 user interface supporting drag and drop. MySQL and SQLite databases.
May 13, 2020
Use a dynamically-generated context menu to show/hide data columns of the JavaScript Gantt chart.
Apr 24, 2020
How to add a context menu to the JavaScript Scheduler header that will let users toggle column visibility.
Apr 22, 2020
How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.
Apr 12, 2020
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.
Mar 25, 2020
Split events in HTML5 Scheduler at a specified location using right-click context menu.
Mar 24, 2020
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.
Mar 16, 2020
How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.
Feb 26, 2020
How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.
Feb 12, 2020
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.
Feb 7, 2020
How to render custom JSX components in events displayed by the React Calendar component.
Feb 4, 2020
How to display custom text above Scheduler events in a reserved space. Display details about the event start, end or other related information.
Jan 20, 2020
Replace the built-in confirm() modal dialog with a more flexible implementation that allows using custom appearance and button text (e.g. Yes/No).
Dec 18, 2019