Scheduler Web Component Tutorials

How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.

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.

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

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.

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.

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

How to split events in the JavaScript Scheduler at a specified location using the right-click 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.

Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.

Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.

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.

How to create a drag-and-drop timesheet application in ASP.NET Core (.NET 9) with SQL Server and Entity Framework.

Learn how to build an interactive scheduling application in Laravel using the DayPilot JavaScript Scheduler with a dynamic timeline, draggable events, and resource grouping.

How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.

How to export the Scheduler view to Angular, including frozen time headers (X axis) and row headers (Y axis). Add a custom row with utilization summary to the frozen headers.

Learn how to use the visual Scheduler component to build a restaurant table reservation application in ASP.NET Core. Create an intuitive UI that makes it easy to assign reservation requests to available tables.

How to build a visual schedule in Next.js that displays the planned version of a task above its actual version. This makes it easy to compare durations and track deviations from the original plan.

HTML5 scheduler with drag and drop support. It displays a timeline for multiple resources grouped by category. PHP project with REST API backend and MySQL/SQLite storage is available for download.

How to create a new LWC component with DayPilot Scheduler and deploy it to your Salesforce org.