{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-calendar-10","type":"registry:block","title":"Display week numbers","description":"Display week numbers","dependencies":["react-day-picker"],"registryDependencies":["calendar","card"],"files":[{"path":"c-calendar-10.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport type { WeekNumberProps } from \"react-day-picker\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nexport function Pattern() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  return (\n    <Card className=\"p-0\">\n      <CardContent className=\"p-0\">\n        <Calendar\n          components={{\n            WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n              return (\n                <th {...props}>\n                  <span className=\"text-muted-foreground inline-flex size-8 items-center justify-center text-sm font-normal\">\n                    {week.weekNumber}\n                  </span>\n                </th>\n              )\n            },\n          }}\n          fixedWeeks\n          mode=\"single\"\n          onSelect={setDate}\n          selected={date}\n          showWeekNumber\n        />\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-calendar-10.tsx"}],"meta":{"order":10}}