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.