diff --git a/src/packages/__VUE/calendaritem/index.scss b/src/packages/__VUE/calendaritem/index.scss
index 146ce6aeca5a23cbe95d118d9f59d2f46fde3fbb..04421007da60e4dac38fc275b218bfed24a15821 100644
--- a/src/packages/__VUE/calendaritem/index.scss
+++ b/src/packages/__VUE/calendaritem/index.scss
@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   flex: 1;
-  height: 518px;
+  height: 65vh;
   padding-top: 132px;
   padding-bottom: 78px;
   color: $calendar-base-color;
diff --git a/src/sites/mobile-taro/vue/src/app.config.ts b/src/sites/mobile-taro/vue/src/app.config.ts
index e536e9f7cec42818a067fa17b0ec2a2c6d747ff1..af9cef8ea336ce5ed1b2dab9548c3733a7cd8c17 100644
--- a/src/sites/mobile-taro/vue/src/app.config.ts
+++ b/src/sites/mobile-taro/vue/src/app.config.ts
@@ -1,7 +1,8 @@
 export default {
   pages: [
-    'pages/picker/demo',
     'pages/calendar/demo',
+    'pages/picker/demo',
+
     'pages/input/demo',
     'pages/popup/demo',
     'pages/inputnumber/demo',
diff --git a/src/sites/mobile-taro/vue/src/pages/calendar/demo.vue b/src/sites/mobile-taro/vue/src/pages/calendar/demo.vue
index 065a0aec567edfa7a7101a0b3c928f4eb7cdbfe5..d74cac87e177e184eb572e33b3ad273a337c2c01 100644
--- a/src/sites/mobile-taro/vue/src/pages/calendar/demo.vue
+++ b/src/sites/mobile-taro/vue/src/pages/calendar/demo.vue
@@ -78,7 +78,7 @@
 import { reactive, toRefs } from 'vue';
 import { createComponent } from './../../../../../../packages/utils/create';
 import Calendar from './index.taro.vue';
-
+import Cell from '../cell/index.taro.vue';
 const { createDemo } = createComponent('calendar');
 
 interface TestCalendarState {
@@ -94,7 +94,8 @@ interface TestCalendarState {
 export default createDemo({
   props: {},
   components: {
-    'nut-calendar': Calendar
+    'nut-calendar': Calendar,
+    'nut-cell': Cell
   },
   setup() {
     const state: TestCalendarState = reactive({
@@ -111,12 +112,13 @@ export default createDemo({
       date3: ''
     });
     const openSwitch = (param: string) => {
-      // state[`${param}`] = true;
-      state.isVisible1 = true;
+      state[`${param}`] = true;
+      //state.isVisible = true;
     };
 
     const closeSwitch = (param: string) => {
-      //state[`${param}`] = false;
+      state[`${param}`] = false;
+      //state.isVisible = false;
     };
 
     const setChooseValue = (param: string) => {
diff --git a/src/sites/mobile-taro/vue/src/pages/calendar/index.taro.vue b/src/sites/mobile-taro/vue/src/pages/calendar/index.taro.vue
index a11452f106a26e6977662e3dd5c411e19eda8876..99da3848857e42923221fa4c2edefdad5b66dc21 100644
--- a/src/sites/mobile-taro/vue/src/pages/calendar/index.taro.vue
+++ b/src/sites/mobile-taro/vue/src/pages/calendar/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <nut-popup
     v-if="poppable"
-    :visible="visible"
+    v-model:visible="visible"
     position="bottom"
     round
     :closeable="true"
@@ -24,6 +24,7 @@
     >
     </nut-calendar-item>
   </nut-popup>
+
   <nut-calendar-item
     v-else
     :type="type"
@@ -49,6 +50,10 @@ import Utils from './../../../../../../packages/utils/date';
 type InputDate = string | string[];
 export default create({
   children: [CalendarItem, Popup],
+  components: {
+    'nut-calendar-item': CalendarItem,
+    'nut-popup': Popup
+  },
   props: {
     type: {
       type: String,
@@ -64,7 +69,7 @@ export default create({
     },
     visible: {
       type: Boolean,
-      default: false
+      default: true
     },
     title: {
       type: String,