diff --git a/packages/theme-saas/src/calendar-view/index.less b/packages/theme-saas/src/calendar-view/index.less
index 5c3177195..7732f7748 100644
--- a/packages/theme-saas/src/calendar-view/index.less
+++ b/packages/theme-saas/src/calendar-view/index.less
@@ -5,6 +5,7 @@
 .@{calendar-view-prefix-cls} {
   @apply w-full;
   @apply h-auto;
+  @apply overflow-auto;
 
   &__header {
     @apply flex;
diff --git a/packages/vue/src/calendar-view/src/mobile-first.vue b/packages/vue/src/calendar-view/src/mobile-first.vue
index 6ea2571f6..f8acc9cfa 100644
--- a/packages/vue/src/calendar-view/src/mobile-first.vue
+++ b/packages/vue/src/calendar-view/src/mobile-first.vue
@@ -1,5 +1,9 @@
 <template>
-  <div data-tag="tiny-calendar-view" class="w-full h-auto">
+  <div
+    data-tag="tiny-calendar-view"
+    class="w-full h-auto overflow-auto"
+    :style="{ 'height': height ? `${parseInt(height)}px` : 'auto' }"
+  >
     <tiny-tooltip ref="tooltip" popper-class="absolute max-w-[theme(spacing.80)]" effect="light" placement="right">
       <template #content>
         <div class="p-2 max-h-[80vh] overflow-auto">
@@ -171,7 +175,9 @@
             >
               <span
                 class="relative mr-2.5 text-base"
-                :class="[dateIsToday(date.value) || computedSelectDay(date)  ? 'text-color-brand' : 'text-color-text-primary']"
+                :class="[
+                  dateIsToday(date.value) || computedSelectDay(date) ? 'text-color-brand' : 'text-color-text-primary'
+                ]"
               >
                 <span>{{ date.value.split('-')[2] }}</span>
                 <span
@@ -182,7 +188,11 @@
               </span>
               <span
                 class="text-sm"
-                :class="[dateIsToday(date.value) || computedSelectDay(date) ? 'text-color-brand' : 'text-color-text-placeholder']"
+                :class="[
+                  dateIsToday(date.value) || computedSelectDay(date)
+                    ? 'text-color-brand'
+                    : 'text-color-text-placeholder'
+                ]"
                 >{{ dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays.${index}`) }}</span
               >
             </slot>
diff --git a/packages/vue/src/calendar-view/src/pc.vue b/packages/vue/src/calendar-view/src/pc.vue
index 24b19b84a..95a9eb735 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" :style="{ 'height': typeof height === 'number' ? height + 'px' : height }">
+  <div class="tiny-calendar-view" :style="{ 'height': height ? `${parseInt(height)}px` : 'auto'}">
     <div class="tiny-calendar-view__header">
       <div>
         <tiny-button v-if="showBackToday" @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>