Components
Loading preview...
A RangeCalendar displays a calendar interface that allows users to select a range of dates. There is no standalone range calendar element in HTML. Two separate <input type="date"> elements could be used, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. RangeCalendar helps achieve accessible and international range calendar components that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/range-calendarimport {
CalendarCell,
CalendarGrid,
CalendarGridBody,
CalendarGridHeader,
CalendarHeaderCell,
CalendarHeading,
RangeCalendar,
} from "@/components/ui/range-calendar"
export function RangeCalendarDemo() {
return (
<RangeCalendar aria-label="Trip dates" className="bg-background rounded-lg px-2 py-3 border">
<CalendarHeading />
<CalendarGrid>
<CalendarGridHeader>
{(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
</CalendarGridHeader>
<CalendarGridBody>
{(date) => <CalendarCell date={date} />}
</CalendarGridBody>
</CalendarGrid>
</RangeCalendar>
)
}