# Localize calendar

> Localize calendar

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-calendar-23
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-calendar-23-light-9778394ee5f2e5e6.png
- Registry item: https://reui.io/r/new-york-v4/c-calendar-23.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-23.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: `react-day-picker`
- Registry items: `calendar`, `card`, `select`

## Files

### `c-calendar-23.tsx`

```tsx
"use client"

import { useState } from "react"
import { type DateRange } from "react-day-picker"
import { enUS, zhCN } from "react-day-picker/locale"

import { Calendar } from "@/components/ui/calendar"
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const localizedStrings = {
  en: {
    title: "Schedule a meeting",
    description: "Choose your preferred dates",
  },
  zh: {
    title: "安排会议",
    description: "选择您偏好的日期",
  },
} as const

export function Pattern() {
  const [locale, setLocale] = useState<keyof typeof localizedStrings>("en")

  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(2026, 1, 9),
    to: new Date(2026, 1, 17),
  })

  return (
    <Card>
      <CardHeader className="flex items-center justify-between">
        <CardTitle>{localizedStrings[locale].title}</CardTitle>
        <CardAction>
          <Select
            value={locale}
            onValueChange={(value) =>
              setLocale(value as keyof typeof localizedStrings)
            }
          >
            <SelectTrigger className="w-[60px]" aria-label="Select language">
              <SelectValue placeholder="Language" />
            </SelectTrigger>
            <SelectContent align="start" alignItemWithTrigger={false}>
              <SelectItem value="zh">Chinese</SelectItem>
              <SelectItem value="en">English</SelectItem>
            </SelectContent>
          </Select>
        </CardAction>
      </CardHeader>

      <CardContent className="border-t pt-3">
        <Calendar
          mode="range"
          selected={dateRange}
          onSelect={setDateRange}
          defaultMonth={dateRange?.from}
          locale={locale === "zh" ? zhCN : enUS}
          numerals="latn"
          className="w-full bg-transparent p-0"
          buttonVariant="ghost"
        />
      </CardContent>
    </Card>
  )
}
```