React Calendar and Scheduler Tutorials

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.

How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.

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.

Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.

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.

How to create an integrated day, week, and month calendar view with a shared data source in Next.js.

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

How to render custom React JSX component in the Scheduler grid cells.