# Calendar with event list

> Calendar with event list

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-calendar-22).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-calendar-22
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-calendar-22-light-86a49af1ba438fd1.png
- Registry item: https://reui.io/r/new-york-v4/c-calendar-22.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-calendar-22.json
```

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

## Dependencies

- npm packages: `cn`, `little-date`
- Registry items: `button`, `calendar`, `card`

## Files

### `c-calendar-22.tsx`

```tsx
"use client"

import { useState } from "react"
import { formatDateRange } from "little-date"

import { cn } from "cn"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const events = [
  {
    title: "Product Launch",
    start: "2026-01-24T10:00:00",
    end: "2026-01-24T11:30:00",
    colorful: "after:bg-green-500",
  },
  {
    title: "Weekly Standup",
    start: "2026-01-28T13:00:00",
    end: "2026-01-28T13:30:00",
    colorful: "after:bg-yellow-500",
  },
  {
    title: "Code Review Session",
    start: "2026-01-31T15:00:00",
    end: "2026-01-31T16:00:00",
    colorful: "after:bg-blue-500",
  },
]

export function Pattern() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Card className="w-2xs py-4">
      <CardContent className="px-4">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          className="w-full bg-transparent p-0"
          required
        />
      </CardContent>
      <CardFooter className="flex flex-col items-start gap-3 border-t px-4! pt-3! pb-0!">
        <div className="flex w-full items-center justify-between px-1">
          <div className="text-sm font-medium">
            {date?.toLocaleDateString("en-US", {
              day: "numeric",
              month: "long",
              year: "numeric",
            })}
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="size-6"
            title="Add Event"
          >
            <IconPlaceholder
              lucide="PlusIcon"
              tabler="IconPlus"
              hugeicons="PlusSignIcon"
              phosphor="PlusIcon"
              remixicon="RiAddLine"
            />
            <span className="sr-only">Add Event</span>
          </Button>
        </div>
        <div className="flex w-full flex-col gap-2">
          {events.map((event) => (
            <div
              key={event.title}
              className={cn(
                "bg-muted relative p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1",
                "rounded-md",
                "after:rounded-full",
                event.colorful
              )}
            >
              <div className="font-medium">{event.title}</div>
              <div className="text-muted-foreground text-xs">
                {formatDateRange(new Date(event.start), new Date(event.end))}
              </div>
            </div>
          ))}
        </div>
      </CardFooter>
    </Card>
  )
}
```