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.

​
Chip dimensions

Set chipHeight and chipGap on Calendar, MonthView, or MonthList to size month lanes, spanning bars, and overflow rows. Native MonthPager forwards them too. Custom event renderers must fit inside the configured height. You can change either dimension after mounting, including in cached list and pager months. DOM defaults remain 18 px for height and 2 px for gaps. Native keeps its theme-derived height and 2 px gaps when you omit the options. Choose a smaller maxVisibleEventCount if larger chips cannot fit within your calendar height.

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