Calendar

A date calendar for selecting a single date or multiple dates. Compound component using dot notation.

Example

Selected: 2026-04-03

Root Props

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Selection mode
`value`	`DateValue \| DateValue[]`	—	Selected date(s), bindable
`onValueChange`	`(value) => void`	—	Called when selection 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 date selection
`preventDeselect`	`boolean`	`false`	Prevent clearing selection
`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
`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
`Calendar.Header`	Container for navigation controls
`Calendar.Heading`	Displays current month/year
`Calendar.PrevButton`	Navigate to previous month
`Calendar.NextButton`	Navigate to next month
`Calendar.Grid`	Table wrapper for a month grid
`Calendar.GridHead`	Table header for weekday labels
`Calendar.HeadCell`	Individual weekday label cell
`Calendar.GridBody`	Table body containing date rows
`Calendar.GridRow`	A row of date cells
`Calendar.Cell`	Container for a single day (requires `date` and `month` props)
`Calendar.Day`	Renders the day number button

Usage

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

  let value = $state(new CalendarDate(2026, 4, 3));
</script>

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