@wts-calendar/react-native

Official iOS and Android renderer for @wts-calendar/core. It uses the same calendar date policy, recurrence engine, event model, navigation behavior, and mutation API without mounting browser DOM.

Install

npm install @wts-calendar/core @wts-calendar/react-native

React and React Native are peer dependencies. React Native 0.76 or newer is supported. The packed public declarations have been consumer-checked against React Native 0.76 with React 18 and React Native 0.87 with React 19.

Basic usage

import { WtsCalendarNative } from "@wts-calendar/react-native";

export function Schedule() {
  return (
    <WtsCalendarNative
      initialOptions={{ view: "month", timeZone: "local", firstDay: 1 }}
      events={[
        { id: "launch", title: "Launch", start: "2026-09-10T10:00:00" },
      ]}
      onEventPress={(event) => console.log(event.id)}
    />
  );
}

The component includes month, week, day, and virtualized list views, accessible native controls, customizable themes, custom event rendering, event/date callbacks, hidden weekdays, valid ranges, time-zone-aware date arithmetic, and legacy/RRULE recurrence.

Use a ref to access the shared controller:

const calendarRef = useRef<WtsCalendarNativeHandle>(null);
calendarRef.current?.getApi().next();
calendarRef.current?.getApi().addEvent({ title: "Review", start: new Date() });

No HTMLElement, WebView, CSS file, or separate headless package is required.