import { Calendar } from 'react-calendar-datetime'

<Calendar value={date} onChange={setDate} theme="carbon" />

import { Calendar } from 'react-calendar-datetime'
import { useState } from 'react'

export default function App() {
  const [date, setDate] = useState(new Date())

  return (
    <Calendar
      value={date}
      onChange={(d) => {
        // d is Date | null — null when user deselects
        if (d) setDate(d as Date)
      }}
    />
  )
}

import { Calendar } from 'react-calendar-datetime'
import { useState } from 'react'

type Range = { from: Date | null; to: Date | null }

export default function App() {
  const today = new Date()
  const [range, setRange] = useState<Range>({
    from: today,
    to: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2),
  })

  return (
    <Calendar
      mode="range"
      value={range}
      onRangeChange={(r) => setRange(r)}
      rangeMinDays={2}
      rangeMaxDays={30}
      showSelectedDates
    />
  )
}

import { Calendar } from 'react-calendar-datetime'
import { useState } from 'react'

export default function App() {
  const today = new Date()
  const [dates, setDates] = useState<Date[]>([
    today,
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2),
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5),
  ])

  return (
    <Calendar
      mode="multiple"
      value={dates}
      onDatesChange={(d) => setDates(d)}
      max={5}           // optional cap
      showSelectedDates // chips panel below calendar
    />
  )
}

<Calendar
  value={date}
  onChange={setDate}
  startOfWeek={1} // 0 = Sun, 1 = Mon, 6 = Sat
/>

// Single — default, no extra props needed
<Calendar value={date} onChange={setDate} />

// Range with 2–14 day constraint
<Calendar
  mode="range"
  value={range}
  onRangeChange={setRange}
  rangeMinDays={2}
  rangeMaxDays={14}
  showSelectedDates
/>

// Multi with 3-date cap
<Calendar
  mode="multiple"
  value={dates}
  onDatesChange={setDates}
  max={3}
  showSelectedDates
/>

<Calendar
  value={date}
  onChange={setDate}
  twoMonthsLayout
  showWeekNumber
/>

<Calendar
  mode="range"
  value={range}
  onRangeChange={setRange}
  twoMonthsLayout
  monthsColumn
  monthsGrid
  showSelectedDates
/>

<Calendar
  value={date}
  onChange={setDate}
  theme="comfy"
  showWeekNumber
  shortMonths
/>

<Calendar
  value={date}
  onChange={setDate}
  monthsGrid
  compactYears
  time={false}
/>

<Calendar
  value={date}
  onChange={setDate}
  presets
/>

<Calendar
  value={date}
  onChange={setDate}
  timeGrid
  time={false}
  hour12
/>

<Calendar
  value={date}
  onChange={setDate}
  theme="phosphor"
  showHomeButton
  showClearButton
  years
  compactMonths
/>

<Calendar
  value={date}
  onChange={setDate}
  theme="midnight"
  presets
  timeGrid
  showWeekNumber
  showHomeButton
  showClearButton
  compactMonths
  gradient
/>

<Calendar
  value={date}
  onChange={setDate}
  theme="industrial"
  brutalism
  gradient
/>

<Calendar
  value={date}
  onChange={setDate}
  theme="neon"
  highlightWeekends={false}
  shortMonths
  gradient
/>

const today = new Date()
const in20 = new Date(today)
in20.setDate(today.getDate() + 20)

<Calendar
  value={date}
  onChange={setDate}
  theme="latte"
  startDate={today}
  endDate={in20}
  hideLimited       // hides out-of-range days entirely
  showClearButton
/>

// Block weekends + past dates
<Calendar
  value={date}
  onChange={setDate}
  disabled={[
    { dayOfWeek: [0, 6] },
    { before: new Date() },
  ]}
/>

// Block a specific date + a closed range
<Calendar
  value={date}
  onChange={setDate}
  disabled={[
    new Date("2025-01-01"),
    { from: new Date("2025-08-01"), to: new Date("2025-08-15") },
  ]}
  hideDisabled
/>

// Entire calendar disabled
<Calendar value={date} onChange={setDate} disabled={true} />

/* Override the carbon theme to use an indigo accent */
:root {
  --c-h: #6366f1;
}

/* Scope overrides to a single calendar instance */
.my-calendar-wrapper {
  --c-b: #0f172a;
  --c-h: #f59e0b;
  --c-c: #f1f5f9;
  --c-s: rgba(255, 255, 255, 0.08);
}

// Then wrap the Calendar
<div className="my-calendar-wrapper">
  <Calendar value={date} onChange={setDate} theme="carbon" />
</div>

<Calendar locale="en" />     // English (default)
<Calendar locale="de" />     // Deutsch
<Calendar locale="fr" />     // Français
<Calendar locale="ru" />     // Русский
<Calendar locale="zh-CN" />  // 中文 (简体)
<Calendar locale="zh-TW" />  // 中文 (繁體)
<Calendar locale="ja" />     // 日本語
<Calendar locale="ar-SA" />  // العربية
<Calendar locale="pt-BR" />  // Português (Brasil)
<Calendar locale="tr" />     // Türkçe
<Calendar locale="ko" />     // 한국어
<Calendar locale="pl" />     // Polski