Usage
import { Calendar } from "@smartacteam/ambient-web/calendar";const [date, setDate] = React.useState<Date | undefined>(new Date());
return <Calendar mode="single" selected={date} onSelect={setDate} />;import { Calendar } from "@smartacteam/ambient-web/calendar";const [date, setDate] = React.useState<Date | undefined>(new Date());
return <Calendar mode="single" selected={date} onSelect={setDate} />;"use client";
import * as React from "react";
import { Calendar } from "@smartacteam/ambient-web/calendar";
export function CalendarDemo() {
const [date, setDate] = React.useState<Date | undefined>(new Date());
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
className="rounded-lg border border-stroke-default shadow-xs"
/>
);
}"use client";
import * as React from "react";
import { Calendar, type DateRange } from "@smartacteam/ambient-web/calendar";
export function CalendarRangeDemo() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 12),
to: new Date(2025, 6, 15),
});
return (
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
className="rounded-lg border border-stroke-default shadow-xs"
/>
);
}"use client";
import * as React from "react";
import { Calendar } from "@smartacteam/ambient-web/calendar";
import { Label } from "@smartacteam/ambient-web/label";
import { Select } from "@smartacteam/ambient-web/select";
const dropdownItems = [
{ value: "dropdown", label: "Month and Year" },
{ value: "dropdown-months", label: "Month Only" },
{ value: "dropdown-years", label: "Year Only" },
];
export function CalendarYearMonthDemo() {
const [dropdown, setDropdown] =
React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
"dropdown",
);
const [date, setDate] = React.useState<Date | undefined>(
new Date(2025, 5, 12),
);
return (
<div className="flex flex-col gap-4">
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
captionLayout={dropdown}
className="rounded-lg border border-stroke-default shadow-xs"
/>
<div className="flex flex-col gap-3">
<Label htmlFor="dropdown" className="px-1">
Dropdown
</Label>
<Select.Root
items={dropdownItems}
value={dropdown}
onValueChange={(value) =>
setDropdown(
value as React.ComponentProps<typeof Calendar>["captionLayout"],
)
}
>
<Select.Trigger id="dropdown" className="w-full">
<Select.Value />
</Select.Trigger>
<Select.Content align="center">
{dropdownItems.map((item) => (
<Select.Item key={item.value} value={item.value}>
{item.label}
</Select.Item>
))}
</Select.Content>
</Select.Root>
</div>
</div>
);
}