RangeCalendar

A calendar for selecting a date range. Uses the same grid structure as Calendar but supports start/end range selection.

Example

Range: 2026-04-03 to 2026-04-10

Root Props

Prop	Type	Default	Description
`value`	`{ start: DateValue; end: DateValue }`	—	Selected date range, bindable
`onValueChange`	`(value) => void`	—	Called when range changes
`placeholder`	`DateValue`	—	Controls visible month, bindable
`minValue`	`DateValue`	—	Minimum selectable date
`maxValue`	`DateValue`	—	Maximum selectable date
`disabled`	`boolean`	`false`	Disable the calendar
`readonly`	`boolean`	`false`	Prevent selection changes
`numberOfMonths`	`number`	`1`	Months shown at once
`pagedNavigation`	`boolean`	`false`	Navigate by full page of months
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First day of week (0 = Sunday)
`weekdayFormat`	`'long' \| 'short' \| 'narrow'`	`'narrow'`	Weekday header format
`isDateDisabled`	`DateMatcher`	—	Function to disable specific dates
`isDateUnavailable`	`DateMatcher`	—	Function to mark dates unavailable
`fixedWeeks`	`boolean`	`false`	Always show 6 weeks
`minDays`	`number`	—	Minimum range length in days
`maxDays`	`number`	—	Maximum range length in days
`locale`	`string`	`'en'`	Locale for formatting
`calendarLabel`	`string`	—	Accessible label
`initialFocus`	`boolean`	`false`	Focus calendar on mount
`class`	`string`	—	Additional CSS classes

Sub-components

Component	Description
`RangeCalendar.Header`	Container for navigation controls
`RangeCalendar.Heading`	Displays current month/year
`RangeCalendar.PrevButton`	Navigate to previous month
`RangeCalendar.NextButton`	Navigate to next month
`RangeCalendar.Grid`	Table wrapper for a month grid
`RangeCalendar.GridHead`	Table header for weekday labels
`RangeCalendar.HeadCell`	Individual weekday label cell
`RangeCalendar.GridBody`	Table body containing date rows
`RangeCalendar.GridRow`	A row of date cells
`RangeCalendar.Cell`	Container for a day (requires `date` and `month`)
`RangeCalendar.Day`	Renders the day number button

Usage

<script>
  import { RangeCalendar } from '@chrissnell/chonky-ui';
  import { CalendarDate } from '@internationalized/date';

  let value = $state({
    start: new CalendarDate(2026, 4, 3),
    end: new CalendarDate(2026, 4, 10)
  });
</script>

<RangeCalendar.Root bind:value>
  {#snippet children({ months, weekdays })}
    <RangeCalendar.Header>
      <RangeCalendar.PrevButton>&larr;</RangeCalendar.PrevButton>
      <RangeCalendar.Heading />
      <RangeCalendar.NextButton>&rarr;</RangeCalendar.NextButton>
    </RangeCalendar.Header>
    {#each months as month}
      <RangeCalendar.Grid>
        <RangeCalendar.GridHead>
          <RangeCalendar.GridRow>
            {#each weekdays as day}
              <RangeCalendar.HeadCell>{day}</RangeCalendar.HeadCell>
            {/each}
          </RangeCalendar.GridRow>
        </RangeCalendar.GridHead>
        <RangeCalendar.GridBody>
          {#each month.weeks as week}
            <RangeCalendar.GridRow>
              {#each week as date}
                <RangeCalendar.Cell {date} month={month.value} />
              {/each}
            </RangeCalendar.GridRow>
          {/each}
        </RangeCalendar.GridBody>
      </RangeCalendar.Grid>
    {/each}
  {/snippet}
</RangeCalendar.Root>