> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/calendar.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Calendar

Browse and select dates, and display schedules.

## Schedule calendar


Oct2026

Today

MonTueWedThuFriSatSun

28293012345678Review9101112131415Release16171819202122Design sync23242526272829303112345678

Selected date: 2026-10-4

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/calendar/basic.tsx"
import { Calendar, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

const events: Record<number, { label: string; color: string }> = {
  8: { label: 'Review', color: '#20834a' },
  15: { label: 'Release', color: '#1677ff' },
  22: { label: 'Design sync', color: '#7654c6' },
};

export function CalendarBasic() {
  const [value, setValue] = useState(new Date(2026, 9, 4));
  return (
    <Space direction="vertical" align="stretch">
      <Calendar
        value={value}
        onChange={setValue}
        cellRender={(date) => {
          const event = date.getMonth() === 9 ? events[date.getDate()] : undefined;
          return event ? <Text style={{ color: event.color }}>{event.label}</Text> : null;
        }}
      />
      <output>
        <Text tone="muted">
          Selected date: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
        </Text>
      </output>
    </Space>
  );
}
```

Expand code

## Compact calendar and disabled dates


Oct2026

MonTueWedThuFriSatSun

2829301234567891011121314151617181920212223242526272829303112345678

Weekends are unavailable; an existing selection remains readable.

compact.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/calendar/compact.tsx"
import { Calendar, Space, Text } from '@ifhover/leaf-ui';

export function CalendarCompact() {
  return (
    <Space direction="vertical" align="stretch">
      <Calendar
        fullscreen={false}
        defaultValue={new Date(2026, 9, 4)}
        disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
      />
      <Text tone="muted">Weekends are unavailable; an existing selection remains readable.</Text>
    </Space>
  );
}
```

Expand code

## Choose a month


2026

JanFebMarAprMayJunJulAugSepOctNovDec

month.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/calendar/month.tsx"
import { Calendar } from '@ifhover/leaf-ui';

export function CalendarMonth() {
  return <Calendar fullscreen={false} mode="month" defaultValue={new Date(2026, 9, 1)} />;
}
```

Expand code

## Calendar API

| Property               | Type                        | Default  | Description                                                         |
| ---------------------- | --------------------------- | -------- | ------------------------------------------------------------------- |
| `value / defaultValue` | `Date`                      | —        | Controlled / initial selected date                                  |
| `onChange`             | `(date: Date) => void`      | —        | Date selection                                                      |
| `visibleDate`          | `Date`                      | —        | Controlled displayed period                                         |
| `onVisibleChange`      | `(date: Date) => void`      | —        | Displayed period changes                                            |
| `mode`                 | `'date' \| 'month'`         | `'date'` | Select dates or months                                              |
| `fullscreen`           | `boolean`                   | `true`   | Full calendar layout                                                |
| `minDate / maxDate`    | `Date`                      | —        | Date bounds                                                         |
| `disabledDate`         | `(date: Date) => boolean`   | —        | Disable specific dates                                              |
| `cellRender`           | `(date: Date) => ReactNode` | —        | Additional date content                                             |
| `headerExtra`          | `ReactNode`                 | —        | Additional header content                                           |
| `showToday`            | `boolean`                   | `true`   | Show a Today button in full layout to navigate to the current month |

## Types

Import these types to define props or prepare data.

```ts
import type { CalendarProps } from '@ifhover/leaf-ui';
```

## Usage notes

Use `fullscreen={false}` for a compact calendar. Place non-interactive text or icons in `cellRender`; avoid nested buttons. A disabled selection stays readable and cannot be selected again.

Use arrow keys to move dates, Home/End to jump within a row and PageUp/PageDown to switch months. Provide consistent initial dates for SSR; see [server-side rendering](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/ssr.md).