Scheduler Web Component Tutorials

Back to Scheduler Web Component Tutorials

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.

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

Angular 21 Scheduler Quick Start Project

A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 21 calendar/scheduler application.

angular scheduler typescript quick-start angular21 zoneless

Dec 1, 2025

JavaScript Scheduler with Horizontal Timeline (Open-Source)

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.

javascript scheduler open-source timeline

Oct 10, 2025

JavaScript Scheduler: How to Integrate a Date Picker

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

javascript scheduler navigator date-picker open-source

Oct 10, 2025

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.

vuejs scheduler undo javascript open-source

Oct 6, 2025

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 read-only open-source

Oct 5, 2025

JavaScript Scheduler: Alternating Column Colors

How to set alternating colors for JavaScript Scheduler columns (time headers and grid).

javascript html5 scheduler open-source

Oct 4, 2025

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.

javascript vuejs vue3 scheduler template open-source

Oct 2, 2025

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.

vuejs vue3 scheduler template javascript open-source

Oct 2, 2025

React JSX Components in Scheduler Grid Cells

How to render custom React JSX component in the Scheduler grid cells.

react react19 jsx scheduler customization javascript open-source

Oct 2, 2025

JavaScript Scheduler: Splitting an Event

How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.

javascript html5 scheduler open-source

Sep 24, 2025

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.

javascript scheduler context-menu open-source

Sep 23, 2025

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 html5 scheduler spring-boot java open-source

Sep 19, 2025

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.

react scheduler javascript react19 open-source

Sep 18, 2025

Previous Articles 21-40 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.