Calendar

Quick Start

Use a Calendar to allow users to select a date directly from a calendar view.

1import { Calendar } from "@ecos/ui";
2
3<Calendar />

Single Date Selection

Use single mode when users need to select one date.

1<Calendar
2  mode="single"
3  selected={new Date()}
4/>

Controlled Usage

Calendar selection can be controlled externally using the selected and onSelect props.

1const [date, setDate] = useState<Date>();
2
3<Calendar
4  mode="single"
5  selected={date}
6  onSelect={setDate}
7/>

Date Range Selection

Use range mode when users need to select a start and end date.

1<Calendar mode="range" />

Multiple Months

Display multiple months to make larger date ranges easier to select.

1<Calendar
2  mode="range"
3  numberOfMonths={2}
4/>

Dropdown Navigation

Use dropdown navigation to allow users to quickly navigate across months and years.

1<Calendar
2  captionLayout="dropdown"
3/>

Disabled Dates

Dates can be disabled to prevent unavailable selections.

1<Calendar
2  disabled={{
3    before: new Date(),
4  }}
5/>

Localization

Provide a locale to localise month names, weekday names, and formatting.

1<Calendar
2  locale={enGB}
3/>

API Reference

Visual Reference