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

# Time grid

> The week, day, 3-day, and custom hour-by-hour views.

<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="week"`, `day`, `3days`, and `custom` all render the time grid: one
column per day, hours down the side, events as positioned boxes, and an all-day
lane on top. `week` pages by the calendar week (set `weekStartsOn`: 0 = Sunday,
1 = Monday, and so on); `day` and `3days` page by their column count; [`custom`](/guides/views#custom-day-counts) renders any slice you
choose.

```tsx theme={null}
<Calendar
  mode="week"
  date={date}
  events={events}
  scrollOffsetMinutes={8 * 60} // open scrolled to 8am
  onChangeDate={setDate}
/>
```

## The hour axis

* `minHour` / `maxHour` — clamp the visible window (e.g. 7–20) instead of the
  full day.
* `hourHeight` — initial pixels per hour.
* Zooming rescales it between `minHourHeight` and `maxHourHeight`: pinch on
  native, Ctrl/⌘ + wheel on the web.
* `timeslots` — sub-hour divider lines per hour (e.g. `2` for half-hours).
* `ampm` — 12-hour labels; `hourComponent` replaces the label entirely.
* `hideHours` — collapse the hour gutter (the grid lines stay).
* `showWeekNumber` / `weekNumberPrefix` — ISO week number in the header gutter.
* `hiddenDays` — weekdays (0=Sunday…6=Saturday) dropped from the view, e.g.
  `[0, 6]` for a Monday–Friday business week. Count-based views keep their
  column count by skipping hidden days.

## The all-day lane

All-day events (flagged `allDay`, or spanning midnight-to-midnight) leave the
timed columns and stack in a lane above the grid. Turn it off with
`showAllDayEventCell={false}`.

## Now line and business hours

The red current-time line follows the wall clock (`showNowIndicator`, on by
default). `businessHours` shades the closed hours per day; return `null` for a
fully closed day (see [Theming](/guides/theming) for the shade colour).

To put your own content in the closed region (a label, an icon, a striped
pattern), add `renderBusinessHours`. The grid keeps positioning each band and
calls you with `{ date, start, end }` (fractional hours, clamped to the visible
window); the themed tint is dropped so your output owns the look. The band is
decorative: it stays non-interactive and hidden from assistive tech, so return
visuals, not buttons or announced text:

```tsx theme={null}
<Calendar
  mode="week"
  date={date}
  events={events}
  businessHours={() => ({ start: 9, end: 17 })}
  renderBusinessHours={({ start }) => <ClosedBand label={start === 0 ? "Opens 9am" : "Closed"} />}
  onChangeDate={setDate}
  onPressEvent={onPress}
/>
```

## Interaction

Tap handlers: `onPressCell` / `onLongPressCell` (empty grid space),
`onPressEvent` / `onLongPressEvent`, and `onPressDateHeader` (the day-column
headers). Drag-to-move, resize, and drag-to-create are covered in
[Dragging & creating](/guides/dragging); keyboard and screen-reader support in
[Accessibility](/guides/accessibility).

Style parts of the grid with per-slot [classes](/guides/styling), or recolour it
via the [theme](/guides/theming).

## Custom header (React Native)

Three `Calendar` props customize the area above the grid; all are native-only
(the dom renderer styles its header through the `header` / `columnHeader*`
[slots](/guides/styling) instead).

* `renderTimeGridHeader={(days: Date[]) => ReactNode}` **replaces** the built-in
  day-header row: the week-number gutter and the tappable weekday/date buttons
  disappear, and your element renders full-width in their place. `days` is the
  visible page's dates in column order. The all-day lane and the grid itself
  stay. To line your columns up with the grid's, leave a leading spacer as wide
  as the hour gutter (`hourColumnWidth`, default 56, or 0 with `hideHours`).
* `headerComponent={<YourToolbar />}` **inserts** an element, unchanged,
  between the day-header row and the grid. It takes no arguments and replaces
  nothing; the built-in header stays above it, and it doesn't scroll with the
  hours. Use it for a filter row, an avatar strip, or your own toolbar.
* `renderHeaderForMonthView={(weekDays: Date[]) => ReactNode}` is the month-grid
  equivalent of `renderTimeGridHeader`: it replaces the weekday-label header;
  return `null` to hide it.

```tsx theme={null}
<Calendar
  mode="week"
  date={date}
  events={events}
  headerComponent={
    <View style={{ flexDirection: "row", padding: 8 }}>
      <TeamFilter value={team} onChange={setTeam} />
    </View>
  }
  onChangeDate={setDate}
  onPressEvent={onPress}
/>
```