> ## Documentation Index
> Fetch the complete documentation index at: https://afonsojramos-claude-issues-54-55-0b0zaz.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Year view

> The twelve-month year grid, with a dot under days that hold events.

<Note>
  Examples use the React Native `Calendar`; most props are shared with the dom renderer, and the
  [dom vs native comparison](/reference/renderers) lists what differs per renderer.
</Note>

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

```tsx theme={null}
<Calendar
  mode="year"
  date={date}
  events={events}
  onChangeDate={setDate}
  onPressDay={(day) => {
    setDate(day);
    setMode("day");
  }}
  onPressMonth={(month) => {
    setDate(month);
    setMode("month");
  }}
/>
```

## 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; pass `activeDate` 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`:

```tsx theme={null}
const { range, onPressDate, selectRange } = useDateRange();

<Calendar
  mode="year"
  date={date}
  events={events}
  onChangeDate={setDate}
  selectedRange={range ?? undefined}
  onPressDay={onPressDate}
  onSelectDrag={selectRange}
/>;
```

On a device a sweep runs across the days of the mini month it started in; on the
web it can carry on across mini months. See [Date selection](/guides/selection)
for the full selection model.

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

```tsx theme={null}
<Calendar
  mode="year"
  /* ... */
  onCreateEvent={(start, end) =>
    setEvents((prev) => [...prev, { id: makeId(), title: "Leave", start, end, allDay: true }])
  }
/>
```

Because the year view summarises events as dots rather than chips, there is
nothing to pick up: `onDragEvent` (drag an event to another day) applies to
`month` mode, not `year`. See [Drag & create](/guides/dragging).

## 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 through
`onChangeDate` (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:

```tsx theme={null}
import { YearView } from "@super-calendar/native";

<YearView date={date} events={events} weekStartsOn={1} onPressDay={jumpTo} />;
```

## Styling

Every part is a [slot](/guides/styling): `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.

<Note>
  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`.
</Note>