English
FxCalendar
About 242 wordsLess than 1 minute
2025-12-16
Provides calendar display and date selection capability.
Attributes
| Parameter | Description | Type | Optional Values | Default |
|---|---|---|---|---|
| value / v-model | Bound value | Date/string/number | — | — |
| range | Time range, including start and end time. The start time must be Monday, the end time must be Sunday, and the span cannot exceed two months | Array | — | — |
| first-day-of-week | First day of the week | Number | 1 to 7 | 1 |
dateCell scoped slot parameters
| Parameter | Description | Type | Optional Values | Default |
|---|---|---|---|---|
| date | The date represented by the cell | Date | — | — |
| data | { type, isSelected, day }, where type indicates the month of the date and can be prev-month, current-month, or next-month; isSelected indicates whether the date is selected; day is the formatted date in yyyy-MM-dd | Object | — | — |
Basic
<fx-calendar v-model="value">
</fx-calendar>Custom Content
<fx-calendar>
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</fx-calendar>Custom Range
<fx-calendar :range="['2019-03-04', '2019-03-24']">
</fx-calendar>