Theming

CalendarKit Pro supports two theming approaches: the theme prop (inline overrides) and CSS variables (global overrides).

theme prop

Pass a CalendarTheme object to customize colors, border radius, and font family:

interface CalendarTheme {
  colors?: {
    primary?:    string;   // main accent (buttons, event badges)
    secondary?:  string;
    background?: string;   // calendar background
    foreground?: string;   // text color
    border?:     string;   // grid lines
    muted?:      string;   // subtle backgrounds
    accent?:     string;
  };
  fontFamily?:   string;   // e.g. 'Inter, sans-serif'
  borderRadius?: string;   // e.g. '0.75rem'
}

<ProScheduler
  theme={{
    colors: {
      primary:    '#6366f1', // indigo
      background: '#f8fafc',
      foreground: '#0f172a',
      border:     '#e2e8f0',
      muted:      '#f1f5f9',
    },
    fontFamily:   "'Inter', sans-serif",
    borderRadius: '0.75rem',
  }}
  ...
/>

CSS variable approach

Import calendarkit-prov2/calendarkit.css and override variables in your own CSS:

/* globals.css */
:root {
  --background:          220 20% 98%;
  --foreground:          220 30% 10%;
  --primary:             262.1 83.3% 57.8%;   /* violet */
  --primary-foreground:  210 40% 98%;
  --secondary:           220 14.3% 95.9%;
  --secondary-foreground:220 8.9% 46.1%;
  --muted:               220 14.3% 95.9%;
  --muted-foreground:    220 8.9% 46.1%;
  --accent:              220 14.3% 95.9%;
  --accent-foreground:   220 9% 11%;
  --border:              220 13% 91%;
  --ring:                262.1 83.3% 57.8%;
  --radius:              0.5rem;
}

.dark {
  --background:          222.2 84% 4.9%;
  --foreground:          210 40% 98%;
  --primary:             262.1 83.3% 57.8%;
  --primary-foreground:  210 40% 98%;
  --muted:               217.2 32.6% 17.5%;
  --muted-foreground:    215 20.2% 65.1%;
  --border:              217.2 32.6% 17.5%;
}

Preset themes

Ocean (blue)

const oceanTheme: CalendarTheme = {
  colors: {
    primary:    '#0ea5e9',
    background: '#f0f9ff',
    border:     '#bae6fd',
    muted:      '#e0f2fe',
  },
};

Forest (green)

const forestTheme: CalendarTheme = {
  colors: {
    primary:    '#22c55e',
    background: '#f0fdf4',
    border:     '#bbf7d0',
    muted:      '#dcfce7',
  },
};

Sunset (orange)

const sunsetTheme: CalendarTheme = {
  colors: {
    primary:    '#f97316',
    background: '#fff7ed',
    border:     '#fed7aa',
    muted:      '#ffedd5',
  },
};

Corporate (gray)

const corporateTheme: CalendarTheme = {
  colors: {
    primary:    '#6366f1',
    background: '#f9fafb',
    foreground: '#111827',
    border:     '#e5e7eb',
    muted:      '#f3f4f6',
  },
  borderRadius: '0.375rem',
  fontFamily:   "'Inter', sans-serif",
};

Full example: theme switcher

'use client';

import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent, CalendarTheme } from 'calendarkit-prov2';

const THEMES: Record<string, CalendarTheme> = {
  Default: {},
  Ocean: {
    colors: { primary: '#0ea5e9', background: '#f0f9ff', border: '#bae6fd', muted: '#e0f2fe' },
  },
  Forest: {
    colors: { primary: '#22c55e', background: '#f0fdf4', border: '#bbf7d0', muted: '#dcfce7' },
  },
  Sunset: {
    colors: { primary: '#f97316', background: '#fff7ed', border: '#fed7aa', muted: '#ffedd5' },
  },
  Royal: {
    colors: { primary: '#8b5cf6', background: '#f5f3ff', border: '#ddd6fe', muted: '#ede9fe' },
    borderRadius: '1rem',
  },
};

export default function ThemeSwitcher() {
  const [themeName, setThemeName] = useState('Default');
  const [events,    setEvents]    = useState<CalendarEvent[]>([]);
  const [isDark,    setIsDark]    = useState(false);

  return (
    <div>
      {/* Theme picker */}
      <div className="flex gap-2 mb-4 flex-wrap">
        {Object.keys(THEMES).map((name) => (
          <button
            key={name}
            onClick={() => setThemeName(name)}
            className={`px-3 py-1.5 text-sm rounded-lg border transition-colors ${
              themeName === name
                ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                : 'border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-800'
            }`}
          >
            {name}
          </button>
        ))}
      </div>

      <div className={isDark ? 'dark' : ''}>
        <div className="h-[700px] border rounded-xl overflow-hidden">
          <ProScheduler
            view="week"
            events={events}
            date={new Date()}
            theme={THEMES[themeName]}
            isDarkMode={isDark}
            onThemeToggle={() => setIsDark(!isDark)}
            onEventCreate={(e) =>
              setEvents((prev) => [...prev, { ...e, id: crypto.randomUUID() } as CalendarEvent])
            }
            onEventUpdate={(updated) =>
              setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)))
            }
            onEventDelete={(id) =>
              setEvents((prev) => prev.filter((e) => e.id !== id))
            }
          />
        </div>
      </div>
    </div>
  );
}

Theming

On this page