From dcb10aa0bec780672f2346ce631697e15abaea62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?=
 <1664677472@qq.com>
Date: Tue, 19 Nov 2024 16:21:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(calendar-view):=20[calendar-view]=20Fix=20b?=
 =?UTF-8?q?ug=20with=20invalid=20calendar=20hei=E2=80=A6=20(#2520)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(calendar-view): [calendar-view] Fix bug with invalid calendar height value

* fix(calendar-view): [calendar-view] Fix bug
---
 examples/sites/demos/apis/calendar-view.js             |  2 +-
 .../pc/app/calendar-view/calendar-disabled-day.spec.ts |  4 ++--
 packages/theme/src/calendar-view/index.less            |  1 +
 packages/vue/src/calendar-view/src/index.ts            |  2 +-
 packages/vue/src/calendar-view/src/pc.vue              | 10 +++++-----
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/sites/demos/apis/calendar-view.js b/examples/sites/demos/apis/calendar-view.js
index bc1ee9bb1b..92be41da0e 100644
--- a/examples/sites/demos/apis/calendar-view.js
+++ b/examples/sites/demos/apis/calendar-view.js
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'height',
-          type: 'string',
+          type: 'string | number',
           defaultValue: '',
           desc: {
             'zh-CN': '日历高度',
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
index 6e9eb4eb06..002ffd163e 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('日期禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-disabled-day')
-  const day10 = page.getByText('10').nth(3)
+  const day10 = page.getByText('10').nth(1)
   const day14 = page.getByText('14').nth(1)
-  const day15 = page.getByText('15').nth(1)
+  const day15 = page.getByText('15').nth(2)
   await expect(day10).toHaveClass(/is-disabled/)
   await expect(day14).toHaveClass(/is-disabled/)
   await expect(day15).toHaveClass('date')
diff --git a/packages/theme/src/calendar-view/index.less b/packages/theme/src/calendar-view/index.less
index 729b7f54a7..5fbf10e591 100644
--- a/packages/theme/src/calendar-view/index.less
+++ b/packages/theme/src/calendar-view/index.less
@@ -23,6 +23,7 @@
   padding-top: 32px;
   border: 1px solid #ebebeb;
   background-color: var(--tv-CalendarView-bg-color);
+  overflow: auto;
 
   &__header {
     display: flex;
diff --git a/packages/vue/src/calendar-view/src/index.ts b/packages/vue/src/calendar-view/src/index.ts
index 6f45d687af..802b10071f 100644
--- a/packages/vue/src/calendar-view/src/index.ts
+++ b/packages/vue/src/calendar-view/src/index.ts
@@ -66,7 +66,7 @@ export const calendarViewProps = {
     }
   },
   height: {
-    type: String,
+    type: [String, Number],
     default: ''
   },
   markColor: {
diff --git a/packages/vue/src/calendar-view/src/pc.vue b/packages/vue/src/calendar-view/src/pc.vue
index a471155caf..fa619b4db9 100644
--- a/packages/vue/src/calendar-view/src/pc.vue
+++ b/packages/vue/src/calendar-view/src/pc.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tiny-calendar-view">
+  <div class="tiny-calendar-view" :style="{ 'height': typeof height === 'number' ? height + 'px' : height }">
     <div class="tiny-calendar-view__header">
       <div>
         <tiny-button @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
@@ -58,8 +58,8 @@
                   day.isLast || day.isNext
                     ? 'is-next-or-last'
                     : isToday(day) || isSelectedDate(day)
-                      ? 'is-selected'
-                      : '',
+                    ? 'is-selected'
+                    : '',
                   day.disabled ? 'is-disabled' : ''
                 ]"
               >
@@ -133,7 +133,7 @@
           <icon-chevron-right></icon-chevron-right>
         </div>
       </div>
-      <div v-if="state.mode === 'timeline'" class="tiny-calendar-view-week__timeline" :style="{ 'height': height }">
+      <div v-if="state.mode === 'timeline'" class="tiny-calendar-view-week__timeline">
         <div class="day-times">
           <ul>
             <li v-for="(item, i) in state.dayTimes" :key="item.time" :class="i % 2 === 1 && 'is-odd-num'">
@@ -186,7 +186,7 @@
           </ul>
         </div>
       </div>
-      <div v-if="state.mode === 'schedule'" class="tiny-calendar-view-week__schedule" :style="{ 'height': height }">
+      <div v-if="state.mode === 'schedule'" class="tiny-calendar-view-week__schedule">
         <ul>
           <li v-for="(date, index) in state.weekDates" :key="date.value" style="width: 14.28%">
             <slot