ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

Calendar 日历

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

基础用法

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

背景
2026 年 5 月
一二三四五六日
已选：2026-05-11
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const date = ref<Date | null>(new Date());
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px; align-items: flex-start;">
    <CfCalendar v-model="date" />
    <span style="font-size: 12px; color: var(--fg-3);">
      已选：<code>{{ date ? date.toISOString().slice(0, 10) : '无' }}</code>
    </span>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const date = ref<Date | null>(new Date());
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px; align-items: flex-start;">
    <CfCalendar v-model="date" />
    <span style="font-size: 12px; color: var(--fg-3);">
      已选：<code>{{ date ? date.toISOString().slice(0, 10) : '无' }}</code>
    </span>
  </div>
</template>
<CfCalendar value={date} onChange={setDate} />
<CfCalendar value={date} onChange={setDate} />

周起始日 + 周序号

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

背景
周一开始 + 周序号
2026 年 5 月
#一二三四五六日181920212223
周日开始
2026 年 5 月
日一二三四五六
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const a = ref<Date | null>(null);
const b = ref<Date | null>(null);
</script>

<template>
  <div style="display:flex; gap: 16px; flex-wrap: wrap;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">周一开始 + 周序号</div>
      <CfCalendar v-model="a" :week-starts-on="1" show-week-numbers />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">周日开始</div>
      <CfCalendar v-model="b" :week-starts-on="0" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const a = ref<Date | null>(null);
const b = ref<Date | null>(null);
</script>

<template>
  <div style="display:flex; gap: 16px; flex-wrap: wrap;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">周一开始 + 周序号</div>
      <CfCalendar v-model="a" :week-starts-on="1" show-week-numbers />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">周日开始</div>
      <CfCalendar v-model="b" :week-starts-on="0" />
    </div>
  </div>
</template>
<CfCalendar value={a} onChange={setA} weekStartsOn={1} showWeekNumbers />
<CfCalendar value={b} onChange={setB} weekStartsOn={0} />
<CfCalendar value={a} onChange={setA} weekStartsOn={1} showWeekNumbers />
<CfCalendar value={b} onChange={setB} weekStartsOn={0} />

限制可选范围

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

背景
2026 年 5 月
一二三四五六日
允许范围：2026-05-01 ~ 2026-06-30
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const today = new Date();
const min = new Date(today.getFullYear(), today.getMonth(), 1);
const max = new Date(today.getFullYear(), today.getMonth() + 2, 0);
const date = ref<Date | null>(null);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px; align-items: flex-start;">
    <CfCalendar v-model="date" :min="min" :max="max" />
    <span style="font-size: 12px; color: var(--fg-3);">
      允许范围：<code>{{ min.toISOString().slice(0, 10) }}</code>
      ~ <code>{{ max.toISOString().slice(0, 10) }}</code>
    </span>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const today = new Date();
const min = new Date(today.getFullYear(), today.getMonth(), 1);
const max = new Date(today.getFullYear(), today.getMonth() + 2, 0);
const date = ref<Date | null>(null);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px; align-items: flex-start;">
    <CfCalendar v-model="date" :min="min" :max="max" />
    <span style="font-size: 12px; color: var(--fg-3);">
      允许范围：<code>{{ min.toISOString().slice(0, 10) }}</code>
      ~ <code>{{ max.toISOString().slice(0, 10) }}</code>
    </span>
  </div>
</template>
<CfCalendar value={date} onChange={setDate} min={min} max={max} />
<CfCalendar value={date} onChange={setDate} min={min} max={max} />

三档尺寸

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

背景
size = sm
2026 年 5 月
一二三四五六日
size = md
2026 年 5 月
一二三四五六日
size = lg
2026 年 5 月
一二三四五六日
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const a = ref<Date | null>(null);
const b = ref<Date | null>(null);
const c = ref<Date | null>(null);
</script>

<template>
  <div style="display:flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = sm</div>
      <CfCalendar v-model="a" size="sm" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = md</div>
      <CfCalendar v-model="b" size="md" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = lg</div>
      <CfCalendar v-model="c" size="lg" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfCalendar } from '@chufix-design/vue';

const a = ref<Date | null>(null);
const b = ref<Date | null>(null);
const c = ref<Date | null>(null);
</script>

<template>
  <div style="display:flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = sm</div>
      <CfCalendar v-model="a" size="sm" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = md</div>
      <CfCalendar v-model="b" size="md" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = lg</div>
      <CfCalendar v-model="c" size="lg" />
    </div>
  </div>
</template>
<CfCalendar value={a} onChange={setA} size="sm" />
<CfCalendar value={b} onChange={setB} size="md" />
<CfCalendar value={c} onChange={setC} 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 | nullnull当前选中日期
defaultValueDate | nullnull非受控初值
monthDate今天所在月受控显示月份
defaultMonthDate—非受控初始显示月份
min / maxDate—可选区间端点（含端点）
weekStartsOn0 | 110 = 周日，1 = 周一
showWeekNumbersbooleanfalse显示 ISO 周序号列
size'sm' | 'md' | 'lg''md'整体字号
disabledbooleanfalse禁用全部交互
classNamestring—透传到根容器

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

反馈与讨论

Calendar 日历 的讨论

0
0 / 600
一键发送
正在加载评论...