docs(Calendar): fix documentation errors (#13078)

packages/vant/src/calendar/README.md

@@ -77,7 +77,7 @@ export default {
 
     const onConfirm = (dates) => {
       show.value = false;
-      text.value = `选择了 ${dates.length} 个日期`;
+      text.value = `${dates.length} dates selected`;
     };
 
     return {
@@ -319,7 +319,7 @@ Following props are supported when the type is multiple
 | Key | Description | Type |
 | --- | --- | --- |
 | date | Date | _Date_ |
-| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | _string_ |
+| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled`、`start-end`、`multiple-selected`、`multiple-middle`、`placeholder` | _string_ |
 | text | Text | _string_ |
 | topInfo | Top info | _string_ |
 | bottomInfo | Bottom info | _string_ |
@@ -336,11 +336,11 @@ Following props are supported when the type is multiple
 | opened | Emitted when Popup is opened | - |
 | closed | Emitted when Popup is closed | - |
 | unselect | Emitted when unselect date when type is multiple | _value: Date_ |
-| month-show | Emitted when a month enters the visible area | _value: { date: Date, title: string }_ |
+| month-show | Emitted when a month enters the visible area (effective when `switch mode` is `none`) | _value: { date: Date, title: string }_ |
 | over-range | Emitted when exceeded max range | - |
 | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ |
 | click-disabled-date `v4.7.0` | Emitted when clicking disabled date | _value: Date \| Date[]_ |
-| panel-change | Emitted when switching calendar panel | _{ date: Date }_ |
+| panel-change | Emitted when switching calendar panel (effective when `switch mode` is not `none`) | _{ date: Date }_ |
 
 ### Slots
 
@@ -408,7 +408,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-calendar-header-title-height | _44px_ | - |
 | --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - |
-| --van-calendar-header-action-width | 28px | - |
+| --van-calendar-header-action-width | _28px_ | - |
 | --van-calendar-header-action-color | _var(--van-text-color)_ | - |
 | --van-calendar-header-action-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-calendar-weekdays-height | _30px_ | - |
@@ -419,16 +419,16 @@ The component provides the following CSS variables, which can be used to customi
 | --van-calendar-day-height | _64px_ | - |
 | --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
 | --van-calendar-day-margin-bottom | _4px_ | - |
+| --van-calendar-day-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-calendar-range-edge-color | _var(--van-white)_ | - |
 | --van-calendar-range-edge-background | _var(--van-primary-color)_ | - |
 | --van-calendar-range-middle-color | _var(--van-primary-color)_ | - |
 | --van-calendar-range-middle-background-opacity | _0.1_ | - |
 | --van-calendar-selected-day-size | _54px_ | - |
 | --van-calendar-selected-day-color | _var(--van-white)_ | - |
+| --van-calendar-selected-day-background | _var(--van-primary-color)_ | - |
 | --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
 | --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
-| --van-calendar-selected-day-background | _var(--van-primary-color)_ | - |
-| --van-calendar-day-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-calendar-confirm-button-height | _36px_ | - |
 | --van-calendar-confirm-button-margin | _7px 0_ | - |
 

packages/vant/src/calendar/README.zh-CN.md

@@ -279,8 +279,8 @@ export default {
 | show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` |
 | show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
 | readonly | 是否为只读状态，只读状态下不能选择日期 | _boolean_ | `false` |
-| confirm-text | 确认按钮的文字 | _string_ | `确定` |
+| confirm-text | 确认按钮的文字 | _string_ | `确认` |
-| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
+| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确认` |
 | first-day-of-week | 设置周起始日 | _0-6_ | `0` |
 
 ### Calendar Poppable Props
@@ -325,7 +325,7 @@ export default {
 | 键名 | 说明 | 类型 |
 | --- | --- | --- |
 | date | 日期对应的 Date 对象 | _Date_ |
-| type | 日期类型，可选值为 `selected`、`start`、`middle`、`end`、`disabled` | _string_ |
+| type | 日期类型，可选值为 `selected`、`start`、`middle`、`end`、`disabled`、`start-end`、`multiple-selected`、`multiple-middle`、`placeholder` | _string_ |
 | text | 中间显示的文字 | _string_ |
 | topInfo | 上方的提示信息 | _string_ |
 | bottomInfo | 下方的提示信息 | _string_ |
@@ -342,11 +342,11 @@ export default {
 | opened | 打开弹出层且动画结束后触发 | - |
 | closed | 关闭弹出层且动画结束后触发 | - |
 | unselect | 当日历组件的 `type` 为 `multiple` 时，取消选中日期时触发 | _value: Date_ |
-| month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
+| month-show | 当某个月份进入可视区域时触发（`switch-mode` 为 `none` 时生效） | _{ date: Date, title: string }_ |
 | over-range | 范围选择超过最多可选天数时触发 | - |
 | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ |
 | click-disabled-date `v4.7.0` | 点击禁用日期时触发 | _value: Date \| Date[]_ |
-| panel-change | 日历面板切换时触发 | _{ date: Date }_ |
+| panel-change | 日历面板切换时触发（`switch-mode` 不为 `none` 时生效） | _{ date: Date }_ |
 
 ### Slots
 
@@ -414,7 +414,7 @@ calendarRef.value?.reset();
 | --van-calendar-header-title-height | _44px_ | - |
 | --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - |
-| --van-calendar-header-action-width | 28px | - |
+| --van-calendar-header-action-width | _28px_ | - |
 | --van-calendar-header-action-color | _var(--van-text-color)_ | - |
 | --van-calendar-header-action-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-calendar-weekdays-height | _30px_ | - |
@@ -425,16 +425,16 @@ calendarRef.value?.reset();
 | --van-calendar-day-height | _64px_ | - |
 | --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
 | --van-calendar-day-margin-bottom | _4px_ | - |
+| --van-calendar-day-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-calendar-range-edge-color | _var(--van-white)_ | - |
 | --van-calendar-range-edge-background | _var(--van-primary-color)_ | - |
 | --van-calendar-range-middle-color | _var(--van-primary-color)_ | - |
 | --van-calendar-range-middle-background-opacity | _0.1_ | - |
 | --van-calendar-selected-day-size | _54px_ | - |
 | --van-calendar-selected-day-color | _var(--van-white)_ | - |
+| --van-calendar-selected-day-background | _var(--van-primary-color)_ | - |
 | --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
 | --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
-| --van-calendar-selected-day-background | _var(--van-primary-color)_ | - |
-| --van-calendar-day-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-calendar-confirm-button-height | _36px_ | - |
 | --van-calendar-confirm-button-margin | _7px 0_ | - |
 

packages/vant/src/calendar/index.less

@@ -17,16 +17,16 @@
   --van-calendar-day-height: 64px;
   --van-calendar-day-font-size: var(--van-font-size-lg);
   --van-calendar-day-margin-bottom: 4px;
+  --van-calendar-day-disabled-color: var(--van-text-color-3);
   --van-calendar-range-edge-color: var(--van-white);
   --van-calendar-range-edge-background: var(--van-primary-color);
   --van-calendar-range-middle-color: var(--van-primary-color);
   --van-calendar-range-middle-background-opacity: 0.1;
   --van-calendar-selected-day-size: 54px;
   --van-calendar-selected-day-color: var(--van-white);
+  --van-calendar-selected-day-background: var(--van-primary-color);
   --van-calendar-info-font-size: var(--van-font-size-xs);
   --van-calendar-info-line-height: var(--van-line-height-xs);
-  --van-calendar-selected-day-background: var(--van-primary-color);
-  --van-calendar-day-disabled-color: var(--van-text-color-3);
   --van-calendar-confirm-button-height: 36px;
   --van-calendar-confirm-button-margin: 7px 0;
 }

packages/vant/src/calendar/types.ts

@@ -69,16 +69,16 @@ export type CalendarThemeVars = {
   calendarDayHeight?: string;
   calendarDayFontSize?: string;
   calendarDayMarginBottom?: string;
+  calendarDayDisabledColor?: string;
   calendarRangeEdgeColor?: string;
   calendarRangeEdgeBackground?: string;
   calendarRangeMiddleColor?: string;
   calendarRangeMiddleBackgroundOpacity?: number | string;
   calendarSelectedDaySize?: string;
   calendarSelectedDayColor?: string;
+  calendarSelectedDayBackground?: string;
   calendarInfoFontSize?: string;
   calendarInfoLineHeight?: number | string;
-  calendarSelectedDayBackground?: string;
-  calendarDayDisabledColor?: string;
   calendarConfirmButtonHeight?: string;
   calendarConfirmButtonMargin?: string;
 };