@super-calendar/native

The React Native renderer for super-calendar: a gesture-driven, virtualized month / week / day calendar and date picker. Runs on iOS, Android, and web (web via react-native-web).

• 📆 Month grid plus day / 3-day / week / custom-N time grids and an agenda
• 🤏 Pinch-to-zoom week/day grid (UI thread, no re-renders)
• ✋ Drag to select, create, and move: by time on the week/day grid, by whole days on the month and year grids
• ♾️ Virtualized, snap-paging views via @legendapp/list
• 🧩 Bring-your-own event type (CalendarEvent<T>) and a renderEvent escape hatch
• 🪝 Headless useMonthGrid and useDateRange for fully custom UIs
• 🎨 Themeable, with a darkTheme preset

Install

npm install @super-calendar/native

Also on JSR: deno add jsr:@super-calendar/native.

Peer dependencies: @legendapp/list (>=3), date-fns (>=3), react (>=19), react-native (>=0.74 <2), react-native-gesture-handler (>=2), react-native-reanimated (>=4), and react-native-worklets (>=0.8).

For a picker-only bundle that does not require Reanimated, import from the @super-calendar/native/picker subpath.

Usage

import { useState } from "react";
import { Calendar, type CalendarEvent } from "@super-calendar/native";

type MyEvent = { id: string; color: string };

const events: CalendarEvent<MyEvent>[] = [
  {
    id: "1",
    color: "#1F6FEB",
    title: "Lecture",
    start: new Date(2026, 5, 19, 10, 0),
    end: new Date(2026, 5, 19, 11, 30),
  },
];

export function MyCalendar() {
  const [mode, setMode] = useState<"month" | "week" | "day">("week");
  const [date, setDate] = useState(new Date());

  return (
    <Calendar
      mode={mode}
      date={date}
      events={events}
      weekStartsOn={1}
      onChangeDate={setDate}
      onPressEvent={(event) => console.log(event.id)}
      onPressDay={(day) => {
        setDate(day);
        setMode("day");
      }}
    />
  );
}

Moving events

Pass onDragEvent and update your event state with the returned start and end. On the time grid, dragging any segment of a multi-day event previews the whole range moving together and preserves its duration. Drag a resize grip to change only the start or end. See the dragging guide.

After edge paging, the floating event's horizontal centre selects the destination day, and its top edge selects the time.

Set an event's dragHandleColor to colour its resize grips in TimeGrid and ResourceTimeline (both orientations). It defaults to theme.colors.eventText. showDragHandle={false} still hides the time-grid grips. You can toggle it after mounting without replacing the events array.

Styling with Tailwind

Every styleable part is a named slot that accepts a class (resolved by a Tailwind runtime such as uniwind or NativeWind) and/or a style override. A classed slot drops its built-in themed styles, so your classes own the look:

<Calendar
  mode="month"
  date={date}
  events={events}
  classNames={{
    title: "text-center text-xl font-bold text-indigo-900",
    weekday: "uppercase tracking-wider text-indigo-400",
  }}
  styles={{ more: { color: "#6366F1" } }}
  onChangeDate={setDate}
  onPressEvent={(event) => console.log(event.id)}
/>

See the styling guide for the slot list and the uniwind setup.

chipHeight and chipGap configure month lanes and overflow rows on Calendar, MonthView, and MonthList. Native MonthPager forwards them too. DOM defaults remain 18 px height and 2 px gaps; native height keeps its theme default. Changing either dimension updates already mounted list and pager months. See the month guide.

Documentation

See the full documentation and the quickstart, including theming, recurring events, time zones, and the headless picker.

License

MIT