1# Range Calendar
2 
3Calendar for date ranges (alpha)
4 
5**Parts:** `RangeCalendarRoot`, `RangeCalendarHeader`, `RangeCalendarHeading`, `RangeCalendarGrid`, `RangeCalendarCell`, `RangeCalendarCellTrigger`, `RangeCalendarNext`, `RangeCalendarPrev`
6 
7## RangeCalendarRoot
8 
9### Props
10| Prop | Type | Default |
11|------|------|---------|
12| `as` | `AsTag \| Component` | `"div"` |
13| `asChild` | `boolean` | - |
14| `calendarLabel` | `string` | - |
15| `defaultPlaceholder` | `DateValue` | - |
16| `defaultValue` | `DateRange` | `{ start: undefined, end: undefined }` |
17| `dir` | `"ltr" \| "rtl"` | - |
18| `disabled` | `boolean` | `false` |
19| `fixedWeeks` | `boolean` | `false` |
20| `initialFocus` | `boolean` | `false` |
21| `isDateDisabled` | `Matcher` | - |
22| `isDateUnavailable` | `Matcher` | - |
23| `locale` | `string` | `"en"` |
24| `maxValue` | `DateValue` | - |
25| `minValue` | `DateValue` | - |
26| `modelValue` | `DateRange` | - |
27| `nextPage` | `((placeholder: DateValue) => DateValue)` | - |
28| `numberOfMonths` | `number` | `1` |
29| `pagedNavigation` | `boolean` | `false` |
30| `placeholder` | `DateValue` | - |
31| `preventDeselect` | `boolean` | `false` |
32| `prevPage` | `((placeholder: DateValue) => DateValue)` | - |
33| `readonly` | `boolean` | `false` |
34| `weekdayFormat` | `"narrow" \| "short" \| "long"` | `"narrow"` |
35| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` |
36 
37### Emits
38| Event | Payload |
39|-------|---------|
40| `update:modelValue` | `[date: DateRange]` |
41| `update:placeholder` | `[date: DateValue]` |
42| `update:startValue` | `[date: DateValue]` |
43 
44### Slots
45| Slot | Type |
46|------|------|
47| `date` | `DateValue` |
48| `grid` | `Grid<DateValue>[]` |
49| `weekDays` | `string[]` |
50| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` |
51| `locale` | `string` |
52| `fixedWeeks` | `boolean` |
53 
54## RangeCalendarHeader
55 
56### Props
57| Prop | Type | Default |
58|------|------|---------|
59| `as` | `AsTag \| Component` | `"div"` |
60| `asChild` | `boolean` | - |
61 
62## RangeCalendarHeading
63 
64### Props
65| Prop | Type | Default |
66|------|------|---------|
67| `as` | `AsTag \| Component` | `"div"` |
68| `asChild` | `boolean` | - |
69 
70### Slots
71| Slot | Type |
72|------|------|
73| `headingValue` | `string` |
74 
75## RangeCalendarGrid
76 
77### Props
78| Prop | Type | Default |
79|------|------|---------|
80| `as` | `AsTag \| Component` | `"table"` |
81| `asChild` | `boolean` | - |
82 
83## RangeCalendarCell
84 
85### Props
86| Prop | Type | Default |
87|------|------|---------|
88| `as` | `AsTag \| Component` | `"td"` |
89| `asChild` | `boolean` | - |
90| `date`* | `DateValue` | - |
91 
92## RangeCalendarCellTrigger
93 
94### Props
95| Prop | Type | Default |
96|------|------|---------|
97| `as` | `AsTag \| Component` | `"div"` |
98| `asChild` | `boolean` | - |
99| `day`* | `DateValue` | - |
100| `month`* | `DateValue` | - |
101 
102### Slots
103| Slot | Type |
104|------|------|
105| `dayValue` | `string` |
106 
107## RangeCalendarNext
108 
109### Props
110| Prop | Type | Default |
111|------|------|---------|
112| `as` | `AsTag \| Component` | `"button"` |
113| `asChild` | `boolean` | - |
114| `nextPage` | `((placeholder: DateValue) => DateValue)` | - |
115| `step` | `"month" \| "year"` | - |
116 
117## RangeCalendarPrev
118 
119### Props
120| Prop | Type | Default |
121|------|------|---------|
122| `as` | `AsTag \| Component` | `"button"` |
123| `asChild` | `boolean` | - |
124| `prevPage` | `((placeholder: DateValue) => DateValue)` | - |
125| `step` | `"month" \| "year"` | - |
126