Preview Updated 2026-05-10

Calendar

Embedded month-view calendar with week numbers, configurable week start, min/max range, and three sizes.

Basic usage

CfCalendar is a standalone month-view calendar — unlike DatePicker, it sits inline on the page rather than floating in a popover. The selected date is exposed via v-model (Vue) or value + onChange (React). Click ‹ › to switch months; click a date to select it.

背景

一二三四五六日

已选：2026-05-11

src/App.vue

<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>

import { useState } from 'react';
import { CfCalendar } from '@chufix-design/react';

export default function Demo() {
  const [date, setDate] = useState(ref<Date | null>(new Date()));
  return (
    <>
      <CfCalendar value={date} onChange={setDate} />
    </>
  );
}

Week start + week numbers

weekStartsOn controls which day each row starts on: 1 for Monday (default), 0 for Sunday. showWeekNumbers adds a leftmost column of ISO week numbers — common in scheduling and project-management dashboards.

背景

周一开始 + 周序号

#一二三四五六日181920212223

周日开始

日一二三四五六

src/App.vue

<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>

import { useState } from 'react';
import { CfCalendar } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(ref<Date | null>(null));
  const [b, setB] = useState(ref<Date | null>(null));
  return (
    <>
      <CfCalendar value={a} onChange={setA} weekStartsOn={1} showWeekNumbers />
      <CfCalendar value={b} onChange={setB} weekStartsOn={0} />
    </>
  );
}

Restrict selectable range

min / max define the selectable range. Dates outside it are dimmed and don’t respond to clicks. The example below locks selection between the start of this month and the end of next month.

背景

一二三四五六日

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

src/App.vue

<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>

import { useState } from 'react';
import { CfCalendar } from '@chufix-design/react';

export default function Demo() {
  const [date, setDate] = useState(ref<Date | null>(null));
  const min = new Date(today.getFullYear(), today.getMonth(), 1);
  const max = new Date(today.getFullYear(), today.getMonth() + 2, 0);
  return (
    <>
      <CfCalendar value={date} onChange={setDate} min={min} max={max} />
    </>
  );
}

Three sizes

The overall font size is controlled by size: sm / md (default) / lg. Cell heights scale with the font size.

背景

size = sm

一二三四五六日

size = md

一二三四五六日

size = lg

一二三四五六日

src/App.vue

<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>

import { useState } from 'react';
import { CfCalendar } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(ref<Date | null>(null));
  const [b, setB] = useState(ref<Date | null>(null));
  const [c, setC] = useState(ref<Date | null>(null));
  return (
    <>
      <CfCalendar value={a} onChange={setA} size="sm" />
      <CfCalendar value={b} onChange={setB} size="md" />
      <CfCalendar value={c} onChange={setC} size="lg" />
    </>
  );
}

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`Date \| null`	`null`	Currently selected date
`defaultValue`	`Date \| null`	`null`	Uncontrolled initial value
`month`	`Date`	`current month`	Controlled displayed month
`defaultMonth`	`Date`	—	Uncontrolled initial displayed month
`min` / `max`	`Date`	`—`	Selectable range endpoints (inclusive)
`weekStartsOn`	`0 \| 1`	`1`	0 = Sunday, 1 = Monday
`showWeekNumbers`	`boolean`	`false`	Show the ISO week-number column
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Overall font size
`disabled`	`boolean`	`false`	Disable all interactions
`className`	`string`	`—`	Forwarded to the root container

Events: onChange(date) / update:modelValue fires on date selection; onMonthChange(month) / update:month fires when the displayed month changes.