> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Install the calendar and render your first view, in React Native or in React on the web.

super-calendar works with both React Native and React. Each platform has its own
package, and both expose the same `Calendar` API on 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` |

Pick the tab for your app.

<Tabs>
  <Tab title="React Native">
    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.

    <Steps>
      <Step title="Add the package and peers">
        <CodeGroup>
          ```bash npm theme={null}
          npx expo install @super-calendar/native react-native-reanimated react-native-gesture-handler react-native-worklets @legendapp/list date-fns
          ```

          ```bash pnpm theme={null}
          pnpm add @super-calendar/native react-native-reanimated react-native-gesture-handler react-native-worklets @legendapp/list date-fns
          ```
        </CodeGroup>
      </Step>

      <Step title="Wrap your app in GestureHandlerRootView">
        Gesture Handler needs a root view at the top of your tree.

        ```tsx theme={null}
        import { GestureHandlerRootView } from "react-native-gesture-handler";

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

      <Step title="Render a calendar">
        `<Calendar>` is controlled: you own `date` and `events`, and update them from
        its callbacks.

        ```tsx theme={null}
        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)}
            />
          );
        }
        ```
      </Step>
    </Steps>

    <Tip>
      Shipping the same app to the browser? See the [Web guide](/guides/web) for the extra
      peers and how the touch gestures map to mouse and keyboard.
    </Tip>
  </Tab>

  <Tab title="React (DOM)">
    You need a React 18 or later app rendering with react-dom. No React Native
    packages are involved: the calendar renders plain DOM elements.

    <Steps>
      <Step title="Add the package and peers">
        <CodeGroup>
          ```bash npm theme={null}
          npm install @super-calendar/dom @legendapp/list date-fns
          ```

          ```bash pnpm theme={null}
          pnpm add @super-calendar/dom @legendapp/list date-fns
          ```
        </CodeGroup>

        `react` and `react-dom` are peers too, so the calendar uses the copies your
        app already has.
      </Step>

      <Step title="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`.

        ```tsx theme={null}
        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)}
            />
          );
        }
        ```
      </Step>
    </Steps>

    <Tip>
      The [react-dom renderer](/guides/dom) guide covers the individual views, theming, and
      keyboard navigation. Most other guides use the React Native package; the
      [renderer comparison](/reference/renderers) lists what differs.
    </Tip>
  </Tab>
</Tabs>

## Next steps

<CardGroup cols={2}>
  <Card title="Custom events" icon="paintbrush" href="/guides/events">
    Type your events and render them your way.
  </Card>

  <Card title="Dragging & creating" icon="hand-pointer" href="/guides/dragging">
    Turn on move, resize, and drag-to-create.
  </Card>

  <Card title="Views" icon="table-cells" href="/guides/views">
    Month, week, day, 3-day, and schedule.
  </Card>

  <Card title="Theming" icon="palette" href="/guides/theming">
    Colors, dark mode, and business hours.
  </Card>

  <Card title="Migrating from big-calendar" icon="arrow-right-arrow-left" href="/migrating-from-big-calendar">
    A copy-paste agent prompt and prop mapping.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.