Calendar component for date selection with navigation, events, and date constraints.
Experiment with all the properties of the Calendar component in real time.
Visual style of the calendar.
Border radius of the calendar.
Disables the entire calendar.
Calendar is a controlled component that requires value and onChange props to manage the selected date.
import { Calendar } from "lambda-ui-components";
import { useState } from "react";
export default function App() {
const [date, setDate] = useState<Date>(new Date());
return (
<Calendar
value={date}
onChange={setDate}
/>
);
}Restrict selectable dates using minDate and maxDate props.
Use isDateDisabled to disable specific dates based on custom logic.
Display events on specific dates using the events prop. Each event can have multiple labels with different status colors.
Prop | Default | Type |
|---|---|---|
value | undefined | Date |
onChange | undefined | (date: Date) => void |
minDate | undefined | Date |
maxDate | undefined | Date |
disabled | false | boolean |
variant | "solid" | "solid" | "outline" |
radius | "small" | "none" | "tiny" | "small" | "medium" | "large" |
isDateDisabled | undefined | (date: Date) => boolean |
events | undefined | CalendarEvents[] |
Prop | Default | Type |
|---|---|---|
date | undefined | Date |
label | undefined | string[] |
status | undefined | ("success" | "warning" | "danger")[] |