shadcn/vue
DocsComponentsBlocksThemes

Getting Started

Introduction Installation components.json Theming Dark Mode CLI Typography Figma Changelog About Contribution

Installation

Vite Nuxt Astro Laravel

Extended

Auto Form Charts

Components

Sidebar NewAccordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Calendar Card Carousel Checkbox Collapsible Combobox Command Context Menu Data Table Date Picker Dialog Drawer Dropdown Menu Form Hover Card Input Label Menubar Navigation Menu Number Field Pagination PIN Input Popover Progress Radio Group Range Calendar Resizable Scroll Area Select Separator Sheet Skeleton Slider Sonner Stepper Switch Table Tabs Tags Input Textarea Toast Toggle Toggle Group Tooltip

On This Page

  1. docs
  2. components
  3. range-calendar

Range Calendar

A calendar component that allows users to select a range of dates.

Component Source API Reference
Event Date, February 2025
February 2025
SMTWTFS
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1

About ​

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

Installation ​

bash
npx shadcn-vue@latest add range-calendar
Edit this page on GitHub

On This Page

Built by shadcn. Ported to Vue by unovue . The code source is available on GitHub.