# Calendar

An inline calendar for single dates, ranges or multiple dates.

Group: Data

## Import

```tsx
import { Calendar } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function CalendarDemo() {
  return (
    <HStack gap="6" wrap="wrap" align="flex-start">
      <Stack gap="2">
        <Text fontSize="xs" color="fg.muted">Single</Text>
        <Calendar.Root />
      </Stack>
      <Stack gap="2">
        <Text fontSize="xs" color="fg.muted">Range, 2 bulan</Text>
        <Calendar.Root selectionMode="range" numOfMonths={2} />
      </Stack>
    </HStack>
  )
}
```