Skip to main content
A calendar for React Native, React DOM, and Solid 2, built on a shared core. It renders month, week, day, custom, schedule, and year views. Move, resize, and create events with gestures, or use date pickers and resource timelines. It has four packages:
  • @super-calendar/native: the React Native renderer (Reanimated 4, Gesture Handler, Legend List). This is what most of these docs cover.
  • @super-calendar/dom: a pure react-dom renderer with no React Native runtime, for web-only or web-first apps. See the react-dom renderer guide.
  • @super-calendar/solid: the Solid 2 renderer, with signals, server rendering, and hydration. It requires no React runtime. See the Solid 2 guide.
  • @super-calendar/core: shared logic and types through the React-free /vanilla entry, plus React hooks through the root entry. See headless usage.
See the renderer comparison for platform differences. It’s an homage to react-native-big-calendar, not a fork. The API differs and the internals are new. The date-picker surface (MonthList, useDateRange) is in turn inspired by flash-calendar; reach for that if you want a standalone, headless picker rather than a full calendar.
super-calendar week view

The week view: events, business-hours shading, and the current-time line.

Quickstart

Install it and render your first calendar in a couple of minutes.

Live demo

Drag, resize, zoom, and create events in the React web demo.

Dragging & creating

Move, resize, reschedule across days, and sweep out new events.

API reference

Every <Calendar> prop and exported helper.

react-dom renderer

Run in the browser with no React Native runtime.

Solid 2 renderer

Use signals, custom events, date pickers, and server rendering.

​
Highlights

  • Calendar views: month, week, day, 3-day, custom, schedule, and year.
  • Virtualized lists: month and agenda lists mount visible rows. Native also snap-pages its calendar views.
  • Gesture-driven: pinch-to-zoom the time grid, long-press to drag events, drag a grip to resize, and drag empty space to create. On the web the same interactions run on the pointer: Ctrl/⌘ + scroll (or a trackpad pinch) zooms, and you drag events directly with the mouse.
  • Drag across days, with optional validation to reject a drop.
  • Date selection (single, multiple, or range with useDateRange in React or createDateRange in Solid), disabled days, and a scrolling MonthList.
  • Recurring events, time-zone display, and a dark theme preset.
  • Bring-your-own event type (CalendarEvent<T>) and custom event renderers for each view.
  • Web renderers for React DOM and Solid 2. The React Native package also runs on react-native-web.

​
At a glance

Legend: ✅ supported · ⚠️ partial or with known issues · ❌ not available.