开发预览更新于 2026-05-10

Calendar 日历

嵌入式月视图日历，支持周序号、周起始日、min/max 范围、三档尺寸。

基础用法

CfCalendar 是一个独立的月视图日历，跟 DatePicker 不同：它直接展开在页面上而不弹出气泡。日期通过 v-model (Vue) / value + onChange (React) 暴露。点击 ‹ › 切换月份；点击日期就选中。

一二三四五六日

已选：2026-05-10

<CfCalendar v-model="date" />

<CfCalendar value={date} onChange={setDate} />

周起始日 + 周序号

weekStartsOn 控制每行从哪一天开始：1 周一（默认）、0 周日。showWeekNumbers 在最左侧加一列 ISO 周序号 — 排期 / 项目管理类后台常用。

周一开始 + 周序号

#一二三四五六日181920212223

周日开始

日一二三四五六

<CfCalendar v-model="a" :week-starts-on="1" show-week-numbers />
<CfCalendar v-model="b" :week-starts-on="0" />

<CfCalendar value={a} onChange={setA} weekStartsOn={1} showWeekNumbers />
<CfCalendar value={b} onChange={setB} weekStartsOn={0} />

限制可选范围

min / max 划定可选区间。区间外的日期变灰且不响应点击。下面这个例子把可选区间锁在「本月初到下个月底」。

一二三四五六日

允许范围：2026-05-01 ~ 2026-06-30

<CfCalendar v-model="date" :min="min" :max="max" />

<CfCalendar value={date} onChange={setDate} min={min} max={max} />

三档尺寸

整体字号通过 size 同步：sm / md（默认）/ lg。日历单元格高度跟着字号走。

size = sm

一二三四五六日

size = md

一二三四五六日

size = lg

一二三四五六日

<CfCalendar v-model="a" size="sm" />
<CfCalendar v-model="b" size="md" />
<CfCalendar v-model="c" size="lg" />

<CfCalendar value={a} onChange={setA} size="sm" />
<CfCalendar value={b} onChange={setB} size="md" />
<CfCalendar value={c} onChange={setC} size="lg" />

API

属性	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`Date \| null`	`null`	当前选中日期
`defaultValue`	`Date \| null`	`null`	非受控初值
`month`	`Date`	`今天所在月`	受控显示月份
`defaultMonth`	`Date`	—	非受控初始显示月份
`min` / `max`	`Date`	`—`	可选区间端点（含端点）
`weekStartsOn`	`0 \| 1`	`1`	0 = 周日，1 = 周一
`showWeekNumbers`	`boolean`	`false`	显示 ISO 周序号列
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	整体字号
`disabled`	`boolean`	`false`	禁用全部交互
`className`	`string`	`—`	透传到根容器

事件：onChange(date) / update:modelValue 在选中日期时触发；onMonthChange(month) / update:month 在切换月份时触发。