> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Month list

> A vertically-scrolling, continuous list of months (the date picker).

`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`](/reference/api) 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:

<Tip>
  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.
</Tip>

```tsx theme={null}
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](/guides/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.                          |