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:

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 SchedulerReact Event CalendarReact Monthly Calendar components.

Since version 2022.2, DayPilot supports React 18 as well. React is supported by the open-source version of DayPilot as well.

React Scheduler with a Vertical Timeline
React Scheduler with a Vertical Timeline
How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.
Next.js Scheduler with DayPilot: A Step-by-Step Guide
Next.js Scheduler with DayPilot: A Step-by-Step Guide
Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.
React Scheduler: PDF Export/Printing
React Scheduler: PDF Export/Printing
How to export the current React Scheduler view to a multi-page PDF document with a specified number of rows per page.
Next.js Weekly Calendar (Open-Source)
Next.js Weekly Calendar (Open-Source)
Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.
React Resource Calendar with Editable Columns (Open-Source)
React Resource Calendar with Editable Columns (Open-Source)
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.
React Scheduler: Rendering JSX in Events
React Scheduler: Rendering JSX in Events
How to render custom JSX in events displayed by the React Scheduler component.
React Weekly Calendar Tutorial (Open-Source)
React Weekly Calendar Tutorial (Open-Source)
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.
React Shift Scheduling Application (PHP/MySQL Backend)
React Shift Scheduling Application (PHP/MySQL Backend)
React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP and MySQL.
React Timesheet
React Timesheet
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.
React Scheduler: TypeScript Project
React Scheduler: TypeScript Project
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
React Scheduler Component Tutorial
React Scheduler Component Tutorial
Add a scheduler UI component to your React application in a few easy steps. Fast data loading, drag and drop, appearance customization options.
React Scheduler: External Drag and Drop
React Scheduler: External Drag and Drop
How to activate external items so they can be dragged to the React Scheduler component.
React Monthly Calendar Tutorial (Open-Source)
React Monthly Calendar Tutorial (Open-Source)
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.
React Scheduler: Rendering JSX Component in Callout (Bubble)
React Scheduler: Rendering JSX Component in Callout (Bubble)
The React Scheduler allows defining the callout (bubble) content as a React JSX component. The component will be created automatically when the callout is activated and removed and unmounted when the callout is hidden.
React Calendar with Date Picker (Open-Source)
React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
React Scheduler: Next/Previous Buttons
React Scheduler: Next/Previous Buttons
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.
React JSX Components in Scheduler Grid Cells
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
How to Add Custom Progress Bar to React Scheduler Events
How to Add Custom Progress Bar to React Scheduler Events
The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.
React: Milestone Scheduler
React: Milestone Scheduler
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
React Scheduler: Large Datasets and Performance
React Scheduler: Large Datasets and Performance
What things to look at when you are not happy with the React Scheduler component performance.
Articles 1-20 of 34 Next