React Calendar and Scheduler Tutorials

How to insert React components or direct JSX into Scheduler row headers.

How to render custom JSX components in events displayed by the React Calendar component.

Simple React application that displays a project schedule using a Gantt Chart component.

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.

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

Learn how to search React Scheduler events, highlight matching text, and jump between results using Next and Previous buttons in a React 19 application.

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.

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.

Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.

Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

How to render custom JSX in events displayed by the React Scheduler component.

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.

How to use a popup date picker to select a date displayed by the React Calendar component.

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.

Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.

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.

This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.

React application that displays a weekly event calendar using the open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.