Scheduler Web 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).

Vue Scheduler: Undo/Redo for Drag and Drop Actions
Vue Scheduler: Undo/Redo for Drag and Drop Actions
How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.
JavaScript Scheduler: Read-Only Mode
JavaScript Scheduler: Read-Only Mode
How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.
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.
JavaScript Scheduler: Alternating Column Colors
JavaScript Scheduler: Alternating Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
How to Add Interactive Elements to Vue Scheduler Events Using Templates
How to Add Interactive Elements to Vue Scheduler Events Using Templates
Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.
Vue Scheduler: Using Cell Templates to Show Slot Prices
Vue Scheduler: Using Cell Templates to Show Slot Prices
How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.
React JSX Components in Scheduler Grid Cells
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
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: Splitting an Event
JavaScript Scheduler: Splitting an Event
How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Use Angular lazy loading feature to improve the initial load time of your Scheduler application.
JavaScript Scheduler: Lock Events using Context Menu
JavaScript Scheduler: Lock Events using Context Menu
How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.
Using JavaScript/HTML5 Scheduler in Spring Boot (Open-Source)
Using JavaScript/HTML5 Scheduler in Spring Boot (Open-Source)
Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.
React Scheduler: Next/Previous Buttons
React Scheduler: Next/Previous Buttons
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.
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.
Angular Scheduler: Highlighting Holidays
Angular Scheduler: Highlighting Holidays
Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.
React Scheduler: TypeScript Project
React Scheduler: TypeScript Project
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
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.
React Scheduler: How to Enable Undo/Redo
React Scheduler: How to Enable Undo/Redo
The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.
Angular Scheduler with Horizontal Timeline (Open-Source)
Angular Scheduler with Horizontal Timeline (Open-Source)
Plan and visualize your resources in Angular with this lightweight, Apache‑licensed Scheduler - with a horizontal timeline, multi‑row time headers, CSS themes, dynamic event content and large‑dataset performance.
Articles 1-20 of 216 Next