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="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.

​
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.
  • 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 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:
Replace parts of the cell with renderCustomDateForMonth (the date badge) or a custom renderEvent (see Custom events); restyle everything else through the theme or per-slot classes.

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

​
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.
See Drag & create and Date 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.