> ## 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.

# Views & modes

> Every surface the calendar can render, and the mode prop that picks one.

<Note>
  Examples use the React Native `Calendar`; most props are shared with the dom renderer, and the
  [dom vs native comparison](/reference/renderers) lists what differs per renderer.
</Note>

`Calendar` renders one view at a time, picked by `mode`:

```tsx theme={null}
<Calendar mode="week" date={date} events={events} onChangeDate={setDate} />
```

| View | `mode` | What it is |
| - | - | - |
| [Month](/guides/month-view) | `month` | The classic month grid with event chips. |
| [Time grid](/guides/time-grid) | `week`, `day`, `3days`, `custom` | Hour-by-hour columns with positioned event boxes. |
| [Schedule](/guides/schedule) | `schedule` | A vertical, day-grouped agenda list. |

Three more surfaces ship as standalone components rather than modes:

| Component | What it is |
| - | - |
| [MonthList](/guides/month-list) | An infinite vertically-scrolling list of months. |
| [ResourceTimeline](/guides/resource-timeline) | Rooms/people/machines as lanes over one day's hours. |
| [DateRangePicker](/guides/date-picker) | Date and range picking, standalone or as a form field. |

## Custom day counts

`custom` renders any number of columns. Set `numberOfDays` (e.g. `5` for a
work-week), or set `weekEndsOn` to show a fixed slice of the week
(`weekStartsOn`…`weekEndsOn`) that pages week by week.

```tsx theme={null}
<Calendar mode="custom" numberOfDays={5} date={date} events={events} onChangeDate={setDate} />
```

## Paging

Every paged view moves one page per swipe by default. Set `freeSwipe` to let a
fling carry across several pages (still snapping to a boundary), or
`swipeEnabled={false}` to page only programmatically. `onChangeDate` fires with
the new anchor date; `onChangeDateRange` (React Native) fires with the
`[start, end]` of the visible window. On react-native-web the pager follows the left/right arrow
keys; the dom renderer pages with PageUp/PageDown when `onChangeDate` is wired.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.