Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Calendar with Range for Solid

A two-month calendar that starts with the 8th through the 22nd of this month selected, and the next month beside it.

UI library: Ark UI

Two months sit side by side. The range starts on the 8th through the 22nd of this month, and the second grid is the next month. The days between those dates are selected.

Use it for a booking, a report, or a filter that covers a period. Separate days that are not a stretch need multiple selection. A field that opens the two months is a Date Picker. In Solid, Ark UI does not name the trip.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Calendar anatomy: prev trigger, month select, year select, next trigger, table, table cell

Usage

<Calendar class="rounded-md border" defaultFocusedValue={from} numOfMonths={2} onValueChange={handleValueChange} selectionMode="range" value={value()}>
      <CalendarViewControl>
        <CalendarPrevTrigger />
        <CalendarViewDate />
        <CalendarNextTrigger />
      </CalendarViewControl>
      <div class="flex flex-col gap-4 md:flex-row">
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableNextMonth />
        </CalendarTable>
      </div>
    </Calendar>

FAQ

How do I read the start and end dates?

selectionMode="range" makes value the start and end dates, and onValueChange receives { value }. numOfMonths={2} shows two months, and the second CalendarTable uses CalendarTableNextMonth.

Which month is shown first?

defaultFocusedValue is the start date, so the first grid is the month the range starts in. The two tables sit in flex flex-col gap-4 md:flex-row.

What range is selected at first?

The 8th through the 22nd of the current month. Both dates are in that month, and the second grid shows the following month.

What wraps the grids?

Calendar has rounded-md border.The border wraps both months.

How are the 8th and the 22nd built?

from and to are parseDate of those two local dates, and value starts as both of them.

What does the change handler receive?

onValueChange receives { value } with the start and end, and this demo stores details.value.

API Reference

Calendar

Sets defaultFocusedValue={from}, numOfMonths={2}, onValueChange={handleValueChange}, selectionMode="range" and value={value()}. The rest is on the Calendar page.

All 16 calendar examples