React Calendar and Scheduler Tutorials

Back to React Calendar and Scheduler Tutorials

How to Use CSS Themes with the React Scheduler Component

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

Jan 9, 2026

Next.js Resource-Scheduling Calendar (Open-Source)

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.

next.js nextjs16 react react19 typescript resource-calendar open-source jsx

Jan 8, 2026

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 typescript react19 open-source

Jan 7, 2026

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.

next.js react scheduler typescript nextjs16

Jan 6, 2026

Next.js Weekly Calendar (Open-Source)

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

next.js react calendar open-source typescript nextjs16

Jan 5, 2026

React Weekly Calendar Tutorial (Open-Source)

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.

react event-calendar week javascript css jsx open-source react19

Jan 2, 2026

Next.js Calendar with Day/Week/Month Views (Open-Source)

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

next.js nextjs16 react react19 typescript open-source day week month calendar

Dec 30, 2025

React Scheduler: Timeline Zoom

How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.

react scheduler zoom timeline javascript react19 open-source

Dec 15, 2025

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 scheduler jsx javascript react19 open-source

Dec 7, 2025

React JSX Components in Scheduler Grid Cells

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

react react19 jsx scheduler customization javascript open-source

Oct 2, 2025

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 scheduler javascript react19 open-source

Sep 18, 2025

React Scheduler: How to Enable Undo/Redo

The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.

react scheduler jsx undo javascript react19 open-source

Sep 8, 2025

React Scheduler: Rendering JSX Components in Row Headers

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

react scheduler component jsx javascript react18

May 14, 2025

Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions

How to build a visual schedule in Next.js that displays the planned version of a task above its actual version. This makes it easy to compare durations and track deviations from the original plan.

next.js nextjs15 react react19 scheduler typescript

Jan 15, 2025

React Scheduler: How to Display Slot Details using Background Events

How to move the React Scheduler events to the background so they can be used to display additional time slot information.

react scheduler javascript react18

Sep 14, 2024

React Work Order Planning System (PHP/MySQL)

React application that will let you assign queued work orders to a specific employee and time slot. Includes a PHP backend with MySQL storage.

react scheduler javascript jsx work-order php mysql react18

Aug 11, 2024

React Scheduler: How to Manage Resources

Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.

react scheduler javascript react18

Jun 27, 2024

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 milestone javascript links react18

Jun 13, 2024

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.

react react18 scheduler pdf export print

Jan 8, 2024

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 scheduler component jsx javascript bubble react18

Aug 3, 2022

Previous Articles 21-40 of 43 Next

Products

Resources

Tools

About Us

Contact

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.