Calendar

A date picker component that allows users to select a date from a calendar interface.

Calendar

A date picker component that allows users to select a date from a calendar interface. The Calendar component provides a user-friendly way to browse and select dates, with support for different display modes and interactive features.

Examples

January 2026

1import { Calendar, FlexBox } from '@sugarcoat/ui'
2
3<FlexBox gap='3' justify='center'>
4  <Calendar date={new Date()} onDateChange={(date) => console.log(date)} />
5</FlexBox>
6

API Reference

Component	Description
Calendar	A date picker component that allows users to select a date from a calendar interface.
Calendar.Inline	A wrapper component that displays the calendar in a popover.

Component Properties

Calendar

Prop	Type	Default	Explanation
`date`	`Date \| string`	-	The selected date to display.
`format`	`string`	yyyy-MM-dd	The format to display and parse dates.
`onDateChange`	`(date: Date) => void`	-	Callback function called when a date is selected.
`activeColor`	`string`	primary	The color theme for the active/selected state.

Calendar.Inline

Prop	Type	Default	Explanation
`side`	`string`	top	The preferred side of the trigger to render the calendar.
`align`	`string`	center	The preferred alignment against the trigger.
`trigger`	`ReactNode`	-	Custom trigger element to open the calendar.

Styling

The Calendar component uses a slot-based styling system with the following customizable slots:

root: The main calendar container
top: The header section containing month/year display and navigation
navigation: The navigation buttons container
days: The grid container for days
day: Individual day cells

Each slot can be styled using the recipe API and supports variants for:

today: Styles for the current day
selected: Styles for the selected date
animated: Animation styles for interactions

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius