Calendar

const [date, setDate] = useState<Date | undefined>(new Date());

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border border-separator"
/>

const presets = [
  { label: "Today", date: () => new Date() },
  { label: "This week", date: () => startOfWeek(new Date(), { weekStartsOn: 1 }) },
  { label: "In a month", date: () => addMonths(new Date(), 1) },
];

<div className="flex gap-2">
  {presets.map((preset) => (
    <Button
      key={preset.label}
      variant="outline"
      size="sm"
      onClick={() => {
        const next = preset.date();
        setDate(next);
        setMonth(next);
      }}
    >
      {preset.label}
    </Button>
  ))}
</div>
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  month={month}
  onMonthChange={setMonth}
/>

{/* Horizontal layout */}
<Calendar mode="range" numberOfMonths={2} />

{/* Week numbers */}
<Calendar mode="single" showWeekNumber />

{/* Bound the selectable window */}
<Calendar
  mode="single"
  disabled={{ before: today, after: addDays(today, 30) }}
/>

{/* Date + time picker */}
<Calendar mode="single" selected={date} onSelect={setDate} />
<input type="time" value={time} onChange={(e) => setTime(e.target.value)} />