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

# Live demo

> Both renderers, running live on the web.

One example app per renderer, hosted on GitHub Pages. Everything here runs the
real library, no mocks.

<Tabs>
  <Tab title="React Native">
    The [`examples/native`](https://github.com/afonsojramos/super-calendar/tree/main/examples/native)
    app, exported for the web with react-native-web. This is the same code that
    runs on iOS and Android.

    <Frame>
      <iframe src="https://demo.super-calendar.afonsojramos.me/" title="super-calendar React Native web demo" style={{ width: "100%", height: "880px", border: "0", borderRadius: "12px" }} loading="lazy" />
    </Frame>
  </Tab>

  <Tab title="react-dom">
    The [`examples/web`](https://github.com/afonsojramos/super-calendar/tree/main/examples/web)
    app: the [`@super-calendar/dom`](/guides/dom) renderer with no React Native
    runtime. It adds web-only surfaces to try, including the date picker,
    `MonthList`, a fully Tailwind-styled month, the resource timeline, and
    iCalendar import/export.

    <Frame>
      <iframe src="https://demo.super-calendar.afonsojramos.me/dom/" title="super-calendar react-dom web demo" style={{ width: "100%", height: "880px", border: "0", borderRadius: "12px" }} loading="lazy" />
    </Frame>
  </Tab>
</Tabs>

## Things to try

* **Switch modes** with the tabs: month, week, 3-day, day, schedule.
* **Pinch / Ctrl-scroll** on the week or day grid to zoom the hours.
* **Click-drag an event** vertically to change its time, horizontally to move it
  to another day. The exam is "locked" — its drop is rejected and it snaps back.
* **Drag the grip** at an event's bottom edge to resize it.
* **Click-drag empty space** to create an event; press **Escape** mid-drag to
  cancel.
* **Right-click an event** for the context menu (move / delete).
* Note the shaded hours: business hours are 9–5 on weekdays, and weekends read as
  closed.

<Note>
  On native, dragging starts on a long-press (so taps and scrolls aren't hijacked); on the web it
  starts after a small drag, so a plain click still selects. See [Dragging &
  creating](/guides/dragging) and [Web](/guides/web).
</Note>