Calendar

Browse and select dates, and display schedules.

Schedule calendar

MonTueWedThuFriSatSun

Selected date: 2026-10-4

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>
  );
}

Compact calendar and disabled dates

MonTueWedThuFriSatSun

Weekends are unavailable; an existing selection remains readable.

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>
  );
}

Choose a month

month.tsx

import { Calendar } from '@ifhover/leaf-ui';

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

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.

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.

#Calendar

#Schedule calendar

#Compact calendar and disabled dates

#Choose a month

#Calendar API

#Types