Calendar

按月展示的日期选择器。每一天都是两端带切角的小号斜切块，一周便是一行彼此嵌合的平行四边形。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/calendar

示例

单日，以及带年月下拉菜单的日期范围

calendar-shift.tsx

import { Suspense, useState } from "react";import type { DateRange } from "react-day-picker";import { Calendar } from "@/components/zero/calendar";import { Skeleton } from "@/components/zero/skeleton";function Calendars() {  const [day, setDay] = useState<Date | undefined>(new Date(2026, 9, 24));  const [range, setRange] = useState<DateRange | undefined>({    from: new Date(2026, 9, 20),    to: new Date(2026, 9, 24),  });  return (    <div className="flex flex-wrap gap-6">      <div className="panel">        <Calendar          mode="single"          selected={day}          onSelect={setDay}          defaultMonth={new Date(2026, 9)}        />      </div>      <div className="panel">        <Calendar          mode="range"          labels={{ labelNav: () => "Range calendar" }}          selected={range}          onSelect={setRange}          defaultMonth={new Date(2026, 9)}          captionLayout="dropdown"        />      </div>    </div>  );}export default function CalendarShift() {  return (    <Suspense      fallback={<Skeleton className="h-[18rem] w-[36rem] max-w-full" />}    >      <Calendars />    </Suspense>  );}

行为

选中的日期以强调色填充；选择范围时，首尾两天为强调色，中间各天为浮起色。今天的日期数字为强调色，并带下划线。按方向键可在日期之间移动焦点。

底层是 react-day-picker，DayPicker 的所有属性均可使用：mode、selected、disabled、numberOfMonths、locale。组件需要读取当前日期来标记今天，因此启用 Next 的 cacheComponents 时，应将其渲染在 Suspense 边界内，示例即是如此。

属性

Calendar

属性	类型	默认值	说明
mode	"single" \| "multiple" \| "range"	—	选择方式。
captionLayout	"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"	"label"	显示月份名称，或用于跳转的下拉菜单。
showOutsideDays	boolean	true	以灰色显示前后月份的日期。