React is a powerful framework created by Facebook. It provides great performance by enforcing the object immutability rule which ensures great efficiency of React change detection mechanism. The JSX syntax lets you use HTML directly in the JavaScript or TypeScript code.
Here is a collection of React tutorials that show how to use DayPilot scheduling components in React and Next.js applications. The React components are available in daypilot-pro-react package. You can add this package as a dependency (NPM module) to your package.json file using your favorite package manager (npm or yarn) and it will be downloaded automatically. DayPilot NPM packages are available at npm.daypilot.org.
Every tutorial includes a React project with source code that you can download and run on your own machine. Important parts of the source code are explained in the tutorial text. You can use the tutorial code as a starting point for your own implementation.
Most popular tutorials:
You can also use the UI Builder online configurator application to customize the component properties (including appearance and behavior) using a visual tool that provides immediate feedback in a live preview. You can generate and download a complete React project with the component integrated (including your customizations).
See also the documentation for React Scheduler, React Event Calendar, React Monthly Calendar components.
Since version 2024.4, DayPilot supports React 19, in addition to React 18 and previous versions. React is supported by the open-source version of DayPilot as well.
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.
Apr 20, 2026
This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.
Apr 19, 2026
Learn how to search React Scheduler events, highlight matching text, and jump between results using Next and Previous buttons in a React 19 application.
Apr 18, 2026
Open-source React Scheduler with a readable year-view timeline, theme switching, editable events, and custom event rendering.
Apr 17, 2026
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.
Apr 14, 2026
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.
Apr 14, 2026
How to render custom React JSX components in the Scheduler time header and upper-left corner.
Apr 9, 2026
Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.
Apr 8, 2026
Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.
Mar 23, 2026
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.
Feb 14, 2026
Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.
Jan 23, 2026
How to render custom JSX in events displayed by the React Scheduler component.
Jan 23, 2026
How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.
Jan 20, 2026
How to use a popup date picker to select a date displayed by the React Calendar component.
Jan 15, 2026
How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.
Jan 10, 2026
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.
Jan 10, 2026
Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.
Jan 9, 2026
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.
Jan 8, 2026
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
Jan 7, 2026
Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.
Jan 6, 2026
DayPilot
