ContextQMD
Back to Ant Design

Calendar

components/calendar/index.zh-CN.md

6.3.74.9 KB
Original Source

何时使用 {#when-to-use}

当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。

代码演示 {#examples}

<!-- prettier-ignore -->

<code src="./demo/basic.tsx" clientOnly>基本</code> <code src="./demo/notice-calendar.tsx" clientOnly>通知事项日历</code> <code src="./demo/card.tsx" clientOnly>卡片模式</code> <code src="./demo/select.tsx" clientOnly>选择功能</code> <code src="./demo/lunar.tsx" clientOnly>农历日历</code> <code src="./demo/week.tsx" clientOnly version="5.23.0">周数</code> <code src="./demo/customize-header.tsx" clientOnly>自定义头部</code> <code src="./demo/style-class.tsx" clientOnly version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/component-token.tsx" debug>组件 Token</code>

API

通用属性参考：通用属性

注意：Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。

jsx
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
// import dayjs from 'dayjs';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');

<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
参数说明类型默认值版本
cellRender自定义单元格的内容function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode-5.4.0
classNames用于自定义组件内部各语义化结构的 class，支持对象或函数Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-
dateFullCellRender自定义渲染日期单元格，返回内容覆盖单元格，>= 5.4.0 请用 fullCellRenderfunction(date: Dayjs): ReactNode-< 5.4.0
fullCellRender自定义单元格的内容function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode-5.4.0
defaultValue默认展示的日期dayjs-
disabledDate不可选择的日期，参数为当前 value，注意使用时不要直接修改(currentDate: Dayjs) => boolean-
fullscreen是否全屏显示booleantrue
showWeek是否显示周数列booleanfalse5.23.0
styles用于自定义组件内部各语义化结构的行内 style，支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-
headerRender自定义头部内容function(object:{value: Dayjs, type: 'year' | 'month', onChange: f(), onTypeChange: f()})-
locale国际化配置object(默认配置)
mode初始模式month | yearmonth
validRange设置可以显示的日期[dayjs, dayjs]-
value展示日期dayjs-
onChange日期变化回调function(date: Dayjs)-
onPanelChange日期面板变化回调function(date: Dayjs, mode: string)-
onSelect选择日期回调，包含来源信息function(date: Dayjs, info: { source: 'year' | 'month' | 'date' | 'customize' })-info: 5.6.0

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

主题变量（Design Token）{#design-token}

<ComponentTokenTable component="Calendar"></ComponentTokenTable>

FAQ

如何在 Calendar 中使用自定义日期库 {#faq-customize-date-library}

参考 使用自定义日期库。

如何给日期类组件配置国际化？ {#faq-set-locale-date-components}

参考 如何给日期类组件配置国际化。

为什么时间类组件的国际化 locale 设置不生效？ {#faq-locale-not-working}

参考 FAQ 为什么时间类组件的国际化 locale 设置不生效？。

如何仅获取来自面板点击的日期？ {#faq-get-date-panel-click}

onSelect 事件提供额外的来源信息，你可以通过 info.source 来判断来源：

tsx
<Calendar
  onSelect={(date, { source }) => {
    if (source === 'date') {
      console.log('Panel Select:', source);
    }
  }}
/>