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.

Here is a collection of React tutorials that show how to use DayPilot scheduling components in React applications (with or without JSX). 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 at your own machine. The 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.

See also the documentation for React SchedulerReact Event CalendarReact Monthly Calendar components.

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).

React Calendar: Rendering JSX in Events
React Calendar: Rendering JSX in Events
How to render custom JSX components in events displayed by the React Calendar component.
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
How to display React JSX components in the Scheduler horizontal time header.
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 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 Gantt Chart Tutorial
React Gantt Chart Tutorial
Simple React application that displays a project schedule using a Gantt Chart component.
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 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 Monthly Calendar Tutorial
React Monthly Calendar Tutorial
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 Weekly Calendar Tutorial
React Weekly Calendar Tutorial
React application that displays a weekly event calendar using DayPilot React calendar component. Includes a date picker for changing the visible week. Appearance customized using CSS.
React Scheduler Tutorial
React Scheduler 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: Rendering JSX Components in Row Headers
React Scheduler: Rendering JSX Components in Row Headers
How to insert React components or direct JSX to Scheduler row headers.
Articles 1-11 of 11