Scheduler Web Component Tutorials

Back to Scheduler Web Component Tutorials

JavaScript Scheduler: Switching Day/Week/Month Views

How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.

Mar 21, 2026

Next.js Scheduler with Horizontal Timeline (Open-Source)

Build a Next.js scheduler with a horizontal timeline (one year, day-by-day) featuring a date picker with scroll synchronization, a timeline header context menu for bulk day actions, and column highlighting.

next.js nextjs16 react react19 typescript scheduler timeline open-source

Feb 14, 2026

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.

html5 javascript scheduler php hotel reservation mysql row-header-columns

Feb 11, 2026

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 angular21 scheduler css theme zoneless open-source

Jan 30, 2026

Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)

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

angular angular21 scheduler performance lazy-loading code-splitting typescript open-source

Jan 25, 2026

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 customization open-source

Jan 24, 2026

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.

javascript scheduler drag-drop open-source

Jan 24, 2026

React Scheduler: Rendering JSX in Events

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

react react19 scheduler javascript jsx open-source

Jan 23, 2026

Angular Scheduler: Highlighting Holidays

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

angular angular21 scheduler holidays typescript open-source zoneless

Jan 16, 2026

JavaScript Scheduler: Use Diagonally Split Cells for Check-In/Check-Out

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.

javascript scheduler reservation open-source

Jan 14, 2026

How to Use CSS Themes with the React Scheduler Component

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

react scheduler css theme javascript react19 open-source

Jan 9, 2026

React Scheduler: TypeScript Project

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

react scheduler typescript react19 open-source

Jan 7, 2026

Next.js Scheduler with DayPilot: A Step-by-Step Guide

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

next.js react scheduler typescript nextjs16

Jan 6, 2026

React Scheduler: Timeline Zoom

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.

react scheduler zoom timeline javascript react19 open-source

Dec 15, 2025

JavaScript Scheduler: Date Picker in the Upper-Left Corner

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.

javascript scheduler datepicker open-source

Dec 14, 2025

Vue Scheduler with Horizontal Timeline (Open-Source)

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

vuejs vue3 javascript scheduler open-source timeline

Dec 13, 2025

How to Add Custom Progress Bar to React Scheduler Events

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

react scheduler jsx javascript react19 open-source

Dec 7, 2025

JavaScript Scheduler: Use Custom Button to Scroll to Next Event

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

javascript scheduler open-source

Dec 2, 2025

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.

angular scheduler angular21 open-source timeline zoneless

Dec 1, 2025

JavaScript Scheduler: Zoom (Open-Source)

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

javascript scheduler zoom html5 open-source

Dec 1, 2025

Previous Articles 41-60 of 220 Next

Products

Resources

Tools

About Us

Contact

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.