Calendar

Calendar is a date selection component that allows users to view and choose dates from a visual calendar interface.

Calendars provide an intuitive way for users to select dates, view date ranges, or navigate through months and years. They support multiple selection modes including single date selection, multiple dates, and date ranges, making them versatile for various scheduling and date-picking needs. Calendars handle date formatting, localization, and accessibility automatically, ensuring a consistent user experience across different locales.

Use calendars when users need to select dates in a visual context where seeing the days of the week and month layout is helpful. For simple date entry where typing is acceptable, consider using a date input field instead. Calendars are particularly effective for scheduling interfaces, booking systems, and any feature where date context and relative positioning matters to the user's decision.

Example

April 2026

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

export function CalendarDefault() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Installation


npm install @strongtie/design-system

import { Calendar } from "@strongtie/design-system/calendar"

Props

`<Calendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Examples

April 2026

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

export function CalendarDefault() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Month And Year Selector

April 2026

Selected date: 4/2/2026

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"

export function CalendarMonthAndYearSelector() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        captionLayout="dropdown"
        fromYear={2020}
        toYear={2030}
        className="rounded-md border"
      />
      {date && (
        <p className="text-muted-foreground text-sm">
          Selected date: {date.toLocaleDateString()}
        </p>
      )}
    </div>
  )
}

Range

April 2026

May 2026

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"
import type { DateRange } from "react-day-picker"

export function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: undefined,
    to: undefined,
  })

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="range"
        selected={range}
        onSelect={setRange}
        numberOfMonths={2}
        className="rounded-md border"
      />
      {range?.from && (
        <p className="text-muted-foreground text-sm">
          {range.to
            ? `Selected range: ${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
            : `Start date: ${range.from.toLocaleDateString()}`}
        </p>
      )}
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

calendar

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Button Card

On This Page

Example Installation Props <Calendar>Examples Month And Year Selector Range Styling Classes Accessibility

Contribute

Calendar

Calendar is a date selection component that allows users to view and choose dates from a visual calendar interface.

Example

April 2026

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

export function CalendarDefault() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Installation


npm install @strongtie/design-system

import { Calendar } from "@strongtie/design-system/calendar"

Props

`<Calendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Examples

April 2026

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

export function CalendarDefault() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Month And Year Selector

April 2026

Selected date: 4/2/2026

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"

export function CalendarMonthAndYearSelector() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        captionLayout="dropdown"
        fromYear={2020}
        toYear={2030}
        className="rounded-md border"
      />
      {date && (
        <p className="text-muted-foreground text-sm">
          Selected date: {date.toLocaleDateString()}
        </p>
      )}
    </div>
  )
}

Range

April 2026

May 2026

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"
import type { DateRange } from "react-day-picker"

export function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: undefined,
    to: undefined,
  })

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="range"
        selected={range}
        onSelect={setRange}
        numberOfMonths={2}
        className="rounded-md border"
      />
      {range?.from && (
        <p className="text-muted-foreground text-sm">
          {range.to
            ? `Selected range: ${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
            : `Start date: ${range.from.toLocaleDateString()}`}
        </p>
      )}
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

calendar

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Button Card

On This Page

Example Installation Props <Calendar>Examples Month And Year Selector Range Styling Classes Accessibility

Contribute

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa