JSX Tutorials

How to integrate the React Scheduler component into a full screen page layout. The full screen mode will allow rendering optimizations to be applied correctly and avoid a confusing duplicate vertical scrollbar.

How to render custom React JSX components in the Scheduler time header and upper-left corner.

How to insert React components or direct JSX into Scheduler row headers.

How to activate external items so they can be dragged to the React Scheduler component.

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

Simple React application that displays a project schedule using a Gantt Chart component.

Add a scheduler UI component to your React 19 application using the current DayPilot builder template. Covers one-year timeline setup, row headers, filtering, drag and drop, and context menu customization.

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

Learn how to search React Scheduler events, highlight matching text, and jump between results using Next and Previous buttons in a React 19 application.

How to display a timesheet in a React application. Learn how to configure the time axis, hide non-business hours, add daily totals, and edit records using drag and drop.

React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP, with SQLite default storage and optional MySQL.

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

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

React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.

This Next.js app uses a resource-scheduling calendar UI to let you manage tasks for multiple resources side by side. Each column displays a 24-hour timeline for a different resource.

React application that displays a weekly event calendar using the open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using 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 render custom React JSX component in the Scheduler grid cells.

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.

React application that will let you assign queued work orders to a specific employee and time slot. Includes a PHP backend with MySQL storage.