Quickstart

super-calendar provides React Native, React DOM, and Solid 2 renderers over a shared core:

Your app	Package
React Native (iOS and Android, plus web via react-native-web)	`@super-calendar/native`
React on the web (react-dom)	`@super-calendar/dom`
Solid 2 on the web	`@super-calendar/solid`

For Solid 2, follow the Solid setup guide, including its exact release-candidate peer versions. For React, pick the tab for your app.

React Native
React (DOM)

You need a React Native app on the new architecture, within the >=0.74 <2 peer range. The Expo SDK includes compatible versions of the peers below.

Add the package and peers

npx expo install @super-calendar/native react-native-reanimated react-native-gesture-handler react-native-worklets @legendapp/list date-fns

pnpm add @super-calendar/native react-native-reanimated react-native-gesture-handler react-native-worklets @legendapp/list date-fns

Wrap your app in GestureHandlerRootView

Gesture Handler needs a root view at the top of your tree.

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return <GestureHandlerRootView style={{ flex: 1 }}>{/* ... */}</GestureHandlerRootView>;
}

Render a calendar

<Calendar> is controlled: you own date and events, and update them from its callbacks.

import { useState } from "react";
import { Calendar, type CalendarEvent, type CalendarMode } from "@super-calendar/native";

const events: CalendarEvent[] = [
  { title: "Standup", start: new Date(2026, 5, 23, 9, 0), end: new Date(2026, 5, 23, 9, 30) },
];

export function MyCalendar() {
  const [date, setDate] = useState(() => new Date());
  const [mode, setMode] = useState<CalendarMode>("week");
  return (
    <Calendar
      mode={mode}
      date={date}
      events={events}
      weekStartsOn={1}
      onChangeDate={setDate}
      onPressEvent={(event) => console.log(event.title)}
    />
  );
}

Shipping the same app to the browser? See the Web guide for the extra peers and how the touch gestures map to mouse and keyboard.

You need a React 18 or later app rendering with react-dom. No React Native packages are involved: the calendar renders plain DOM elements.

Add the package and peers

npm install @super-calendar/dom @legendapp/list date-fns

pnpm add @super-calendar/dom @legendapp/list date-fns

react and react-dom are peers too, so the calendar uses the copies your app already has.

Render a calendar

<Calendar> is controlled: you own date and events, and update them from its callbacks. The time grid scrolls inside the box set by height.

import { useState } from "react";
import { Calendar, type CalendarEvent, type CalendarMode } from "@super-calendar/dom";

const events: CalendarEvent[] = [
  { title: "Standup", start: new Date(2026, 5, 23, 9, 0), end: new Date(2026, 5, 23, 9, 30) },
];

export function MyCalendar() {
  const [date, setDate] = useState(() => new Date());
  const [mode, setMode] = useState<CalendarMode>("week");
  return (
    <Calendar
      mode={mode}
      date={date}
      events={events}
      weekStartsOn={1}
      height={600}
      onChangeDate={setDate}
      onPressEvent={(event) => console.log(event.title)}
    />
  );
}

The react-dom renderer guide covers the individual views, theming, and keyboard navigation. Most other guides use the React Native package; the renderer comparison lists what differs.

Next steps

Custom events

Type your events and render them your way.

Dragging & creating

Turn on move, resize, and drag-to-create.

Views

Month, week, day, 3-day, and schedule.

Theming

Colors, dark mode, and business hours.

Migrating from big-calendar

A copy-paste agent prompt and prop mapping.

Getting started

Migrating

Views

Events

Styling

Interaction & accessibility

Packages & platforms

Reference

Next steps

Custom events

Dragging & creating

Views

Theming

Migrating from big-calendar

​Next steps

Custom events

Dragging & creating

Views

Theming

Migrating from big-calendar

Next steps