Scheduler Web Component Tutorials

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.

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.

Use Angular lazy loading feature to improve the initial load time of your Scheduler application.

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.

How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.

How to render custom JSX in events displayed by the React Scheduler component.

Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.

Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.

Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.

This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.

How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.

How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.

Build a horizontal, resource-based timeline using the open-source Vue Scheduler and customize event appearance with Vue templates and CSS.

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.

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.

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.

How to link the JavaScript Scheduler component to a date picker that can change the visible date.