React Scheduler Pro getting-started

Installation

Using NPM

npm install react-scheduler-pro

or Yarn

yarn add react-scheduler-pro

or pnpm

pnpm add react-scheduler-pro

Peer Dependencies

React Scheduler Pro requires React 16.8+ as a peer dependency:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

Quick Start

v3 Breaking Change — CSS must be imported

Starting from v3, styles are no longer auto-injected. You must import the stylesheet once in your app entry point:

import 'react-scheduler-pro/styles.css';

import { Scheduler } from 'react-scheduler-pro';
import 'react-scheduler-pro/styles.css';

function App() {
  const events = [
    {
      _id: 1,
      title: 'Team Meeting',
      startDate: new Date(2026, 2, 19, 10, 0),
      endDate: new Date(2026, 2, 19, 11, 30),
      backgroundColor: '#0079ff',
    },
    {
      _id: 2,
      title: 'Lunch Break',
      startDate: new Date(2026, 2, 19, 12, 0),
      endDate: new Date(2026, 2, 19, 13, 0),
      backgroundColor: '#65C18C',
    },
  ];

  return (
    <Scheduler
      events={events}
      fields={{
        id: '_id',
        subject: 'title',
        start: 'startDate',
        end: 'endDate',
        backgroundColor: 'backgroundColor',
      }}
    />
  );
}

Understanding Fields

The fields prop tells the scheduler how to read your event objects. Your events can have any shape — just map the field names:

// Your events use custom property names
const events = [
  {
    eventId: 'abc',
    name: 'Meeting',
    from: new Date(),
    to: new Date(),
    color: '#ff0000',
  },
];

// Map them to what the scheduler expects
<Scheduler
  events={events}
  fields={{
    id: 'eventId',
    subject: 'name',
    start: 'from',
    end: 'to',
    backgroundColor: 'color',
  }}
/>

Migrating from v1 / v2

Breaking changes in v3

If you are upgrading from an earlier version, here is what changed:

1. CSS import is now required

Styles are no longer injected automatically. Add this once to your app entry point (e.g. _app.tsx, main.tsx):

import 'react-scheduler-pro/styles.css';

2. Theming moved to CSS Custom Properties

The theme prop has been removed. Override --rsp-* CSS variables instead. See Theming.

3. Drag & drop is now built-in

No additional setup needed. Use the new draggable, resizable, onEventDrop, and onEventResize props. See Drag & Drop.

Next Steps

Props Reference — Full API documentation
Drag & Drop — Enable event dragging and resizing
Theming — Customize colors and dark mode
TypeScript — Type reference and examples
Examples — Interactive examples