CalendarWithPresets() — ui Function Reference

Architecture documentation for the CalendarWithPresets() function in calendar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CalendarWithPresets() — ui Function Reference

Dependency Diagram

graph TD
  e0da881c_0d45_e18a_901e_82b9695d5147["CalendarWithPresets()"]
  5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab["calendar-demo.tsx"]
  e0da881c_0d45_e18a_901e_82b9695d5147 -->|defined in| 5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab
  style e0da881c_0d45_e18a_901e_82b9695d5147 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/calendar-demo.tsx lines 225–276

function CalendarWithPresets() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(new Date().getFullYear(), 1, 12)
  )
  const [currentMonth, setCurrentMonth] = React.useState<Date>(
    new Date(new Date().getFullYear(), new Date().getMonth(), 1)
  )

  return (
    <div className="flex max-w-[300px] flex-col gap-3">
      <div className="px-2 text-center text-sm">With Presets</div>
      <Card className="w-fit py-4">
        <CardContent className="px-4">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            month={currentMonth}
            onMonthChange={setCurrentMonth}
            fixedWeeks
            className="p-0 [--cell-size:--spacing(9.5)]"
          />
        </CardContent>
        <CardFooter className="flex flex-wrap gap-2 border-t px-4 pt-4">
          {[
            { label: "Today", value: 0 },
            { label: "Tomorrow", value: 1 },
            { label: "In 3 days", value: 3 },
            { label: "In a week", value: 7 },
            { label: "In 2 weeks", value: 14 },
          ].map((preset) => (
            <Button
              key={preset.value}
              variant="outline"
              size="sm"
              className="flex-1"
              onClick={() => {
                const newDate = addDays(new Date(), preset.value)
                setDate(newDate)
                setCurrentMonth(
                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)
                )
              }}
            >
              {preset.label}
            </Button>
          ))}
        </CardFooter>
      </Card>
    </div>
  )
}