{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", "title": "Calendar", "description": "Month grid for picking a day, range or several days; Turkish, Monday first.", "dependencies": [ "date-fns", "lucide-react", "react-day-picker" ], "registryDependencies": [ "@ikas/button", "@ikas/utils" ], "files": [ { "path": "registry/ui/calendar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Locale } from \"date-fns\"\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport { DayPicker, getDefaultClassNames, type DayButton } from \"react-day-picker\"\nimport { tr } from \"react-day-picker/locale\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype DayPickerProps = React.ComponentProps\n\n/** Every react-day-picker prop works; these are the ones with ikas defaults. */\ntype CalendarProps = DayPickerProps & {\n /** Language of month and weekday names, a react-day-picker or date-fns locale. */\n locale?: Partial\n /** First day of the week, 0 for Sunday. */\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n /** \"dropdown\" adds month and year selects; limit them with startMonth and endMonth. */\n captionLayout?: \"label\" | \"dropdown\" | \"dropdown-months\" | \"dropdown-years\"\n /** Fills the grid with the days of the previous and next month. */\n showOutsideDays?: boolean\n}\n\n/**\n * Month grid on react-day-picker for single, range and multiple selection.\n * Turkish and Monday-first by default; pass `locale` and `weekStartsOn` to change.\n * Set `captionLayout=\"dropdown\"` for month and year selects.\n */\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n locale = tr,\n weekStartsOn = 1,\n components,\n ...props\n}: CalendarProps) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\"relative flex flex-col gap-4 sm:flex-row sm:gap-6\", defaultClassNames.months),\n month: cn(\"flex w-full flex-col gap-3\", defaultClassNames.month),\n nav: cn(\"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\", defaultClassNames.nav),\n button_previous: cn(\n buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n \"z-10 size-(--cell-size) text-muted-foreground hover:text-foreground aria-disabled:opacity-40\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n \"z-10 size-(--cell-size) text-muted-foreground hover:text-foreground aria-disabled:opacity-40\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\", defaultClassNames.dropdowns),\n dropdown_root: cn(\n \"relative rounded-md bg-card shadow-raised transition-shadow hover:shadow-raised-hover has-focus-visible:ring-3 has-focus-visible:ring-ring/30\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\"absolute inset-0 cursor-pointer bg-popover opacity-0\", defaultClassNames.dropdown),\n caption_label: cn(\n \"font-medium capitalize select-none\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"flex h-7 items-center gap-1 rounded-md pr-1.5 pl-2.5 text-[13px] [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n defaultClassNames.caption_label\n ),\n month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"w-(--cell-size) flex-1 text-xs font-medium text-muted-foreground capitalize select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"mt-1 flex w-full\", defaultClassNames.week),\n week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n week_number: cn(\"text-xs text-muted-foreground select-none\", defaultClassNames.week_number),\n day: cn(\n \"group/day relative aspect-square h-full w-full p-0 text-center select-none\",\n defaultClassNames.day\n ),\n // The band behind a range sits on the cell, so the selected ends stay round.\n range_start: cn(\"rounded-l-md bg-muted\", defaultClassNames.range_start),\n range_middle: cn(\"rounded-none bg-muted\", defaultClassNames.range_middle),\n range_end: cn(\"rounded-r-md bg-muted\", defaultClassNames.range_end),\n today: cn(defaultClassNames.today),\n outside: cn(\"text-muted-foreground/70\", defaultClassNames.outside),\n disabled: cn(\"text-muted-foreground opacity-40\", defaultClassNames.disabled),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => (\n
\n ),\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") return \n if (orientation === \"right\") return \n return \n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => (\n \n
{children}
\n \n ),\n ...components,\n }}\n {...props}\n />\n )\n}\n\n/** One day in the grid. Exported so apps can wrap it, e.g. to add prices or dots. */\nfunction CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) {\n const defaultClassNames = getDefaultClassNames()\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n const end = modifiers.range_start || modifiers.range_end\n const single = modifiers.selected && !end && !modifiers.range_middle\n\n return (\n \n )\n}\n\nexport { Calendar, CalendarDayButton, type CalendarProps }\n", "type": "registry:ui" } ], "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/calendar", "categories": [ "primitives", "forms" ], "type": "registry:ui" }