CalendarView
Provides single selection, multiple selection, range, week/month, and datetime calendar selection capabilities. Can be used as a underlying panel component for business calendar selectors.
Performance Tip
It is not recommended to set too large a difference between min-date and max-date. If you need a large time span, it is recommended to use switch-mode (month / year-month) to reduce rendering pressure.
Component Type
Single Date Selection
html
<wd-calendar-view type="date" v-model="value" @change="handleChange" />Multiple Date Selection
html
<wd-calendar-view type="dates" v-model="value" @change="handleChange" />Date Range Selection
html
<wd-calendar-view type="daterange" v-model="value" @change="handleChange" />Date Time Type
html
<wd-calendar-view type="datetime" v-model="value" @change="handleChange" />
<wd-calendar-view type="datetimerange" v-model="valueRange" @change="handleChange" />Week and Month Type
html
<wd-calendar-view type="week" v-model="value" :first-day-of-week="1" @change="handleChange" />
<wd-calendar-view type="month" v-model="value" @change="handleChange" />
<wd-calendar-view type="weekrange" v-model="valueRange" @change="handleChange" />
<wd-calendar-view type="monthrange" v-model="valueRange" @change="handleChange" />Component State
Range Selection Allow Same Day
html
<wd-calendar-view type="daterange" v-model="valueRange" allow-same-day @change="handleChange" />Component Variant
Switch Mode
Set switch-mode to control panel switch behavior:
none: Display all months/years flatly without switch buttonsmonth: Support month switching with previous/next month buttonsyear-month: Support year and month switching with previous/next year, previous/next month buttons
html
<wd-calendar-view type="date" v-model="value" switch-mode="month" @change="handleChange" />Component Style
Format Date
Set formatter to customize date cell text and status.
html
<wd-calendar-view type="daterange" v-model="valueRange" allow-same-day :formatter="formatter" @change="handleChange" />Set Week Start Day
html
<wd-calendar-view :first-day-of-week="1" v-model="value" @change="handleChange" />Show Panel Title
html
<wd-calendar-view type="daterange" :show-panel-title="false" v-model="valueRange" @change="handleChange" />Special Style
Max Range Limit
html
<wd-calendar-view type="daterange" :max-range="3" v-model="valueRange" @change="handleChange" />Time Option Filter
Set hide-second and time-filter to filter hour/minute/second options.
html
<wd-calendar-view type="datetime" v-model="value" hide-second :time-filter="timeFilter" @change="handleChange" />Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| v-model | Selected value, 13-digit timestamp or timestamp array | number | number[] | null | - |
| type | Date type, supports date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | string | date |
| min-date | Minimum date timestamp | number | 6 months before current date |
| max-date | Maximum date timestamp | number | 6 months after current date |
| first-day-of-week | Week start day (0 means Sunday) | number | 0 |
| formatter | Date formatting function | CalendarFormatter | - |
| max-range | Maximum selectable range for range types | number | - |
| range-prompt | Prompt text when exceeding maximum range | string | - |
| allow-same-day | Whether to allow same day/week/month for range types | boolean | false |
| show-panel-title | Whether to show panel title | boolean | true |
| default-time | Default time for date | string | string[] | 00:00:00 |
| panel-height | Scrollable panel height | number | 316 |
| time-filter | Time option filter function (datetime / datetimerange) | CalendarTimeFilter | - |
| time-item-height | Time option height | number | 44 |
| time-visible-item-count | Time visible item count | number | 3 |
| hide-second | Whether to hide second selection (datetime / datetimerange) | boolean | false |
| immediate-change | Whether to trigger time selection change event when finger is released | boolean | false |
| switch-mode | Switch mode, optional values are none, month, year-month. none displays all months/years flatly without switch buttons; month supports month switching with previous/next month buttons; year-month supports year and month switching with previous/next year, previous/next month buttons. For large date spans, it is recommended to use month or year-month to reduce rendering pressure | string | none |
| custom-class | Root node custom class name | string | '' |
| custom-style | Root node custom style | string | '' |
Events
| Event Name | Description | Parameters |
|---|---|---|
| change | Triggered when panel value changes | { value } |
| pickstart | Triggered when time selection scroll starts | - |
| pickend | Triggered when time selection scroll ends | - |
Methods
| Method Name | Description | Parameters |
|---|---|---|
| scrollIntoView | Scroll current date or selected date into visible area (recommended to call when panel shows from hidden) | - |
CalendarDayItem Data Structure
| Property | Description | Type |
|---|---|---|
| type | Date status type | CalendarDayType |
| date | 13-digit timestamp | number |
| text | Date text content | string |
| topInfo | Top tip info | string |
| bottomInfo | Bottom tip info | string |
| disabled | Whether disabled | boolean |
CalendarDayType
| Type | Description |
|---|---|
| selected | Single date selected |
| start | Range start date |
| end | Range end date |
| middle | Dates between range start and end |
| same | Range start and end dates are the same |
| current | Current date |
| multiple-middle | Multiple date range selection, dates between start and end |
| multiple-selected | Multiple date range selection, selected dates |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-calendar-view-panel-title-font-size | $typography-body-size-main | - |
| --wot-calendar-view-panel-title-line-height | $typography-body-line-height-size-main | 面板标题字号 |
| --wot-calendar-view-panel-title-color | $text-main | 面板标题行高 |
| --wot-calendar-view-panel-title-padding | $padding-extra-tight $padding-loose | 面板标题文字颜色 |
| --wot-calendar-view-panel-title-font-weight | $font-weight-medium | 面板标题内边距 |
| --wot-calendar-view-panel-title-margin | $spacing-super-tight $spacing-zero | 面板标题字重 |
| --wot-calendar-view-weeks-padding | $padding-tight $spacing-loose | 面板标题外边距 |
| --wot-calendar-view-week-color | $text-secondary | 星期栏内边距 |
| --wot-calendar-view-week-font-size | $typography-body-size-main | 星期文字颜色 |
| --wot-calendar-view-week-line-height | $typography-body-line-height-size-main | 星期文字字号 |
| --wot-calendar-view-day-font-size | $typography-body-size-extra-large | 星期文字行高 |
| --wot-calendar-view-day-color | $text-main | 日期单元字号 |
| --wot-calendar-view-day-font-weight | $font-weight-medium | 日期单元文字颜色 |
| --wot-calendar-view-day-height | $n-60 | 日期单元字重 |
| --wot-calendar-view-month-width | $n-60 | 日期单元高度 |
| --wot-calendar-view-month-height | $n-60 | 月份单元宽度 |
| --wot-calendar-view-month-font-weight | $font-weight-medium | 月份单元高度 |
| --wot-calendar-view-color-active | $primary-6 | 月份单元字重 |
| --wot-calendar-view-color-selected | $text-white | 激活态颜色 |
| --wot-calendar-view-color-disabled | $text-disabled | 选中态文字颜色 |
| --wot-calendar-view-range-bg | $primary-2 | 禁用态文字颜色 |
| --wot-calendar-view-range-color | $text-main | 区间态背景色 |
| --wot-calendar-view-border-radius-active | $radius-main | 区间态文字颜色 |
| --wot-calendar-view-info-font-size | $typography-label-size-extra-small | 激活态圆角 |
| --wot-calendar-view-info-line-height | $typography-label-line-height-size-extra-small | 顶部/底部辅助信息字号 |
| --wot-calendar-view-info-position | $spacing-extra-tight | 顶部/底部辅助信息行高 |
| --wot-calendar-view-item-margin-bottom | $spacing-super-tight | 顶部/底部辅助信息偏移位置 |
| --wot-calendar-view-item-padding | $padding-zero $spacing-loose | 日期/月份单元底部间距 |
| --wot-calendar-view-time-picker-font-size | $typography-body-size-extra-large | 日期/月份容器内边距 |
| --wot-calendar-view-time-picker-color | $text-main | 时间选择器字号 |
| --wot-calendar-view-time-picker-bg | $filled-content | 时间选择器文字颜色 |
| --wot-calendar-view-time-label-height | $n-44 | 时间选择器背景色 |
| --wot-calendar-view-time-label-border | $stroke-main solid $border-main | 时间标签高度 |
| --wot-calendar-view-controls-padding | $padding-loose | 时间标签分隔边框 |
| --wot-calendar-view-control-icon-color | $icon-secondary | 面板控制栏内边距 |
| --wot-calendar-view-control-icon-size | $n-20 | 控制栏图标颜色 |
| --wot-calendar-view-control-icon-spacing | $spacing-extra-loose | 控制栏图标尺寸 |
| --wot-calendar-view-control-color-disabled | $icon-disabled | 控制栏图标间距 |
| --wot-calendar-view-time-box-shadow | $n-0 (-$n-4) $n-8 $n-0 $opac-1_02 | 控制栏禁用图标颜色 |