Skip to main content

Prerequisites

A React Native app on the new architecture, with these peer dependencies installed: react-native-reanimated (v4), react-native-gesture-handler, react-native-worklets, and @legendapp/list (v3). The Expo SDK includes compatible versions.

Install

1

Add the package and peers

npx expo install react-native-super-calendar react-native-reanimated react-native-gesture-handler react-native-worklets @legendapp/list date-fns
2

Wrap your app in GestureHandlerRootView

Gesture Handler needs a root view at the top of your tree.
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return <GestureHandlerRootView style={{ flex: 1 }}>{/* ... */}</GestureHandlerRootView>;
}
3

Render a calendar

<Calendar> is controlled: you own date and events, and update them from its callbacks.
import { useState } from "react";
import { Calendar, type CalendarEvent, type CalendarMode } from "react-native-super-calendar";

const events: CalendarEvent[] = [
  { title: "Standup", start: new Date(2026, 5, 23, 9, 0), end: new Date(2026, 5, 23, 9, 30) },
];

export function MyCalendar() {
  const [date, setDate] = useState(() => new Date());
  const [mode, setMode] = useState<CalendarMode>("week");
  return (
    <Calendar
      mode={mode}
      date={date}
      events={events}
      weekStartsOn={1}
      onChangeDate={setDate}
      onPressEvent={(event) => console.log(event.title)}
    />
  );
}
Targeting the web too? See the Web guide for the extra peers and how the touch gestures map to mouse and keyboard.

Next steps

Custom events

Type your events and render them your way.

Dragging & creating

Turn on move, resize, and drag-to-create.

Modes

Month, week, day, 3-day, and schedule.

Theming

Colors, dark mode, and business hours.