Calendar 日历

查看日期、选择日期并展示日程安排。

日程日历

一二三四五六日

已选日期: 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: '项目评审', color: '#20834a' },
  15: { label: '发布', color: '#1677ff' },
  22: { label: '设计同步', 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">
          已选日期: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
        </Text>
      </output>
    </Space>
  );
}

紧凑日历与禁用日期

一二三四五六日

周末不可选；已有的选中日期仍清晰可见。

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">周末不可选；已有的选中日期仍清晰可见。</Text>
    </Space>
  );
}

选择月份

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

属性	类型	默认值	说明
`value / defaultValue`	`Date`	—	受控 / 初始选中日期
`onChange`	`(date: Date) => void`	—	选择日期后触发
`visibleDate`	`Date`	—	受控展示范围
`onVisibleChange`	`(date: Date) => void`	—	展示范围变化
`mode`	`'date' \| 'month'`	`'date'`	选择日期或月份
`fullscreen`	`boolean`	`true`	完整日历布局
`minDate / maxDate`	`Date`	—	日期边界
`disabledDate`	`(date: Date) => boolean`	—	禁用指定日期
`cellRender`	`(date: Date) => ReactNode`	—	补充日程内容
`headerExtra`	`ReactNode`	—	标题区域补充内容
`showToday`	`boolean`	`true`	完整日历展示今天按钮，跳至当前月份

类型

可导入以下类型定义属性、组装数据或处理回调。

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

使用说明

fullscreen={false} 展示紧凑日历。cellRender 中使用文字、图标等非交互内容，避免在日期按钮内嵌套按钮。禁用选中项保留清晰的灰色状态，不会再次触发选择。

方向键移动日期，Home / End 跳至一行首尾，PageUp / PageDown 切换月份。SSR 页面应提供一致的初始日期，详见服务端渲染。

#Calendar 日历

#日程日历

#紧凑日历与禁用日期

#选择月份

#Calendar API

#类型