Skip to main content
Examples use the React Native Calendar; most props are shared with the dom renderer, and the dom vs native comparison lists what differs per renderer.
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 renders any slice you choose.

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

​
Event boxes

A timed event’s box is sized to its duration, with two guards you can tune:
  • minEventHeight — the floor on a box’s pixel height, so a 5-minute event stays legible and tappable. It is also the floor of the boxHeight passed to your renderEvent. Default 32 on native, 14 on the dom renderer. Pass 0 to size every box strictly by its duration.
  • eventGap — the inset in pixels between a box and its slot on each side, so adjacent boxes and column edges get some breathing room. Default 2 on native, 1 on the dom renderer. Pass 0 to let events fill the full slot.

​
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 for the shade colour). Return an array of windows to leave a closed gap between them, such as a lunch break:
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:
Saturday and Sunday columns are tinted with the weekend background by default. Pass highlightWeekends={false} to treat them like any other day (or recolour the tint via the weekendBackground theme token).

​
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; keyboard and screen-reader support in Accessibility. Style parts of the grid with per-slot classes, or recolour it via the theme.

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