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, with each day cell showing its event chips.

​
Event chips and overflow

Each day cell shows as many chips as its height allows and collapses the rest into a +N more label.
  • maxVisibleEventCount — a fixed cap instead of auto-fit. 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

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

​
Taps and custom cells

onPressDay / onLongPressDay fire for the cell, onPressEvent / onLongPressEvent for a chip. 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. Looking for a vertically scrolling list of months instead of a pager, or an events-free month grid for picking dates? That’s MonthList.