Calendar

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

October 2024

1  import { Calendar, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' justify='center'>
4    <Calendar />
5  </FlexBox>
6

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

Prop	Type	Default	Explanation
`align`	`string`	center	The alignment of the calendar relative to the trigger.
`autoClose`	`boolean`	true	Whether the calendar should close automatically after a date is selected
`date`	`string \| Date`	-	The date to be selected by default.
`format`	`string`	yyyy-MM-dd	The format of the date to be displayed, according to date-fns
`inline`	`boolean`	false	Whether the calendar is inline or not.
`onChange`	`function`	-	The callback function to be called when a date is selected. Returns the selected date.
`placeholder`	`string`	-	The placeholder text to be displayed when no date is selected.
`side`	`string`	top	The side of the trigger where the calendar should appear.
`trigger`	`React.ReactNode`	Default Button	The trigger element to open the calendar (when inline is true).

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius