React Calendar and Scheduler Tutorials (Page 2)

Back to React Calendar and Scheduler Tutorials

React Scheduler: Rendering JSX in Events

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

Oct 25, 2023

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

react scheduler typescript react18

May 29, 2023

React Scheduler: External Drag and Drop

How to activate external items so they can be dragged to the React Scheduler component.

react react18 scheduler jsx drag-drop javascript

Oct 10, 2022

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

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

Jul 14, 2022

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

Jun 17, 2022

React JSX Components in Scheduler Grid Cells

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

react react18 jsx scheduler customization javascript

Apr 4, 2022

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

Mar 4, 2022

React Scheduler: Large Datasets and Performance

What things to look at when you are not happy with the React Scheduler component performance.

react scheduler performance javascript

Dec 17, 2021

React Calendar: Rendering JSX in Events

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

react calendar javascript jsx

Dec 8, 2021

React Scheduler: How to Search Events

Learn how to search React Scheduler events, highlight the search text and jump between results using Next and Previous buttons.

react scheduler javascript

Nov 27, 2021

React: Activity Planning System (Node, Express, PostgreSQL)

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

react scheduler node postgresql express javascript activity

Oct 18, 2021

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 javascript jsx

Aug 3, 2021

React Resource Calendar

How to use the column hierarchy feature of the React calendar to display events for many resources. The groups and resources are displayed as columns and the time slots are displayed as rows.

react resource-calendar jsx javascript

Jul 30, 2021

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

Jul 1, 2021

React Scheduler: Full Screen Layout

How to integrate the React Scheduler component into a full screen page layout. The full screen mode will allow rendering optimizations to be applied correctly and avoid a confusing duplicate vertical scrollbar.

react scheduler full-screen jsx javascript

Jun 24, 2021

Previous Articles 21-36 of 36

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.