React 19 Scheduling Tutorials

Next.js Scheduler with Horizontal Timeline (Open-Source)

Build a Next.js scheduler with a horizontal timeline (one year, day-by-day) featuring a date picker with scroll synchronization, a timeline header context menu for bulk day actions, and column highlighting.

Feb 14, 2026

Next.js Monthly Calendar (Open-Source)

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

next.js react typescript month open-source jsx nextjs16 react19

Jan 23, 2026

React Scheduler: Rendering JSX in Events

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

react react19 scheduler javascript jsx open-source

Jan 23, 2026

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

Jan 20, 2026

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 date-picker event-calendar javascript open-source react19

Jan 15, 2026

React Scheduler with Horizontal Timeline (Open-Source)

A lightweight, open-source React Scheduler component with a horizontal timeline, drag-and-drop support, customizable appearance, and smooth performance for large data sets.

react react19 scheduler open-source timeline

Jan 14, 2026

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.

react react19 calendar timeline resource-calendar

Jan 10, 2026

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 event-calendar month javascript jsx open-source react19

Jan 10, 2026

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.

react scheduler css theme javascript react19 open-source

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

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

React Calendar with Day/Week/Month Views (Open-Source)

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

react day week month calendar open-source react19 jsx

Dec 12, 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

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 19 Scheduling Tutorials

Products

Resources

Tools

About Us

DayPilot Pro