Calendar

Stable

Date picker grid component built on react-day-picker, featuring single date or range selection, illuminated cybernetic neon cells, and acrylic glass themes.

Installation

$pnpm add @siberui/react

Import

tsx
import { Calendar } from '@siberui/react';

Basic Single Date Selection

Use mode="single" to bind a single selected Date object.

SuMoTuWeThFrSa
Selected Epoch: 6/15/2025
tsx
const [date, setDate] = React.useState<Date | undefined>(new Date());

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

Date Range Window Selection

Set mode="range" to select telemetry acquisition intervals across multiple calendar days.

SuMoTuWeThFrSa
Window: 6/10/2025 → 6/18/2025
tsx
const [range, setRange] = React.useState<DateRange | undefined>({
  from: new Date(),
  to: new Date(Date.now() + 6 * 24 * 60 * 60 * 1000),
});

<Calendar
  mode="range"
  selected={range}
  onSelect={setRange}
/>

Neon Cybernetic Chrono-Calendar

Pass variant="neon" to apply cyan laser cell highlights, glowing active rings, and monospace day numbers.

SuMoTuWeThFrSa
tsx
<Calendar
  variant="neon"
  mode="single"
  selected={neonDate}
  onSelect={setNeonDate}
/>

Frosted Cyber-Glass Epoch Scheduler

Composite calendar layered over circuit textures with perimeter laser sweeps.

SuMoTuWeThFrSa
tsx
<div className="relative p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center">
  <Calendar
    variant="glass"
    mode="single"
    selected={glassDate}
    onSelect={setGlassDate}
  />
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Mission Epoch Scheduler Card

Composite mission defense card embedding the chrono-scheduler.

MISSION ORBITAL EPOCH

CALIBRATED

Set target satellite flyby and ingestion window.

SuMoTuWeThFrSa
tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">MISSION ORBITAL EPOCH</CardTitle>
      <Badge variant="neon" size="sm">CALIBRATED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Set target satellite flyby and ingestion window.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 flex justify-center">
    <Calendar
      variant="neon"
      mode="single"
      selected={neonDate}
      onSelect={setNeonDate}
    />
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →
PropertyDescriptionTypeDefault
mode
Selection mode ("single", "range", or "multiple").
"single" | "range" | "multiple"
"single"
selected
The selected date or date range.
Date | DateRange | Date[]
-
onSelect
Callback fired when a date cell is clicked.
(date: any) => void
-
variant
Visual theme for the calendar surface and cell highlights.
"default" | "neon" | "glass"
"default"
showOutsideDays
Whether days from adjacent months are displayed.
boolean
true

Accessibility

  • WAI-ARIA Date Picker: Utilizes React DayPicker with full keyboard arrow navigation across days, weeks, and month captions with aria-selected.

Best Practices

  • Popover Pairing: For compact form fields, combine Calendar with Popover or use the integrated DatePicker component.