Coming from react-big-calendar

import { Calendar, dateFnsLocalizer } from "react-big-calendar";

const localizer = dateFnsLocalizer(/* ... */);

<Calendar
  localizer={localizer}
  events={events}
  defaultView="week"
  onSelectEvent={(event) => open(event)}
  onSelectSlot={(slot) => create(slot.start, slot.end)}
  selectable
/>;

import { useState } from "react";
import { Calendar } from "@super-calendar/dom";

function Schedule({ events }) {
  const [date, setDate] = useState(() => new Date());
  return (
    <Calendar
      mode="week"
      date={date}
      onChangeDate={setDate}
      events={events}
      onPressEvent={(event) => open(event)}
      onCreateEvent={(start, end) => create(start, end)}
    />
  );
}

You are porting a react-big-calendar app to super-calendar. On the web import
from `@super-calendar/dom`; on React Native import from `@super-calendar/native`
(add Reanimated v4, Gesture Handler, Worklets, @legendapp/list v3, date-fns and
wrap the app in <GestureHandlerRootView>). Rewrite the calendar element rather
than renaming a localizer.

1. Drop the `localizer`. Pass `weekStartsOn` and, for non-English, a date-fns
   `Locale` as `locale`. Ensure event `start`/`end` are Date objects (not the
   accessor strings); fold startAccessor/endAccessor/titleAccessor into the event
   shape { start, end, title, ...yourFields }.
2. Replace `view`/`onView` with `mode`, and `date`/`onNavigate` with `date` +
   `onChangeDate`. Map views: month->"month", week->"week", day->"day",
   agenda->"schedule".
3. Handlers: onSelectEvent -> onPressEvent; onSelectSlot -> onCreateEvent (drag)
   and onPressCell/onPressDay (tap).
4. Drag/resize: remove the withDragAndDrop HOC and onEventDrop/onEventResize; add
   onDragEvent(event, start, end) (return false to reject). Set eventOverlap={false}
   to block overlaps declaratively.
5. Custom rendering: components.event -> a `renderEvent` component;
   components.toolbar -> your own controls or `headerComponent`; eventPropGetter/
   dayPropGetter -> eventCellStyle/calendarCellStyle (and per-slot `classNames`
   on the web renderer).
6. Time-grid bounds min/max -> minHour/maxHour.
7. Recurrence: react-big-calendar has none; if you expanded rules yourself, use
   `expandRecurringEvents(events, rangeStart, rangeEnd)` over the visible range.
8. Note react-big-calendar treats the end date as exclusive; check all-day and
   multi-day spans render as you expect and adjust the end if needed.

Then run the app and verify views, selection, event placement, and drag.