dom vs native

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

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.

Getting started

Views

Events

Styling

Interaction & accessibility

Packages & platforms

Reference

Views and components

Interaction

Time grid

Data

Styling and accessibility

​Views and components

​Interaction

​Time grid

​Data

​Styling and accessibility

Views and components

Interaction

Time grid

Data

Styling and accessibility