@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)
• ♾️ 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.85), 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");
      }}
    />
  );
}

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.

Documentation

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

License

MIT