Docs/Calendar

Calendar

Monthly calendar with date selection. Client component.

Usage

tsx

1'use client'
2import { useState } from 'react'
3import { Calendar } from '@storm-ds/ui'
4
5function MyCalendar() {
6  const [date, setDate] = useState<Date | undefined>(new Date())
7  return (
8    <Calendar
9      value={date}
10      onChange={setDate}
11    />
12  )
13}

Default

February 2026

tsx

1'use client'
2import { useState } from 'react'
3import { Calendar } from '@storm-ds/ui'
4
5function CalendarDemo() {
6  const [date, setDate] = useState<Date | undefined>(new Date())
7  return <Calendar value={date} onChange={setDate} />
8}

With Min/Max

tsx

1<Calendar
2  value={date}
3  onChange={setDate}
4  min={new Date(2024, 0, 1)}
5  max={new Date(2024, 11, 31)}
6/>

Disabled Dates

tsx

1<Calendar
2  value={date}
3  onChange={setDate}
4  disabled={(date) => date.getDay() === 0 || date.getDay() === 6}
5/>

Note

Shows month view with navigation. Selected date has Storm primary background. Supports min/max/disabled predicates.

Props

Prop	Type	Default	Description
value	Date \| undefined	-	Selected date
onChange	(date: Date \| undefined) => void	-	Called when a date is selected
min	Date	-	Earliest selectable date
max	Date	-	Latest selectable date
disabled	(date: Date) => boolean	-	Function to disable specific dates
className	string	-	Custom classes

Use with AI

Create a Next.js client component using Storm UI's Calendar. Import: `import { Calendar } from '@storm-ds/ui'`. Use 'use client' and useState for date selection. Pass value (Date | undefined) and onChange callback. Optional min/max Date props to restrict range. Optional disabled function to disable specific dates. Selected date highlighted with Storm primary color. Month navigation provided. Example: `const [date, setDate] = useState(new Date()); <Calendar value={date} onChange={setDate} min={new Date(2024, 0, 1)} max={new Date(2024, 11, 31)} disabled={(d) => d.getDay() === 0} />`

DataTable

HoverCard