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="year" renders the year at a glance: twelve compact mini months in a
responsive grid, with today highlighted and a dot under any day that holds an
event. Days and month titles are tappable, so it works as the top of a
drill-down: year → month → day.
What a mini month shows
Each month renders its title, narrow weekday initials, and the day grid, with adjacent-month days left blank. Events are summarised, not rendered: a day with at least one event gets a small dot (recurring rules are expanded across the whole year first). Today gets the theme’s filled badge; passactiveDate to
highlight a different day.
Selecting dates
The mini months take the same selection props as the month grid and the picker:selectedDates, selectedRange, minDate, maxDate, and isDateDisabled.
Selected days and range endpoints get the filled badge (today still wins where
they coincide), the days between get the range band, and disabled days are dimmed
and ignore taps.
onSelectDrag adds drag-to-select: hold a day and drag across others (press
and drag on the web) and it fires live with the ordered inclusive [start, end],
so the highlight follows the gesture. Pair it with useDateRange:
Creating events
onCreateEvent reports the same sweep once, on release, as an all-day range:
start at midnight of the first day and end at midnight after the last
(exclusive). A plain tap still fires onPressDay, so drill-down and creation can
coexist.
onDragEvent (drag an event to another day) applies to
month mode, not year. See Drag & create.
Layout
The grid fits as many columns as the width allows, so a phone gets 2 columns and a desktop 3–4.minMonthWidth (default 150) sets the narrowest a mini
month may be before the grid drops a column.
Paging
The year view has no swipe pager: page it from your own toolbar throughonChangeDate (e.g. addYears(date, 1)). On the web, the dom renderer pages a
year at a time with PageUp/PageDown when onChangeDate is wired.
Standalone use
YearView is exported from both packages if you want it outside Calendar,
e.g. as a date-jump overview in your own chrome:
Styling
Every part is a slot:grid, month, monthTitle,
weekdays, weekday, week, day, dayBadge, rangeBand, and eventDot
(plus dayText on React Native, where text colour doesn’t inherit). On the web,
day cells carry data-today, data-events, data-selected, data-range,
data-disabled, and data-creating for Tailwind variants. The theme’s
todayBackground / todayText drive the badge and dots, and rangeBackground
the selection band.
The today / selected circle now lives on the
dayBadge slot, not day (which is the cell around
it), matching the month grid. If you were restyling that circle through classNames.day or
styles.day, move those overrides to dayBadge.