Quickstart
Install it and render your first calendar in a couple of minutes.
Live demo
Try the web build — drag, resize, zoom, and create events in the browser.
Dragging & creating
Move, resize, reschedule across days, and sweep out new events.
API reference
Every
<Calendar> prop and exported helper.Highlights
- Five views — month, week, day, 3-day (or any N), and a schedule list.
- Virtualized & paged — every view snap-pages and only mounts a few dates at a time, so far-future and far-past dates stay cheap.
- Gesture-driven — pinch-to-zoom the time grid, long-press to drag events, drag a grip to resize, and drag empty space to create.
- Drag across days, with optional validation to reject a drop.
- Recurring events, time-zone display, and a dark theme preset.
- Bring-your-own event type (
CalendarEvent<T>) and arenderEventescape hatch that works across every mode and event shape. - Runs on the web via react-native-web, with the touch gestures remapped to mouse and keyboard.
At a glance
| Capability | react-native-super-calendar | react-native-big-calendar |
|---|---|---|
| Month / week / day / 3-day / custom / agenda | ✅ | ✅ |
Generic event typing (CalendarEvent<T>) | ✅ | ✅ |
| Virtualized, snap-paged views | ✅ | ❌ renders all dates |
| Pinch-to-zoom (native) / Ctrl-scroll (web) | ✅ | ❌ |
| Drag to move, resize & create | ✅ | ❌ (declined upstream) |
| Overlapping events | ✅ side-by-side columns | ⚠️ stacked / indented |
| Recurring events | ✅ expandRecurringEvents | ❌ expand them yourself |
| Time-zone display | ✅ eventsInTimeZone | ❌ |
| Dark mode | ✅ darkTheme preset | ❌ bring your own palette |
| Web | ✅ arrow-key paging, Ctrl-scroll zoom | ⚠️ partial |
| Runtime dependencies | Reanimated + Gesture Handler + Legend List | dayjs + calendarize (lighter) |