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

# super-calendar

> A gesture-driven, virtualized calendar for React Native and the web.

A calendar for React Native and React on the web, built on a render-agnostic core. It
renders month, week, day, 3-day, and schedule views, virtualizes and snap-pages
every view, and leans into touch: pinch-to-zoom, drag to move and resize, and
drag to create.

It ships as three packages:

* **`@super-calendar/native`** — the React Native renderer (Reanimated 4, Gesture
  Handler, Legend List). This is what most of these docs cover.
* **`@super-calendar/dom`** — a pure react-dom renderer with no React Native
  runtime, for web-only or web-first apps. See the
  [react-dom renderer](/guides/dom) guide.
* **`@super-calendar/core`** — the platform-free logic, types, and hooks both
  renderers share. See [Headless usage](/guides/headless).

It's an homage to
[react-native-big-calendar](https://github.com/acroca/react-native-big-calendar),
not a fork — the API differs and the internals are new. The date-picker surface
(`MonthList`, `useDateRange`) is in turn inspired by
[flash-calendar](https://github.com/MarceloPrado/flash-calendar); reach for that
if you want a standalone, headless picker rather than a full calendar.

<Frame caption="The week view: events, business-hours shading, and the current-time line.">
  <img src="https://mintcdn.com/afonsojramos/b6NGMpgzbbZfaizK/images/hero.png?fit=max&auto=format&n=b6NGMpgzbbZfaizK&q=85&s=0857eb984e193afcb8feed3face5fceb" alt="super-calendar week view" width="1180" height="840" data-path="images/hero.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Install it and render your first calendar in a couple of minutes.
  </Card>

  <Card title="Live demo" icon="play" href="/demo">
    Try the web build — drag, resize, zoom, and create events in the browser.
  </Card>

  <Card title="Dragging & creating" icon="hand-pointer" href="/guides/dragging">
    Move, resize, reschedule across days, and sweep out new events.
  </Card>

  <Card title="API reference" icon="code" href="/reference/api">
    Every `<Calendar>` prop and exported helper.
  </Card>

  <Card title="react-dom renderer" icon="globe" href="/guides/dom">
    Run in the browser with no React Native runtime.
  </Card>
</CardGroup>

## Highlights

* **Five views** — month, week, day, 3-day (or any N), and a schedule list.
* **Virtualized & paged** — every view snap-pages and only mounts a few dates at
  a time, so far-future and far-past dates stay cheap.
* **Gesture-driven** — pinch-to-zoom the time grid, long-press to drag events,
  drag a grip to resize, and drag empty space to create. On the web the same
  interactions run on the pointer: Ctrl/⌘ + scroll (or a trackpad pinch) zooms,
  and you drag events directly with the mouse.
* **Drag across days**, with optional validation to reject a drop.
* **Date selection** (single, multiple, or range with the `useDateRange` hook),
  disabled days, and a scrolling `MonthList`.
* **Recurring events**, **time-zone display**, and a **dark theme** preset.
* **Bring-your-own event type** (`CalendarEvent<T>`) and a `renderEvent` escape
  hatch that works across every mode and event shape.
* **Runs on the web** two ways: a pure react-dom renderer
  (`@super-calendar/dom`), or the React Native package on react-native-web with
  the touch gestures remapped to mouse and keyboard.

## At a glance

| Capability | @super-calendar/native | react-native-big-calendar |
| - | - | - |
| Month / week / day / 3-day / custom / agenda | ✅ | ✅ |
| Generic event typing (`CalendarEvent<T>`) | ✅ | ✅ |
| Virtualized, snap-paged views | ✅ | ❌ renders all dates |
| Pinch-to-zoom (native) / Ctrl-scroll (web) | ✅ | ❌ |
| Drag to move, resize & create | ✅ | ❌ (declined upstream) |
| Date selection (single / range / multiple) | ✅ `useDateRange` + disabled days | ❌ |
| Overlapping events | ✅ side-by-side columns | ⚠️ stacked / indented |
| Recurring events | ✅ `expandRecurringEvents` | ❌ expand them yourself |
| Time-zone display | ✅ `eventsInTimeZone` | ❌ |
| Dark mode | ✅ `darkTheme` preset | ❌ bring your own palette |
| Web | ✅ arrow-key paging, Ctrl-scroll zoom | ⚠️ partial |
| Runtime dependencies | Reanimated + Gesture Handler + Legend List | dayjs + calendarize (lighter) |

Legend: ✅ supported · ⚠️ partial or with known issues · ❌ not available.


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