Skip to main content
There are two ways to put the calendar in a browser:
  • @super-calendar/dom is a pure react-dom renderer with no React Native in the tree. Choose it for web-only or web-first apps.
  • @super-calendar/native on react-native-web runs the same React Native code in the browser. Choose it when you already ship a native app and want one codebase. The rest of this page covers that path.
The native package runs on react-native-web; its dependencies (Legend List v3, Reanimated, Gesture Handler) all support the web. See it running on the live demo.

​
Add the web peers

The runnable examples/native builds with expo start --web.

​
Gestures on the web

All modes render and navigate. The touch gestures are remapped: Because dragging starts after a small click-drag on the web, a plain click still selects an event and a right-click still opens a context menu. Dragging empty space creates an event (scroll with the wheel); press Escape to cancel a sweep. Keyboard focus (Tab) moves through events only. Empty day cells and time-grid columns are deliberately not tab stops, so focus doesn’t stop on every blank day, matching the react-dom renderer. The month-grid date picker (rendered without events) stays fully day-navigable for selection.

​
Portaling overlays

If a renderEvent wraps events in a portaling overlay (a context menu, popover, etc.) from a UI library, portal it into your app’s React root, not document.body.
react-native-web registers React’s event delegation on the root element (#root under Expo), so an overlay mounted outside it renders correctly but its click handlers never fire. Most libraries take a container prop for this — point it at #root. The example’s context menu does exactly this: