50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T21ff,"use client" import { useState, type UIEvent } from "react" import { getLocalTimeZone, today } from "@internationalized/date" import type { DateValue, RangeCalendarProps, } from "react-aria-components/RangeCalendar" import { CalendarCell, CalendarGrid, CalendarGridBody, RangeCalendar as RangeCalendarPrimitive, } from "react-aria-components/RangeCalendar" import { twMerge } from "tailwind-merge" import { cx } from "@/lib/primitive" import { CalendarGridHeader, CalendarHeader } from "./calendar" function getClosestMonthIndex( track: HTMLDivElement | null, scrollLeft: number ) { if (!track) return 0 const months = Array.from(track.children) as Array if (months.length === 0) return 0 let closestIndex = 0 let closestDistance = Number.POSITIVE_INFINITY for (const [index, month] of months.entries()) { const distance = Math.abs(month.offsetLeft - scrollLeft) if (distance < closestDistance) { closestDistance = distance closestIndex = index } } return closestIndex } export function RangeCalendar({ className, visibleDuration = { months: 1 }, ...props }: RangeCalendarProps) { const now = today(getLocalTimeZone()) const visibleMonths = visibleDuration?.months ?? 1 const monthIds = Array.from( { length: visibleMonths }, (_, index) => index + 1 ) const shouldSnap = visibleMonths > 1 const [activeMonth, setActiveMonth] = useState(0) const activeMonthIndex = Math.min(activeMonth, visibleMonths - 1) function handleMonthScroll(event: UIEvent) { if (!shouldSnap) { return } const track = event.currentTarget const closestMonth = getClosestMonthIndex(track, track.scrollLeft) setActiveMonth(Math.min(closestMonth, visibleMonths - 1)) } return (

[data-slot=range-calendar-month]]:w-full data-[scroll-snap=true]:[&>[data-slot=range-calendar-month]]:shrink-0 data-[scroll-snap=true]:[&>[data-slot=range-calendar-month]]:snap-start data-[scroll-snap=true]:sm:[&>[data-slot=range-calendar-month]]:w-auto data-[scroll-snap=true]:sm:[&>[data-slot=range-calendar-month]]:shrink data-[scroll-snap=true]:sm:[&>[data-slot=range-calendar-month]]:snap-none", !shouldSnap && "overflow-clip" )} > {monthIds.map((id) => { return ( = 2 ? { months: id - 1 } : undefined} className="[&_td]:border-collapse [&_td]:px-0 [&_td]:py-0.5" > {(date) => ( {({ formattedDate, isSelected, isSelectionStart, isSelectionEnd, isDisabled, isFocusVisible, }) => { let selectedClassName: string | Array if (isSelected && (isSelectionStart || isSelectionEnd)) { selectedClassName = "bg-primary text-primary-foreground group-invalid/calendar-cell:bg-destructive group-invalid/calendar-cell:text-destructive-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:group-invalid/calendar-cell:bg-[Mark]" } else if (isSelected) { selectedClassName = [ // hover "group-hover/calendar-cell:bg-primary/15", // pressed "group-pressed/calendar-cell:bg-(--cell)", // invalid "group-invalid/calendar-cell:text-destructive group-invalid/calendar-cell:group-hover/calendar-cell:bg-destructive/10 group-invalid/calendar-cell:group-pressed/calendar-cell:bg-destructive/30", // forced-colors "forced-colors:group-pressed/calendar-cell:bg-[Highlight] forced-colors:group-invalid/calendar-cell:group-pressed/calendar-cell:bg-[Mark] forced-colors:text-[HighlightText] forced-colors:group-hover/calendar-cell:bg-[Highlight] forced-colors:group-invalid:group-hover/calendar-cell:bg-[Mark]", ] } else { selectedClassName = "group-hover/calendar-cell:bg-secondary-foreground/15 group-pressed/calendar-cell:bg-secondary-foreground/20 forced-colors:group-pressed/calendar-cell:bg-[Highlight]" } return ( {formattedDate} ) }} )} ) })}

) } interface RangeCalendarSwipePillsProps { shouldSnap: boolean monthIds: Array activeMonth: number } function RangeCalendarSwipePills({ shouldSnap, monthIds, activeMonth, }: RangeCalendarSwipePillsProps) { if (!shouldSnap) { return null } return ( ) } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@internationalized/date",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40internationalized%2Fdate","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@internationalized/date"}]]}]}],["$","li","react-aria-components",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-aria-components","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-aria-components"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["https://ui-three-mu.vercel.app/r/calendar.json","https://ui-three-mu.vercel.app/r/primitive.json"]}]]}],["$","$L51",null,{"sourceUrl":"https://ui-three-mu.vercel.app/r/range-calendar.json","proxyUrl":"https://shadcnregistry.com/r/preskok/range-calendar","itemId":"@preskok/range-calendar"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/range-calendar.tsx","content":"$53","type":"registry:ui"}]}]]}],"$L54"]}]

Range Calendar

Installation

Files

components

Styles