react-brain
Browse decisions
React & language foundations 3App architecture 9UI 12Platform & native 9Build, test, observe, secure 6AI in React apps 3stack composerdecision recordscensusstaleness bencharchitecturechangelogmethodologyroadmap

entriesui · verified 2026-07-07 · react + react-native

Calendars, date pickers & event grids

draftedconfidence: lowearly: 1/12 of this tier graded so far (0 overturned) — the public scorecard →

re-verified 2× — 2026-07-13 · 2026-07-07 · changelog

recommendation

Date picking / marked-dates UI → react-native-calendars (the de-facto) or @marceloterreiro/flash-calendar when performance and design-system theming matter. A full event-grid UX (native-calendar-style day/week views with drag and pinch) → @super-calendar/native — new in 2026, prototype first. Web event calendars → react-big-calendar or FullCalendar. Lightly vetted (confidence: low).

  • date picker / marked dates / agenda list → react-native-calendars
  • design-system theming + list-perf discipline → @marceloterreiro/flash-calendar (FlashList-windowed, tiny)
  • event grid with gestures (drag-to-create, resize, pinch-zoom day/week views) → @super-calendar/native (new — verify on-device perf; stack requires Reanimated 4 + Gesture Handler + Legend List)
  • week-strip header UI → react-native-calendar-strip
  • web scheduler/event calendar → react-big-calendar or FullCalendar

Low confidence — fast-moving or lightly-vetted domain: treat the pick as a vetted lead and prototype before committing.

Options & tradeoffs

the field considered — and why each one isn’t the default here

optiontradeoffevidence
react-native-calendars (Wix)the long-standing de-facto RN calendar/date-marking suite (v1.13xx); Agenda/Calendar/CalendarList; huge adoption, older architecture521k/wk
@marceloterreiro/flash-calendar (2.x)performance-first calendar born at Shopify — windowed via a FlashList peer dep, tiny (~18kb min), headless-ish theming for design systems; picker/marking focus, not an event grid
@super-calendar/native (2.x)NEW (2026) gesture-driven EVENT GRID — month/week/day/3-day/schedule views, pinch-to-zoom time grid, drag-to-create/resize, recurring events, time zones; virtualized + paged; requires Reanimated 4 + Gesture Handler + Legend List; @super-calendar/dom renders the same core on web
react-native-calendar-strip (2.x)horizontal week-strip header pattern; narrow, settled use case9k/wk
web: FullCalendar / react-big-calendarestablished web event-calendar components (react-big-calendar 1.20); FullCalendar is the batteries-included commercial-tier option903k/wk

evidence: npm weekly downloads (signals snapshot) · “ships in n/D” = adoption across the production-app census, honest denominators

npm weekly downloads (from the corpus's last signals run): react-native-calendars 521k · @marceloterreiro/flash-calendar 52k · react-native-calendar-strip 9k · react-big-calendar 903k

Verified notes

NEW entry (2026-07-07): calendars are a common, hard UI need with a real competing-options landscape, surfaced by TWO independent signals in one week (Super Calendar in TWiR #288, then headlining RN Rewind ~#48). The durable split is PICKER/MARKING calendars (react-native-calendars, flash-calendar) vs full EVENT GRIDS (super-calendar; web's FullCalendar/react-big-calendar) — most apps need the first, calendar-app UX needs the second. Versions verified vs npm (react-native-calendars 1.1314 · flash-calendar 2.0.0 · @super-calendar/native 2.1.5 · calendar-strip 2.2.6 · react-big-calendar 1.20); Super Calendar's package names, views, and Reanimated-4/Gesture-Handler/Legend-List requirements verified vs its docs. Lightly vetted (confidence: low) — prototype gesture perf on low-end devices before committing.

Canonical reading

Editorial annotations on why each piece matters — the articles themselves are the originals; read them there.

Super Calendar — docs (views, gestures & architecture)Afonso Jorge Ramos

The reference for the new event-grid approach: a platform-free core with native (Reanimated 4 + Gesture Handler + Legend List) and DOM renderers, virtualized snap-paged views (month/week/day/3-day/schedule), and gesture semantics (pinch-to-zoom time grid, long-press drag, grip resize, drag-empty-space-to-create). Documents the stack a modern RN event grid actually requires — useful even if you pick something else.

Sources

Depth (in-domain rules) is owned by the react-native-best-practices skill — this entry is selection breadth.

Related in ui: styling · component-libs · animation · lists · a11y · i18n · charts · editors · svg · maps · polish