# Calendar page

> A single-date calendar paired with the selected day's session list, in one studio-schedule card.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/calendar-page).

- Page, with a live preview: https://shadcn.exchange/r/quill/calendar-page
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/calendar-page-light-2553f69bef823249.png
- Registry item: https://www.quilldesignsystem.com/r/calendar-page.json
- Categories: scheduling
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/calendar-page.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: `card`, `calendar`, `badge`, `separator`

## Notes from the registry

A single-date calendar paired with the selected day's session list, in one studio-schedule card. Do: Keep the session list in sync with whatever date is selected in the calendar — the two panes are one control, not two independent widgets. Don't: Let the calendar selection and the listed sessions fall out of sync (e.g. a static list that ignores the picked date). Use calendar-range when the user is booking a span of days, not viewing what's scheduled on one. Use activity-feed when you want a chronological history of past events, not a schedule of upcoming sessions tied to a picked date.

## Files

### `registry/blocks/calendar-page.tsx`

```tsx
'use client'
import { useState } from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Calendar } from '@/components/ui/calendar'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'

const sessions = [
  { time: '9:00', title: 'Design review', kind: 'Internal' },
  { time: '11:30', title: 'Token sync with Northwind', kind: 'Call' },
  { time: '15:00', title: 'Working session', kind: 'Workshop' },
]

/** A single-date calendar paired with the selected day's session list, in one studio-schedule card. */
export function CalendarPage() {
  const [date, setDate] = useState<Date | undefined>(new Date(2026, 6, 14))
  return (
    <Card className="w-fit">
      <CardHeader>
        <CardTitle>Week ahead</CardTitle>
        <CardDescription>Pick a day to see its sessions.</CardDescription>
      </CardHeader>
      <CardContent className="flex items-start gap-6 max-md:flex-col">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          defaultMonth={new Date(2026, 6)}
          className="rounded-lg border border-border"
        />
        <div className="flex w-[240px] flex-col gap-3">
          <span className="text-sm font-medium text-foreground">Tuesday, July 14</span>
          <Separator />
          <ul className="flex flex-col gap-3">
            {sessions.map((s) => (
              <li key={s.time} className="flex items-start gap-3">
                <span className="w-11 shrink-0 pt-0.5 text-xs font-medium text-muted-foreground">
                  {s.time}
                </span>
                <div className="flex flex-col items-start gap-1">
                  <span className="text-sm font-medium text-foreground">{s.title}</span>
                  <Badge variant="outline">{s.kind}</Badge>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}
```