> ## 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.

## Prerequisites

A React Native app on the new architecture, with these peer dependencies
installed: `react-native-reanimated` (v4), `react-native-gesture-handler`,
`react-native-worklets`, and `@legendapp/list` (v3). The Expo SDK includes
compatible versions.

## Install

<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>
  Targeting the web too? See the [Web guide](/guides/web) for the extra peers and how the touch
  gestures map to mouse and keyboard.
</Tip>

## 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>