Scheduler Component Tutorials

Below, you can find a list of tutorials that show how to use the Scheduler UI component to create scheduling, reservation and project management web applications.

All tutorials include a downloadable project with source code which you can use to build your own solution. The tutorial text explains how to install, configure and customize the scheduler component.

See also Scheduler UI Builder - an online configurator application that lets you customize the Scheduler and generate a web project as a zip file (JavaScript/HTML5, Angular, React and Vue.js projects are supported).

Angular Scheduler: Row Searching Tutorial
Angular Scheduler: Row Searching Tutorial
How to find, focus and highlight a Scheduler row that matches the search criteria.
JavaScript Scheduler: Alternate Column Colors
JavaScript Scheduler: Alternate Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
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.
Angular Scheduler: Next/Previous Buttons
Angular Scheduler: Next/Previous Buttons
Angular 12 project that shows how to implement next/previous/today buttons that change the month displayed by the Angular Scheduler component.
ASP.NET Hotel Room Booking Tutorial (C#, VB, SQL Server)
ASP.NET Hotel Room Booking Tutorial (C#, VB, SQL Server)
ASP.NET web application for managing hotel room reservations using drag and drop. Includes sample code in C# and VB. SQL Server database.
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
A tutorial that shows how to create a PHP reservation system for hotel rooms with JavaScript/HTML5 frontend. The user interface includes a visual scheduling calendar with drag and drop support. MySQL and SQLite databases.
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.
Using JavaScript/HTML5 Scheduler in Spring Boot (Java)
Using JavaScript/HTML5 Scheduler in Spring Boot (Java)
Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.
Angular Scheduler: Row Header Actions
Angular Scheduler: Row Header Actions
How to add action controls to the Angular Scheduler row headers: clickable icons, hyperlinks, context menu buttons.
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.
Angular Scheduler: CSS Themes
Angular Scheduler: CSS Themes
How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.
Angular Scheduler: Loading 400,000 Events
Angular Scheduler: Loading 400,000 Events
Test the performance of the Angular Scheduler component with 400,000 events loaded at once.
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.
Angular Scheduler: Timeline Customization
Angular Scheduler: Timeline Customization
How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.
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.
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.
Angular 12 Scheduler Quick Start Project
Angular 12 Scheduler Quick Start Project
Angular 12 project with a customized Angular Scheduler component. Use this project as a starting point for your own Angular scheduling application.
React Work Order Planning System (PHP/MySQL)
React Work Order Planning System (PHP/MySQL)
React application that will let you assign queued work orders to a specific employee and time slot. Includes a PHP backend with MySQL storage.
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.
Angular Scheduler: Row Filtering
Angular Scheduler: Row Filtering
Angular 12 application with real-time filtering of Scheduler component rows (by name, by number of events).
Articles 1-20 of 154 Next