# V calendar 19

> Mini year view with all 12 months in a compact grid

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-calendar-19).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-calendar-19
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-calendar-19-light-030bf071ae1402e6.png
- Registry item: https://ui.cnippet.dev/r/v-calendar-19.json
- Categories: calendar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-19.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/calendar`

## Files

### `registry/default/variants/v-calendar-19.tsx`

```tsx
"use client";

import * as React from "react";
import { Calendar } from "@/registry/default/ui/calendar";

const today = new Date();

export default function Particle() {
  const [selected, setSelected] = React.useState<Date | undefined>();

  const months = Array.from({ length: 12 }, (_, i) => i);

  return (
    <div className="flex flex-col gap-3">
      <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
        {months.map((month) => (
          <div className="overflow-hidden rounded-lg border" key={month}>
            <Calendar
              className="[&_.rdp-nav]:hidden [&_table]:text-[10px] [&_td]:p-0 [&_th]:p-0 [&_th]:text-[9px]"
              defaultMonth={new Date(today.getFullYear(), month)}
              mode="single"
              onSelect={setSelected}
              selected={selected}
            />
          </div>
        ))}
      </div>
      {selected && (
        <p className="text-center text-muted-foreground text-sm">
          Selected:{" "}
          <span className="font-medium text-foreground">
            {selected.toLocaleDateString("en-US", {
              day: "numeric",
              month: "long",
              year: "numeric",
            })}
          </span>
        </p>
      )}
    </div>
  );
}
```