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.
Jan 15, 2025
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:
React Shift Scheduling Application (PHP/MySQL Backend)
React Work Order Planning System (PHP/MySQL)
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.
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.
Dec 13, 2024
Links can be used to display relationships between tasks in the React Scheduler UI component. Learn about the most common use cases and configuration options.
Dec 5, 2024
Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.
Nov 21, 2024
Learn how to build a customized monthly calendar UI in Next.js 15 using the open-source DayPilot scheduling library.
Nov 17, 2024
React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP and MySQL.
Oct 9, 2024
How to move the React Scheduler events to the background so they can be used to display additional time slot information.
Sep 14, 2024
How to insert React components or direct JSX to Scheduler row headers.
Aug 16, 2024
React application that will let you assign queued work orders to a specific employee and time slot. Includes a PHP backend with MySQL storage.
Aug 11, 2024
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
Jul 31, 2024
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.
Jul 30, 2024
How to display a timesheet in your React application. You can set a custom resolution of the time axis, specify the number of days to be displayed, calculate daily totals. The timesheet lets you modify the records using drag and drop.
Jul 28, 2024
Simple React application that displays a project schedule using a Gantt Chart component.
Jul 23, 2024
Add a scheduler UI component to your React application in a few easy steps. Fast data loading, drag and drop, appearance customization options.
Jul 17, 2024
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.
Jul 9, 2024
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.
Jul 4, 2024
Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.
Jun 27, 2024
This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.
Jun 16, 2024
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
Jun 13, 2024
How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.
Jan 29, 2024
Articles 1-20 of 40
Next