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

# dom vs native

> How the react-dom and React Native renderers compare, feature by feature.

super-calendar ships two renderers over one shared core (`@super-calendar/core`):

* **`@super-calendar/native`** — React Native (iOS, Android, and web via
  react-native-web). The reference renderer; gesture-driven and virtualized.
* **`@super-calendar/dom`** — plain react-dom, for web-only or web-first apps that
  don't want to pull in React Native.

Both expose the same views and the same core types, so the mental model carries
across. The tables below list where they line up and where they intentionally
differ. Most differences are platform concerns (touch vs pointer, RN styling vs
CSS), not missing functionality.

## Views and components

| Component / view                     | native | dom | Notes                                                               |
| ------------------------------------ | :----: | :-: | ------------------------------------------------------------------- |
| Month, week, day, 3-day, custom      |    ✅   |  ✅  | Same modes on both.                                                 |
| Schedule / agenda                    |    ✅   |  ✅  | `mode="schedule"`.                                                  |
| `TimeGrid`, `MonthView`, `MonthList` |    ✅   |  ✅  | Shared components, matching prop names.                             |
| `Agenda`, `ResourceTimeline`         |    ✅   |  ✅  |                                                                     |
| `MonthPager` (paged month swipe)     |    ✅   |  ❌  | dom `Calendar` is a single window; use `MonthList` to scroll.       |
| `DatePicker` / `DateRangePicker`     |    ❌   |  ✅  | native exposes the headless picker parts via the `/picker` subpath. |

## Interaction

| Capability                     | native | dom | Notes                                                                                          |
| ------------------------------ | :----: | :-: | ---------------------------------------------------------------------------------------------- |
| Drag to move / resize / create |    ✅   |  ✅  | native: long-press + gesture; dom: pointer.                                                    |
| Pinch / scroll to zoom         |    ✅   |  ✅  | native: pinch; dom: pinch + Ctrl/⌘-scroll (`zoomable`).                                        |
| Controlled navigation          |    ✅   |  ✅  | both fire `onChangeDate` — native on swipe/paging, dom on PageDown/PageUp of the focused grid. |
| RTL layout                     |    ✅   |  ❌  | native `isRTL` (cosmetic).                                                                     |
| Respects OS reduce-motion      |    ✅   |  ✅  | native makes its one animated page-snap instant; dom uses almost no animation.                 |

## Time grid

| Feature                             | native | dom | Notes                             |
| ----------------------------------- | :----: | :-: | --------------------------------- |
| `minHour` / `maxHour` / `hideHours` |    ✅   |  ✅  |                                   |
| Week numbers (`showWeekNumber`)     |    ✅   |  ✅  | ISO week of the visible Thursday. |
| Now indicator (ticking)             |    ✅   |  ✅  |                                   |
| Business hours shading, `timeslots` |    ✅   |  ✅  |                                   |

## Data

| Feature                                 | native | dom | Notes                                                    |
| --------------------------------------- | :----: | :-: | -------------------------------------------------------- |
| Recurrence auto-expansion in `Calendar` |    ✅   |  ✅  | Plus `expandRecurringEvents` for manual control.         |
| `timeZone` prop                         |    ✅   |  ✅  | Display-only, via `eventsInTimeZone`.                    |
| iCalendar import / export               |    ✅   |  ✅  | `parseICalendar` / `toICalendar`, re-exported from both. |

## Styling and accessibility

| Feature                        | native | dom | Notes                                                                                                                                                                        |
| ------------------------------ | :----: | :-: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Theming                        |    ✅   |  ✅  | native: `CalendarTheme` + context + `mergeTheme`; dom: flat `DomCalendarTheme` + `data-slot`/`data-state`.                                                                   |
| Per-slot `classNames`/`styles` |    ✅   |  ✅  | Same contract on both: a classed slot drops its themed styles. Native needs a Tailwind runtime (uniwind/NativeWind); dom works with any CSS. See [Styling](/guides/styling). |
| Screen-reader labels and roles |    ✅   |  ✅  | Events, month cells, and day headers are labelled on both.                                                                                                                   |
| Screen-reader event actions    |    ✅   |  ❌  | native exposes move / resize as `accessibilityActions` so VoiceOver/TalkBack can reschedule without a gesture; dom uses keyboard nav instead.                                |
| Keyboard navigation            |    ❌   |  ✅  | dom `keyboardDayNavigation` (month) and `keyboardEventNavigation` (time grid). A web concern; native is touch-driven (arrow-key paging on react-native-web).                 |

<Note>
  The shared components (`MonthView`, `MonthList`, `TimeGrid`) keep the same prop names across
  renderers, guarded by an automated parity test. A genuinely platform-specific prop (web keyboard
  nav, RN styling) is the only allowed exception.
</Note>