React Scheduler Pro theming

v3 Breaking Change — Theming architecture

Theming has moved from JavaScript config objects to CSS Custom Properties. Any theme prop or SCSS variable overrides from v1/v2 will no longer work. Override the --rsp-* variables in your CSS instead (see below).

React Scheduler Pro uses CSS Custom Properties (CSS Variables) for full theming support. Customize every color, font, and spacing value without writing a single line of SCSS.

CSS Variables

All variables use the --rsp- prefix. Override them in your CSS:

:root {
  --rsp-primary: #6366f1;
  --rsp-bg: #ffffff;
  --rsp-text: #1e293b;
  --rsp-border-color: rgba(0, 0, 0, 0.1);
  --rsp-event-bg: #6366f1;
  --rsp-event-text: #ffffff;
  --rsp-font-family: 'Inter', sans-serif;
}

Available Variables

Colors

Variable	Default	Description
`--rsp-primary`	`#0079ff`	Primary accent color
`--rsp-primary-light`	`#e0f4ff`	Light variant of primary
`--rsp-primary-dark`	`#0056b3`	Dark variant of primary
`--rsp-bg`	`#ffffff`	Background color
`--rsp-bg-secondary`	`#f8f9fa`	Secondary background
`--rsp-bg-hover`	`#e0f4ff`	Hover state background
`--rsp-text`	`#1d1d1d`	Primary text color
`--rsp-text-secondary`	`rgba(0,0,0,0.54)`	Secondary text color
`--rsp-text-inverse`	`#ffffff`	Inverse text (on dark bg)
`--rsp-border-color`	`rgba(0,0,0,0.12)`	Border color

Events

Variable	Default	Description
`--rsp-event-bg`	`#0079ff`	Default event background
`--rsp-event-text`	`#ffffff`	Event text color
`--rsp-event-border`	`#e8eaf6`	Event border color
`--rsp-event-radius`	`4px`	Event border radius

Typography

Variable	Default	Description
`--rsp-font-family`	`'Muli', sans-serif`	Font family
`--rsp-font-size-sm`	`12px`	Small text
`--rsp-font-size-md`	`13px`	Medium text
`--rsp-font-size-lg`	`14px`	Large text

Layout

Variable	Default	Description
`--rsp-cell-height`	`50px`	Time cell height
`--rsp-header-height`	`40px`	Header height
`--rsp-shadow`	`0 2px 8px rgba(0,0,0,0.15)`	Default shadow

Dark Mode

Using `data-theme` attribute

Add data-theme="dark" to any parent element:

<div data-theme="dark">
  <Scheduler events="{events}" fields="{fields}" />
</div>

Using CSS class

Add the .rsp-dark class:

<div className="rsp-dark">
  <Scheduler events="{events}" fields="{fields}" />
</div>

With next-themes or similar

import { useTheme } from 'next-themes';

function App() {
  const { theme } = useTheme();

  return (
    <div data-theme={theme}>
      <Scheduler events={events} fields={fields} />
    </div>
  );
}

Custom Theme Example

Create a purple theme:

.scheduler-purple {
  --rsp-primary: #7c3aed;
  --rsp-primary-light: #ede9fe;
  --rsp-primary-dark: #5b21b6;
  --rsp-event-bg: #7c3aed;
  --rsp-bg-hover: #ede9fe;
  --rsp-font-family: 'Inter', sans-serif;
}

<div className="scheduler-purple">
  <Scheduler events={events} fields={fields} />
</div>