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: 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).
JavaScript prompt() Replacement
JavaScript prompt() Replacement
Use an improved prompt() replacement to add more flexibility to the single-input modal dialog.
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.
JavaScript Scheduler: Limited Drag and Drop Range
JavaScript Scheduler: Limited Drag and Drop Range
How to limit the horizontal (date/time) position of an event and display the allowed range using event versions.
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
How to display React JSX components in the Scheduler horizontal time header.
React Scheduler: Rendering JSX in Events
React Scheduler: Rendering JSX in Events
How to render custom JSX in events displayed by the React Scheduler component.
JavaScript Scheduler: Expandable Event Groups
JavaScript Scheduler: Expandable Event Groups
How to group related events into a single event in the JavaScript Scheduler component and add expand [+] and collapse [-] icons that allow changing the event visibility.
JavaScript Scheduler: Highlighting Related Events
JavaScript Scheduler: Highlighting Related Events
How to highlight related Scheduler events on hover or click.
JavaScript Scheduler: How to Export HTML to Image
JavaScript Scheduler: How to Export HTML to Image
How to configure the image export of the JavaScript Scheduler to include rich HTML content.
JavaScript alert() Replacement
JavaScript alert() Replacement
Simple helper for replacing alert() with a more flexible HTML-based modal dialog with support for CSS styling.
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/HTML5 Scheduler: Filtering Rooms by Availability
JavaScript/HTML5 Scheduler: Filtering Rooms by Availability
How to filter rooms displayed in the JavaScript Scheduler component using a complex filter - by size and date availability.
Articles 1-20 of 91 Next