> ## Documentation Index
> Fetch the complete documentation index at: https://afonsojramos-claude-issues-54-55-0b0zaz.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Month view

> The month grid, event chip fitting, overflow, and month paging.

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

`mode="month"` renders the classic month grid: a swipeable pager of 4–6 week
rows. A single-day event shows as a chip in its day cell; an event that covers
several days draws as one continuous bar spanning the columns it touches, so a
trip or holiday reads as a single block instead of a chip repeated on each day. A
bar that runs past a week's edge is squared off and continues on the next row.

```tsx theme={null}
<Calendar
  mode="month"
  date={date}
  events={events}
  onChangeDate={setDate}
  onPressDay={(day) => {
    setDate(day);
    setMode("day");
  }}
/>
```

## Event chips and overflow

Each week row stacks its events into lanes (a multi-day bar keeps its lane across
the days it spans) and shows as many lanes as the cell height allows, collapsing
the rest of a day's events into a `+N more` label.

```tsx theme={null}
<Calendar mode="month" /* ... */ />                            // auto-fit (default)
<Calendar mode="month" maxVisibleEventCount={3} /* ... */ />   // fixed cap
```

* `maxVisibleEventCount` — a fixed cap on **lanes per week row** instead of
  auto-fit. Because a multi-day bar occupies a lane across the whole week, a long
  bar can push a lightly-booked day's own events into `+N more`. Recommended when
  you pass a custom `renderEvent`, since auto-fit assumes the built-in chip height.
* `onPressMore` — tap the overflow label; receives the hidden events and the
  day. Without it, the built-in popover opens instead, listing the day's events
  (style it via the `morePopover` slot).
* `moreLabel` — customize the overflow text (e.g. `"+{moreCount}"`).
* `sortedMonthView` — sort each day's chips by start time (default on); all-day
  events lead the day.

## Grid shape

* `showTitle` — the built-in "July 2026" label above the grid (default on). Set
  `showTitle={false}` when your own header already shows the month and year, so
  the label isn't duplicated.
* `showSixWeeks` — always render six week rows for a fixed-height grid.
* `showAdjacentMonths` — show (dimmed) days from the neighbouring months
  (default on).
* `weekStartsOn` — 0 = Sunday, 1 = Monday, and so on.
* `weekdayFormat` — header label width: `narrow` ("M"), `short` ("Mon"), or
  `long` ("Monday").
* `hiddenDays` — weekdays (0=Sunday…6=Saturday) dropped from the grid and its
  header, e.g. `[0, 6]` for weekends off. Also applies to the year view.
* `highlightWeekends` — tint Saturday and Sunday cells with the weekend
  background (default on). Pass `highlightWeekends={false}` to treat them like any
  other day, or recolour the tint via the `weekendBackground`
  [theme](/guides/theming) token.

## Taps and custom cells

`onPressDay` / `onLongPressDay` fire for the cell, `onPressEvent` /
`onLongPressEvent` for a chip. `onPressCell` fires for the cell too, with the day
at midnight, so the handler you already use to create events on the week/day grid
works unchanged in month mode:

```tsx theme={null}
<Calendar
  mode="month"
  /* ... */
  onPressCell={(day) => openNewAppointment(day)} // midnight of the tapped day
  onPressDay={(day) => {
    setDate(day);
    setMode("day");
  }}
/>
```

Replace parts of the cell with `renderCustomDateForMonth` (the date badge) or a
custom `renderEvent` (see [Custom events](/guides/events)); restyle everything
else through the [theme](/guides/theming) or per-slot [classes](/guides/styling).

## Dragging

Month cells and chips are draggable too: pass `onCreateEvent` to sweep out an
all-day span across days, and `onDragEvent` to drop an event on another day
(keeping its time of day and duration). See
[Drag & create](/guides/dragging#on-the-month-grid).

## Selecting, creating, and moving by drag

The month grid is drag-driven too, in whole days. **Hold an empty day and drag**
across others (press and drag on the web) to sweep a span: `onSelectDrag` reports
it live as the ordered `[start, end]` days, `onCreateEvent` reports it once on
release as an all-day range. **Hold an event chip** and drop it on another day and
`onDragEvent` fires with the event shifted by whole days, keeping its time of day
and duration. `selectedDates` / `selectedRange` (with `minDate`, `maxDate`,
`isDateDisabled`) draw the selection.

```tsx theme={null}
<Calendar
  mode="month"
  /* ... */
  selectedRange={range ?? undefined}
  onSelectDrag={selectRange}
  onCreateEvent={createAllDay}
  onDragEvent={moveEvent}
/>
```

See [Drag & create](/guides/dragging) and
[Date selection](/guides/selection) for the details.

Looking for a vertically scrolling list of months instead of a pager, or an
events-free month grid for picking dates? That's [MonthList](/guides/month-list).