React Calendar and Scheduler Tutorials

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 Scheduler with Horizontal Timeline (Open-Source)

• React Weekly Calendar Tutorial (Open-Source)

• React Calendar with Day/Week/Month Views (Open-Source)

• React Scheduler Tutorial

• React Monthly Calendar Tutorial

• React Shift Scheduling Application (PHP/MySQL Backend)

• React Work Order Planning System (PHP/MySQL)

• React Gantt Chart Tutorial

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.