fix(calendar-view): [calendar-view] Fix bug with invalid calendar hei…

…ght value
opentiny · Nov 14, 2024 · 6abbcdf · 6abbcdf
1 parent 7ad17d8
commit 6abbcdf
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git 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/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
@@ -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
@@ -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