> ## Documentation Index
> Fetch the complete documentation index at: https://afonsojramos-claude-issues-54-55-0b0zaz.mintlify.site/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. Drag the evening gig down past the end of its day and it
  continues on the next one. 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>