Calendar

Dates, days, and deadlines are a breeze with our interactive Calendar. Select, navigate, and never miss a thing!

Example

July 2024

S
M
T
W
T
F
S
1 import { Calendar, Flex } from '@haktos/sugarcoat-ui';
2
3 <Flex gap='3' justify='center'>
4 <Calendar />
5 </Flex>
6

API Reference

ComponentDescription
Calendar

Your time compass. A dynamic component that lets users navigate through dates and times, making scheduling and selection a breeze in your UI.

Component Properties

Calendar
PropTypeDefaultExplanation
alignstringcenter

The alignment of the calendar relative to the trigger.

autoClosebooleantrue

Whether the calendar should close automatically after a date is selected

datestring | Date-

The date to be selected by default.

formatstringyyyy-MM-dd

The format of the date to be displayed, according to date-fns

inlinebooleanfalse

Whether the calendar is inline or not.

onChangefunction-

The callback function to be called when a date is selected. Returns the selected date.

placeholderstring-

The placeholder text to be displayed when no date is selected.

sidestringtop

The side of the trigger where the calendar should appear.

triggerReact.ReactNode

Default Button

The trigger element to open the calendar (when inline is true).