Range Calendar

Presents a calendar view tailored for selecting date ranges.

Installation


pnpm dlx shadcn@latest add @force-ui-vue/range-calendar

The <RangeCalendar /> component is built on top of the Reka UI Range Calendar component, which uses the @internationalized/date package to handle dates.

If you're looking for a normal calendar, check out the Calendar component.

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar"
</script>
 
<template>
  <RangeCalendar />
</template>

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.