# Calendar View

> Day, week, and month layouts with event overflow.

- Category: Data Display
- Kind: component
- Page: https://uaiblocks.dev/components/calendar-view
- Registry item: https://uaiblocks.dev/r/calendar-view.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/calendar-view.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/calendar-view.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  CalendarView,
  CalendarViewGrid,
  CalendarViewHeader,
  CalendarViewModes,
  CalendarViewNavigation,
  CalendarViewTitle,
  type CalendarViewVariant,
} from "@/components/ui/uai/calendar-view";

const events = [
  { id: "1", title: "Quarterly planning", start: new Date(2026, 8, 30), allDay: true },
  {
    id: "2",
    title: "Design review",
    start: new Date(2026, 8, 30, 10),
    end: new Date(2026, 8, 30, 11),
  },
  {
    id: "3",
    title: "Billing sync",
    start: new Date(2026, 8, 30, 13, 30),
    end: new Date(2026, 8, 30, 14),
  },
  {
    id: "4",
    title: "Customer call: Northwind",
    start: new Date(2026, 8, 30, 16),
    end: new Date(2026, 8, 30, 16, 45),
  },
  { id: "5", title: "Release 4.2 freeze", start: new Date(2026, 9, 2, 9) },
  {
    id: "6",
    title: "Team offsite",
    start: new Date(2026, 8, 14),
    end: new Date(2026, 8, 16),
    allDay: true,
  },
  {
    id: "7",
    title: "Security audit kickoff",
    start: new Date(2026, 8, 22, 15),
    end: new Date(2026, 8, 22, 16),
  },
];

export function CalendarViewPreview({ variant = "card" }: { variant?: CalendarViewVariant }) {
  const [selected, setSelected] = useState("");
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <CalendarView variant={variant} today={new Date(2026, 8, 30)}>
        <CalendarViewHeader>
          <CalendarViewTitle />
          <CalendarViewNavigation />
          <CalendarViewModes />
        </CalendarViewHeader>
        <CalendarViewGrid events={events} onEventSelect={(event) => setSelected(event.title)} />
      </CalendarView>
      <p
        role="status"
        style={{ margin: 0, minHeight: 18, color: "var(--uai-muted)", fontSize: 12 }}
      >
        {selected ? `Opened ${selected}` : ""}
      </p>
    </div>
  );
}
```

## Anatomy

- `CalendarView`
  - `CalendarViewHeader`
    - `CalendarViewTitle`
    - `CalendarViewNavigation`
    - `CalendarViewModes`
  - `CalendarViewGrid`

## Accessibility

- Month and week layouts are native tables with weekday column headers; each day has a full-date label and today has aria-current="date".
- Navigation and layout controls are buttons with explicit labels and pressed states, and the title announces the visible range.
- Overflow buttons say how many events are hidden and on which day, then open that day.
- Dates use local calendar days without timezone conversion. Pass today to keep server and client output stable.