Calendar

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.

<CfCalendar v-model="date" />

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

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

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.

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

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

<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

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