Month list

MonthList renders months stacked vertically in one continuous, virtualized scroll: a month-title separator followed by each month’s grid, under a single fixed weekday header. Each month shows only its own days (no dimmed adjacent-month fill), and sizes to its own row count. It’s the home for date picking. It takes the same selection props as MonthView and renders a range band that flows continuously across month boundaries, which the horizontally-paged month view can’t do. An events-free picker needs nothing but date and the selection wiring:

For a picker-only app, import from the @super-calendar/native/picker entry point. It excludes the timetable views and Reanimated, so the bundle stays small and you can skip the react-native-reanimated / react-native-worklets peers.

import { MonthList, useDateRange } from "@super-calendar/native";

function RangePicker() {
  const [date, setDate] = useState(new Date());
  const { range, onPressDate, selectRange } = useDateRange({ minDate: new Date() });

  return (
    <MonthList
      date={date}
      weekStartsOn={1}
      selectedRange={range ?? undefined}
      minDate={new Date()}
      onPressDay={onPressDate}
      onSelectDrag={selectRange}
      onChangeVisibleMonth={setDate}
    />
  );
}

Tap two days to set the range ends, or long-press and drag to sweep one out (the list auto-scrolls at the edges so a range can span months). Pass events (plus an optional renderEvent) to show events in the grids too; it reuses MonthView, so events, selection, and disabled days behave as in the month view.

Props

Prop	Type	Notes
`date`	`Date`	The month scrolled to on mount.
`weekStartsOn`	`0–6`	First day of the week.
`events`	`CalendarEvent<T>[]`	Optional; omit for an events-free picker.
`weekRowHeight`	`number`	Height of each week row (px). Default 56.
`monthHeaderHeight`	`number`	Title-row height (px). Default 44. A custom header must fit it.
`renderEvent`	`RenderEvent<T>`	Optional; defaults to `DefaultEvent`.
`keyExtractor`	`(event, index) => string`	Optional; defaults to start-time + index.
`selectedDates`	`Date[]`	Selected days (see Selection).
`selectedRange`	`DateRange`	Selected span.
`minDate` / `maxDate`	`Date`	Bound the selectable range.
`isDateDisabled`	`(date) => boolean`	Disable specific days.
`onSelectDrag`	`(start, end) => void`	Drag-to-select; pair with `useDateRange().selectRange`.
`showAdjacentMonths`	`boolean`	Show dimmed adjacent-month days. Default `false`.
`highlightWeekends`	`boolean`	Tint weekend day cells. Default `true`.
`onPressDay`	`(date) => void`	Tap a day cell.
`onChangeVisibleMonth`	`(month) => void`	Fires with the topmost month once it’s ~60% visible.
`renderMonthHeader`	`(month) => ReactNode`	Replace the default `LLLL yyyy` title.

Getting started

Migrating

Views

Events

Styling

Interaction & accessibility

Packages & platforms

Reference

Props

​Props

Props