diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/custom.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/custom.vue
new file mode 100644
index 0000000000..b45d073612
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/custom.vue
@@ -0,0 +1,100 @@
+<template>
+  <nut-cell title="Custom" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    ref="calendarRef"
+    v-model:visible="show"
+    :default-value="date"
+    type="range"
+    :first-day-of-week="1"
+    confirm-text="提交"
+    start-text="入店"
+    end-text="离店"
+    @close="show = false"
+    @choose="choose"
+  >
+    <template #btn>
+      <div class="calendar-demo-wrapper">
+        <div class="btn" @click="click1">去某个时间</div>
+        <div class="btn" @click="click2">最近七天</div>
+        <div class="btn" @click="click3">当月</div>
+      </div>
+    </template>
+    <template #day="props">
+      <span>{{ props.date.day }}</span>
+    </template>
+  </nut-calendar>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref([]);
+const calendarRef = ref(null);
+const getNumTwoBit = function (n) {
+  n = Number(n);
+  return (n > 9 ? '' : '0') + n;
+};
+const date2Str = function (date, split) {
+  split = split || '-';
+  const y = date.getFullYear();
+  const m = getNumTwoBit(date.getMonth() + 1);
+  const d = getNumTwoBit(date.getDate());
+  return [y, m, d].join(split);
+};
+const getDay = function (i) {
+  i = i || 0;
+  let date = new Date();
+  const diff = i * (1000 * 60 * 60 * 24);
+  date = new Date(date.getTime() + diff);
+  return date2Str(date);
+};
+const isLeapYear = function (y) {
+  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
+};
+const getMonthDays = function (year, month) {
+  if (/^0/.test(month)) {
+    month = month.split('')[1];
+  }
+  return [0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+};
+const choose = (param) => {
+  date.value = [param[0][3], param[1][3]];
+};
+const click1 = () => {
+  if (calendarRef.value) {
+    const d = new Date();
+    d.setDate(d.getDate() + 30);
+    calendarRef.value.scrollToDate(date2Str(d));
+  }
+};
+const click2 = () => {
+  const d = [date2Str(new Date()), getDay(6)];
+  date.value = d;
+};
+const click3 = () => {
+  const d = new Date();
+  const year = d.getFullYear();
+  let month = d.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  const yearMonth = `${year}-${month}`;
+  const currMonthDays = getMonthDays(year + '', month + '');
+  date.value = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+</script>
+
+<style>
+.calendar-demo-wrapper {
+  display: flex;
+  padding: 0 40px;
+  justify-content: center;
+}
+
+.calendar-demo-wrapper .btn {
+  margin: 0px 5px;
+  background: #fa3f19;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/disabled.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/disabled.vue
new file mode 100644
index 0000000000..bd583da14d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/disabled.vue
@@ -0,0 +1,33 @@
+<template>
+  <nut-cell title="Disabled Date" :desc="String(date)" @click="show = true"> </nut-cell>
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    start-date="2022-01-01"
+    end-date="2022-11-30"
+    :disabled-date="disabledDate"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref('');
+const choose = (param) => {
+  date.value = param[3];
+};
+const disabledDate = (date) => {
+  const disabledDate = {
+    '2022-01-05': true,
+    '2022-01-06': true,
+    '2022-01-10': true,
+    '2022-01-11': true,
+    '2022-01-12': true,
+    '2022-01-13': true,
+    '2022-01-14': true
+  };
+  return disabledDate[date];
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
index 51ea8238f8..37b16ca0b5 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
@@ -1,386 +1,76 @@
 <template>
-  <Demo class="calendar_demo">
-    <h2>基础用法</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="选择单个日期"
-        :desc="state.date ? `${state.date} ${state.dateWeek}` : '请选择'"
-        @click="openSwitch('isVisible')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible"
-        :default-value="state.date"
-        :start-date="`2022-01-11`"
-        :end-date="`2022-11-30`"
-        @close="closeSwitch('isVisible')"
-        @choose="setChooseValue"
-      >
-      </nut-calendar>
-    </div>
+  <Demo class="calendar-demo">
+    <h2>{{ t('single') }}</h2>
+    <Single />
 
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="选择日期区间"
-        :desc="state.date1 ? `${state.date1[0]}至${state.date1[1]}` : '请选择'"
-        @click="openSwitch('isVisible1')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible1"
-        :default-value="state.date1"
-        type="range"
-        :start-date="`2019-12-22`"
-        :end-date="`2021-01-08`"
-        @close="closeSwitch('isVisible1')"
-        @choose="setChooseValue1"
-        @select="select"
-      >
-      </nut-calendar>
-    </div>
+    <h2>{{ t('range') }}</h2>
+    <Range />
 
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="选择多个日期"
-        :desc="state.date7 && state.date7.length ? `已选择${state.date7.length}个日期` : '请选择'"
-        @click="openSwitch('isVisible7')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible7"
-        :default-value="state.date7"
-        type="multiple"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-09-10`"
-        @close="closeSwitch('isVisible7')"
-        @choose="setChooseValue7"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="周选择"
-        :desc="state.date9 ? `${state.date9[0]}${'至'}${state.date9[1]}` : '请选择'"
-        @click="openSwitch('isVisible9')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible9"
-        :default-value="state.date9"
-        type="week"
-        :start-date="`2019-12-22`"
-        :end-date="`2021-01-08`"
-        :first-day-of-week="1"
-        @close="closeSwitch('isVisible9')"
-        @choose="setChooseValue9"
-        @select="select"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="自定义禁用日期"
-        :desc="date ? `${date}` : '请选择'"
-        @click="openSwitch('isVisible')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="isVisible"
-        :default-value="date"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-11-30`"
-        :disabled-date="disabledDate"
-        @close="closeSwitch('isVisible')"
-        @choose="setChooseValue"
-      >
-      </nut-calendar>
-    </div>
+    <h2>{{ t('multiple') }}</h2>
+    <Multiple />
 
-    <h2>快捷选择</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="选择单个日期"
-        :desc="state.date3 ? state.date3 : '请选择'"
-        @click="openSwitch('isVisible3')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible3"
-        :default-value="state.date3"
-        :is-auto-back-fill="true"
-        @close="closeSwitch('isVisible3')"
-        @choose="setChooseValue3"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="选择日期范围"
-        :desc="state.date4 ? `${state.date4[0]}至${state.date4[1]}` : '请选择'"
-        @click="openSwitch('isVisible4')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible4"
-        :default-value="state.date4"
-        type="range"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-12-31`"
-        :is-auto-back-fill="true"
-        @close="closeSwitch('isVisible4')"
-        @choose="setChooseValue4"
-      >
-      </nut-calendar>
-    </div>
-    <h2>自定义日历</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="自定义按钮"
-        :desc="state.date5 && state.date5[0] ? `${state.date5[0]}至${state.date5[1]}` : '请选择'"
-        @click="openSwitch('isVisible5')"
-      >
-      </nut-cell>
-      <nut-calendar
-        ref="calendarRef"
-        v-model:visible="state.isVisible5"
-        :default-value="state.date5"
-        type="range"
-        @close="closeSwitch('isVisible5')"
-        @choose="setChooseValue5"
-      >
-        <template #btn>
-          <view class="wrapper">
-            <view class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></view>
-            <view class="d_div"> <span class="d_btn" @click="clickBtn">最近七天</span></view>
-            <view class="d_div"> <span class="d_btn" @click="clickBtn1">当月</span></view>
-          </view>
-        </template>
-        <template #day="d">
-          <span>{{ d.date.day }}</span>
-        </template>
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="自定义时间文案"
-        :desc="state.date6 && state.date6[0] ? `${state.date6[0]}至${state.date6[1]}` : '请选择'"
-        @click="openSwitch('isVisible6')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible6"
-        :default-value="state.date6"
-        type="range"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-12-31`"
-        confirm-text="submit"
-        start-text="入店"
-        end-text="离店"
-        title="日期选择"
-        @close="closeSwitch('isVisible6')"
-        @choose="setChooseValue6"
-      >
-        <template #day="d">
-          <view>{{ d.date.day <= 9 ? '0' + d.date.day : d.date.day }}</view>
-        </template>
-        <template #bottom-info="d">
-          <view class="info">{{ d.date ? (d.date.day == 10 ? '十' : '') : '' }}</view>
-        </template>
-      </nut-calendar>
-    </div>
-    <h2>自定义周起始日</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        title="自定义周起始日"
-        :desc="state.date8 ? `${state.date8}` : '请选择'"
-        @click="openSwitch('isVisible8')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible8"
-        :default-value="state.date8"
-        :first-day-of-week="2"
-        @close="closeSwitch('isVisible8')"
-        @choose="setChooseValue8"
-      >
-      </nut-calendar>
-    </div>
-    <h2>平铺展示</h2>
-    <div class="test-calendar-wrapper">
-      <nut-calendar
-        :poppable="false"
-        :default-value="state.date2"
-        :is-auto-back-fill="true"
-        :start-date="`2020-02-01`"
-        :end-date="`2020-12-30`"
-        @choose="setChooseValue2"
-      >
-      </nut-calendar>
-    </div>
-  </Demo>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue';
-import Utils from '@/packages/utils/date';
-import { toRefs } from 'vue';
-
-const calendarRef = ref<any>(null);
-const state = reactive({
-  isVisible: false,
-  date: '2022-02-01',
-  dateWeek: '',
-  date1: ['2020-01-23', '2020-01-26'],
-  date2: '2020-07-08',
-  date3: '',
-  date4: ['2022-02-23', '2022-04-26'],
-  date5: [] as string[],
-  date6: [] as string[],
-  date7: [] as string[],
-  date8: '',
-  date9: ['2020-01-23', '2020-01-26'],
-  isVisible1: false,
-  isVisible2: false,
-  isVisible3: false,
-  isVisible4: false,
-  isVisible5: false,
-  isVisible6: false,
-  isVisible7: false,
-  isVisible8: false,
-  isVisible9: false
-});
-const { isVisible, date } = toRefs(state);
-const openSwitch = (param: string) => {
-  state[`${param}`] = true;
-};
+    <h2>{{ t('week') }}</h2>
+    <Week />
 
-const closeSwitch = (param: string) => {
-  state[`${param}`] = false;
-};
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
 
-const setChooseValue = (param: string) => {
-  state.date = param[3];
-  state.dateWeek = param[4];
-};
+    <h2>{{ t('singleQuick') }}</h2>
+    <SingleQuick />
 
-const select = (param: string) => {
-  console.log(param);
-};
-const setChooseValue1 = (param: string) => {
-  state.date1 = [...[param[0][3], param[1][3]]];
-};
+    <h2>{{ t('rangeQuick') }}</h2>
+    <RangeQuick />
 
-const setChooseValue2 = (param: string) => {
-  state.date2 = param[3];
-};
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-const setChooseValue3 = (param: string) => {
-  state.date3 = param[3];
-};
-const setChooseValue4 = (param: string) => {
-  state.date4 = [...[param[0][3], param[1][3]]];
-};
+    <h2>{{ t('tiled') }}</h2>
+    <Tiled />
+  </Demo>
+</template>
 
-const setChooseValue5 = (param: string) => {
-  state.date5 = [...[param[0][3], param[1][3]]];
-};
-const setChooseValue6 = (param: string) => {
-  state.date6 = [...[param[0][3], param[1][3]]];
-};
-const setChooseValue7 = (chooseData: any) => {
-  let dateArr = chooseData.map((item: any) => {
-    return item[3];
-  });
-  console.log('changevalue 7 ', chooseData, dateArr);
-  state.date7 = [...dateArr];
-};
-const setChooseValue8 = (param: string) => {
-  state.date8 = param[3];
-};
-const setChooseValue9 = (param: any) => {
-  let { weekDate } = param;
-  state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
-};
-const clickBtn = () => {
-  let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-  state.date5 = date;
-};
-const clickBtn1 = () => {
-  let date = new Date();
-  let year = date.getFullYear();
-  let month: any = date.getMonth() + 1;
-  month = month < 10 ? '0' + month : month + '';
-  let yearMonth = `${year}-${month}`;
-  let currMonthDays = Utils.getMonthDays(year + '', month + '');
-  state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-};
-const goDate = () => {
-  if (calendarRef.value) {
-    var date1 = new Date();
-    date1.setDate(date1.getDate() + 30);
-    calendarRef.value.scrollToDate(Utils.date2Str(date1));
+<script setup lang="ts">
+import { useTranslate } from '../../../utils';
+import Single from './single.vue';
+import Range from './range.vue';
+import Multiple from './multiple.vue';
+import Week from './week.vue';
+import Disabled from './disabled.vue';
+import SingleQuick from './single-quick.vue';
+import RangeQuick from './range-quick.vue';
+import Custom from './custom.vue';
+import Tiled from './tiled.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    single: '选择单个日期',
+    range: '选择日期区间',
+    multiple: '选择多个日期',
+    week: '选择周',
+    disabled: '自定义禁用日期',
+    singleQuick: '快捷选择-单个日期',
+    rangeQuick: '快捷选择-日期范围',
+    custom: '自定义日历',
+    tiled: '平铺展示'
+  },
+  'en-US': {
+    single: 'Select Single Date',
+    range: 'Select Date Range',
+    multiple: 'Select Multiple Date',
+    week: 'Select Week',
+    disabled: 'Disabled Date',
+    singleQuick: 'Quick Select Single',
+    rangeQuick: 'Quick Select Range',
+    custom: 'Custom Calendar',
+    tiled: 'Tiled Display'
   }
-};
-const disabledDate = (date) => {
-  const disabledDate = {
-    '2022-01-05': true,
-    '2022-01-06': true,
-    '2022-01-10': true,
-    '2022-01-11': true,
-    '2022-01-12': true,
-    '2022-01-13': true,
-    '2022-01-14': true
-  };
-  return disabledDate[date];
-};
+});
 </script>
 
 <style lang="scss">
-.calendar_demo {
+.calendar-demo {
   .nut-cell__value {
-    flex: initial;
+    flex: initial !important;
   }
 }
-
-.test-calendar-wrapper {
-  display: flex;
-  width: 100%;
-  height: 560px;
-  overflow: hidden;
-}
-
-.wrapper {
-  display: flex;
-  padding: 0 40px;
-  justify-content: center;
-}
-
-.d_div {
-  margin: 0px 5px;
-
-  .d_btn {
-    background: #fa3f19;
-    color: #fff;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    display: inline-block;
-    height: 16px;
-  }
-}
-
-.info {
-  font-size: 12px;
-  line-height: 14px;
-}
 </style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/multiple.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/multiple.vue
new file mode 100644
index 0000000000..13ad2908d5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/multiple.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-cell title="Multiple" :desc="String(date.length)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="multiple"
+    start-date="2022-01-01"
+    end-date="2022-09-10"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref([]);
+const choose = (param) => {
+  date.value = param.map((item) => item[3]);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/range-quick.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/range-quick.vue
new file mode 100644
index 0000000000..0e19029e79
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/range-quick.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-cell title="Range" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="range"
+    start-date="2019-12-22"
+    end-date="2021-01-08"
+    is-auto-back-fill
+    @close="show = false"
+    @choose="choose"
+    @select="select"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref(['2019-12-23', '2019-12-26']);
+const choose = (param) => {
+  date.value = [param[0][3], param[1][3]];
+};
+const select = (param) => {
+  console.log(param);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/range.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/range.vue
new file mode 100644
index 0000000000..8f06c7b00c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/range.vue
@@ -0,0 +1,25 @@
+<template>
+  <nut-cell title="Range" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="range"
+    start-date="2019-12-22"
+    end-date="2021-01-08"
+    @close="show = false"
+    @choose="choose"
+    @select="select"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref(['2019-12-23', '2019-12-26']);
+const choose = (param) => {
+  date.value = [param[0][3], param[1][3]];
+};
+const select = (param) => {
+  console.log(param);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/single-quick.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/single-quick.vue
new file mode 100644
index 0000000000..8ea8612eee
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/single-quick.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-cell title="Single" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    start-date="2022-01-11"
+    end-date="2022-11-30"
+    is-auto-back-fill
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref('2022-02-01');
+const choose = (param) => {
+  date.value = param[3];
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/single.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/single.vue
new file mode 100644
index 0000000000..bf13226a8e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/single.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-cell title="Single" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    start-date="2022-01-11"
+    end-date="2022-11-30"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref('2022-02-01');
+const choose = (param) => {
+  date.value = param[3];
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/tiled.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/tiled.vue
new file mode 100644
index 0000000000..38c25d2a78
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/tiled.vue
@@ -0,0 +1,21 @@
+<template>
+  <view style="height: 500px">
+    <nut-calendar
+      :poppable="false"
+      is-auto-back-fill
+      :default-value="date"
+      start-date="2022-01-11"
+      end-date="2022-11-30"
+      @choose="choose"
+    >
+    </nut-calendar>
+  </view>
+</template>
+<script setup>
+import { ref } from 'vue';
+const date = ref('2022-02-01');
+const choose = (param) => {
+  console.log(param);
+  date.value = param[3];
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/week.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/week.vue
new file mode 100644
index 0000000000..3271aa349c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/week.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-cell title="Week" :desc="String(date)" @click="show = true"> </nut-cell>
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="week"
+    start-date="2019-12-22"
+    end-date="2021-01-08"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref(['2019-12-23', '2019-12-26']);
+const choose = (param) => {
+  const { weekDate } = param;
+  date.value = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo.vue b/src/packages/__VUE/calendar/demo.vue
deleted file mode 100644
index 8fc1b46eba..0000000000
--- a/src/packages/__VUE/calendar/demo.vue
+++ /dev/null
@@ -1,514 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('title') }}</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('single')"
-        :desc="state.date ? `${state.date} ${state.dateWeek}` : translate('please')"
-        @click="openSwitch('isVisible')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible"
-        :default-value="state.date"
-        :start-date="`2022-01-11`"
-        :end-date="`2022-11-30`"
-        @close="closeSwitch('isVisible')"
-        @choose="setChooseValue"
-      >
-      </nut-calendar>
-    </div>
-
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('range')"
-        :desc="
-          state.date1.length ? `${state.date1[0]}${translate('conjunction')}${state.date1[1]}` : translate('please')
-        "
-        @click="openSwitch('isVisible1')"
-      >
-      </nut-cell>
-      <nut-calendar
-        ref="calendarRef"
-        v-model:visible="state.isVisible1"
-        :default-value="state.date1"
-        type="range"
-        :start-date="`2019-12-22`"
-        :end-date="`2021-01-08`"
-        @close="closeSwitch('isVisible1')"
-        @choose="setChooseValue1"
-        @select="select"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('multiple')"
-        :desc="
-          state.date7 && state.date7.length ? `${translate('selected')}${state.date7.length}` : translate('please')
-        "
-        @click="openSwitch('isVisible7')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible7"
-        :default-value="state.date7"
-        type="multiple"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-09-10`"
-        @close="closeSwitch('isVisible7')"
-        @choose="setChooseValue7"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('week')"
-        :desc="
-          state.date9.length ? `${state.date9[0]}${translate('conjunction')}${state.date9[1]}` : translate('please')
-        "
-        @click="openSwitch('isVisible9')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible9"
-        :default-value="state.date9"
-        type="week"
-        :start-date="`2019-12-22`"
-        :end-date="`2021-01-08`"
-        :first-day-of-week="1"
-        @close="closeSwitch('isVisible9')"
-        @choose="setChooseValue9"
-        @select="select"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('disabledDate')"
-        :desc="date ? `${date}` : translate('please')"
-        @click="openSwitch('isVisible')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="isVisible"
-        :default-value="date"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-11-30`"
-        :disabled-date="disabledDate"
-        @close="closeSwitch('isVisible')"
-        @choose="setChooseValue"
-      >
-      </nut-calendar>
-    </div>
-    <h2>{{ translate('title1') }}</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('single')"
-        :desc="state.date3 ? state.date3 : translate('please')"
-        @click="openSwitch('isVisible3')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible3"
-        :default-value="state.date3"
-        :is-auto-back-fill="true"
-        @close="closeSwitch('isVisible3')"
-        @choose="setChooseValue3"
-      >
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('range')"
-        :desc="
-          state.date4.length ? `${state.date4[0]}${translate('conjunction')}${state.date4[1]}` : translate('please')
-        "
-        @click="openSwitch('isVisible4')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible4"
-        :default-value="state.date4"
-        type="range"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-12-31`"
-        :is-auto-back-fill="true"
-        @close="closeSwitch('isVisible4')"
-        @choose="setChooseValue4"
-      >
-      </nut-calendar>
-    </div>
-    <h2>{{ translate('title2') }}</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('custom_btn')"
-        :desc="
-          state.date5 && state.date5[0]
-            ? `${state.date5[0]}${translate('conjunction')}${state.date5[1]}`
-            : translate('please')
-        "
-        @click="openSwitch('isVisible5')"
-      >
-      </nut-cell>
-      <nut-calendar
-        ref="calendarRef"
-        v-model:visible="state.isVisible5"
-        :default-value="state.date5"
-        type="range"
-        @close="closeSwitch('isVisible5')"
-        @choose="setChooseValue5"
-      >
-        <template #btn>
-          <div class="wrapper">
-            <div class="d_div">
-              <span class="d_btn" @click="goDate">{{ translate('goDate') }}</span>
-            </div>
-            <div class="d_div">
-              <span class="d_btn" @click="clickBtn">{{ translate('seven') }}</span>
-            </div>
-            <div class="d_div">
-              <span class="d_btn" @click="clickBtn1">{{ translate('current') }}</span>
-            </div>
-          </div>
-        </template>
-        <template #day="d">
-          <span>{{ d.date.day }}</span>
-        </template>
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('timeText')"
-        :desc="
-          state.date6 && state.date6[0]
-            ? `${state.date6[0]}${translate('conjunction')}${state.date6[1]}`
-            : translate('please')
-        "
-        @click="openSwitch('isVisible6')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible6"
-        :default-value="state.date6"
-        type="range"
-        :start-date="`2022-01-01`"
-        :end-date="`2022-12-31`"
-        confirm-text="submit"
-        :start-text="translate('enter')"
-        :end-text="translate('leave')"
-        :title="translate('please')"
-        @close="closeSwitch('isVisible6')"
-        @choose="setChooseValue6"
-      >
-        <template #day="d">
-          <span>{{ renderDate(d) }}</span>
-        </template>
-        <template #bottom-info="d">
-          <span class="info">{{ d.date ? (d.date.day == 10 ? '十' : '') : '' }}</span>
-        </template>
-      </nut-calendar>
-    </div>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('custom_footer')"
-        :desc="state.date10 ? `${state.date10}` : translate('please')"
-        @click="openSwitch('isVisible10')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible10"
-        :default-value="state.date10"
-        :poppable="true"
-        :is-auto-back-fill="false"
-        @close="closeSwitch('isVisible10')"
-        @select="setSelectalue10"
-      >
-        <template #footer-info="dateInfo">
-          <nut-button
-            size="large"
-            block
-            round
-            type="primary"
-            :disabled="state.disabled10"
-            @click="clickBtn10(dateInfo)"
-            >{{ state.disabled10 ? translate('custom_footer_text1') : translate('custom_footer_text2') }}</nut-button
-          >
-        </template>
-      </nut-calendar>
-    </div>
-    <h2>{{ translate('title3') }}</h2>
-    <div>
-      <nut-cell
-        :show-icon="true"
-        :title="translate('single')"
-        :desc="state.date8 ? `${state.date8}` : translate('please')"
-        @click="openSwitch('isVisible8')"
-      >
-      </nut-cell>
-      <nut-calendar
-        v-model:visible="state.isVisible8"
-        :default-value="state.date8"
-        :first-day-of-week="2"
-        @close="closeSwitch('isVisible8')"
-        @choose="setChooseValue8"
-      >
-      </nut-calendar>
-    </div>
-    <h2>{{ translate('title4') }}</h2>
-    <div class="test-calendar-wrapper">
-      <nut-calendar
-        :poppable="false"
-        :default-value="state.date2"
-        :is-auto-back-fill="true"
-        :start-date="`2020-02-01`"
-        :end-date="`2020-12-30`"
-        @choose="setChooseValue2"
-      >
-      </nut-calendar>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, toRefs } from 'vue';
-import Utils from '@/packages/utils/date';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { CalendarRef, Day } from '../calendaritem/type';
-
-const translate = useTranslate({
-  'zh-CN': {
-    title: '基础用法',
-    title1: '快捷选择',
-    title2: '自定义日历',
-    title3: '自定义周起始日',
-    title4: '平铺展示',
-
-    please: '请选择',
-    single: '选择单个日期',
-    range: '选择日期区间',
-    multiple: '选择多个日期',
-    week: '选择周',
-    disabledDate: '自定义禁用日期',
-
-    conjunction: '至',
-    custom_btn: '自定义按钮',
-    timeText: '自定义时间文案',
-    custom_footer: '自定义底部',
-    custom_footer_text1: '偶数的日期不能选择',
-    custom_footer_text2: '奇数的日期可以选择',
-
-    goDate: '去某个月',
-    seven: '最近七天',
-    current: '当月',
-    enter: '入店',
-    leave: '离店',
-    mid: '中旬',
-    selected: '已选择：'
-  },
-  'en-US': {
-    title: 'Basic Usage',
-    title1: 'Quick Select',
-    title2: 'Custom Calendar',
-    title3: 'Custom First Day Of Week',
-    title4: 'Tiled Display',
-
-    please: 'Please Select Date',
-    single: 'Select Single Date',
-    range: 'Select Date Range',
-    multiple: 'Select Multiple Date',
-    week: 'Select Week',
-    disabledDate: 'Disabled Date',
-
-    conjunction: '-',
-    custom_btn: 'Custom Button',
-    timeText: 'Custom Date Text',
-    custom_footer: 'Custom Footer',
-    custom_footer_text1: 'Even dates cannot be selected',
-    custom_footer_text2: 'Odd dates can be selected',
-
-    goDate: 'Go Date',
-    seven: 'Last Seven Days',
-    current: 'This Month',
-    enter: 'enter',
-    leave: 'leave',
-    mid: 'mid',
-    selected: 'selected:'
-  }
-});
-const calendarRef = ref<null | CalendarRef>(null);
-const state = reactive({
-  isVisible: false,
-  date: '2022-02-01',
-  dateWeek: '',
-  date1: ['2020-01-23', '2020-01-26'],
-  date2: '2020-07-08',
-  date3: '',
-  date4: ['2021-12-23', '2021-12-26'],
-  date5: ['2021-12-23', '2021-12-26'],
-  date6: [] as string[],
-  date7: [] as string[],
-  date8: '',
-  date9: [] as string[],
-  date10: '2023-09-03',
-  isVisible1: false,
-  isVisible2: false,
-  isVisible3: false,
-  isVisible4: false,
-  isVisible5: false,
-  isVisible6: false,
-  isVisible7: false,
-  isVisible8: false,
-  isVisible9: false,
-  isVisible10: false,
-  disabled10: false
-});
-const { isVisible, date } = toRefs(state);
-const openSwitch = (param: string) => {
-  (state as any)[`${param}`] = true;
-};
-
-const closeSwitch = (param: string) => {
-  (state as any)[`${param}`] = false;
-};
-
-const setChooseValue = (param: string) => {
-  state.date = param[3];
-  state.dateWeek = param[4];
-};
-
-const select = (param: string) => {
-  console.log(param);
-};
-const setChooseValue1 = (chooseData: any) => {
-  let dateArr = chooseData.map((item: any) => {
-    return item[3];
-  });
-  state.date1 = [...dateArr];
-};
-const setChooseValue2 = (param: string) => {
-  state.date2 = param[3];
-};
-
-const setChooseValue3 = (param: string) => {
-  state.date3 = param[3];
-};
-const setChooseValue4 = (param: string) => {
-  state.date4 = [...[param[0][3], param[1][3]]];
-};
-
-const setChooseValue5 = (param: string) => {
-  state.date5 = [...[param[0][3], param[1][3]]];
-};
-const setChooseValue6 = (param: string) => {
-  state.date6 = [...[param[0][3], param[1][3]]];
-};
-const setChooseValue7 = (chooseData: any) => {
-  let dateArr = chooseData.map((item: any) => {
-    return item[3];
-  });
-  state.date7 = [...dateArr];
-};
-const setChooseValue8 = (param: string) => {
-  state.date8 = param[3];
-};
-const setChooseValue9 = (param: any) => {
-  let { weekDate } = param;
-  state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
-};
-const setSelectalue10 = (param: any) => {
-  state.disabled10 = param[2] % 2 === 0;
-};
-
-const clickBtn = () => {
-  let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-  state.date5 = date;
-};
-const clickBtn1 = () => {
-  let date = new Date();
-  let year = date.getFullYear();
-  let month: any = date.getMonth() + 1;
-  month = month < 10 ? '0' + month : month + '';
-  let yearMonth = `${year}-${month}`;
-  let currMonthDays = Utils.getMonthDays(year + '', month + '');
-  state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-};
-const goDate = () => {
-  if (calendarRef.value) {
-    var date1 = new Date();
-    date1.setDate(date1.getDate() + 30);
-    calendarRef.value.scrollToDate(Utils.date2Str(date1));
-  }
-};
-const renderDate = (date: { date: Day }) => {
-  return +date.date.day <= 9 ? '0' + date.date.day : date.date.day;
-};
-const clickBtn10 = (dateInfo: any) => {
-  state.date10 = dateInfo.date[3];
-  state.isVisible10 = false;
-};
-const disabledDate = (date: string) => {
-  const disabledDate: {
-    [key: string]: boolean | undefined;
-  } = {
-    '2022-01-05': true,
-    '2022-01-06': true,
-    '2022-01-10': true,
-    '2022-01-11': true,
-    '2022-01-12': true,
-    '2022-01-13': true,
-    '2022-01-14': true
-  };
-  return disabledDate[date];
-};
-</script>
-
-<style lang="scss" scoped>
-.demo {
-  ::v-deep(.nut-cell__value) {
-    flex: initial;
-  }
-}
-
-.test-calendar-wrapper {
-  display: flex;
-  width: 100%;
-  height: 560px;
-  overflow: hidden;
-}
-
-.wrapper {
-  display: flex;
-  padding: 0 40px;
-  justify-content: center;
-}
-
-.d_div {
-  margin: 0px 5px;
-
-  .d_btn {
-    background: #fa3f19;
-    color: #fff;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    display: inline-block;
-    height: 16px;
-  }
-}
-
-.info {
-  font-size: 12px;
-  line-height: 14px;
-}
-</style>
diff --git a/src/packages/__VUE/calendar/demo/custom.vue b/src/packages/__VUE/calendar/demo/custom.vue
new file mode 100644
index 0000000000..b45d073612
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/custom.vue
@@ -0,0 +1,100 @@
+<template>
+  <nut-cell title="Custom" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    ref="calendarRef"
+    v-model:visible="show"
+    :default-value="date"
+    type="range"
+    :first-day-of-week="1"
+    confirm-text="提交"
+    start-text="入店"
+    end-text="离店"
+    @close="show = false"
+    @choose="choose"
+  >
+    <template #btn>
+      <div class="calendar-demo-wrapper">
+        <div class="btn" @click="click1">去某个时间</div>
+        <div class="btn" @click="click2">最近七天</div>
+        <div class="btn" @click="click3">当月</div>
+      </div>
+    </template>
+    <template #day="props">
+      <span>{{ props.date.day }}</span>
+    </template>
+  </nut-calendar>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref([]);
+const calendarRef = ref(null);
+const getNumTwoBit = function (n) {
+  n = Number(n);
+  return (n > 9 ? '' : '0') + n;
+};
+const date2Str = function (date, split) {
+  split = split || '-';
+  const y = date.getFullYear();
+  const m = getNumTwoBit(date.getMonth() + 1);
+  const d = getNumTwoBit(date.getDate());
+  return [y, m, d].join(split);
+};
+const getDay = function (i) {
+  i = i || 0;
+  let date = new Date();
+  const diff = i * (1000 * 60 * 60 * 24);
+  date = new Date(date.getTime() + diff);
+  return date2Str(date);
+};
+const isLeapYear = function (y) {
+  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
+};
+const getMonthDays = function (year, month) {
+  if (/^0/.test(month)) {
+    month = month.split('')[1];
+  }
+  return [0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+};
+const choose = (param) => {
+  date.value = [param[0][3], param[1][3]];
+};
+const click1 = () => {
+  if (calendarRef.value) {
+    const d = new Date();
+    d.setDate(d.getDate() + 30);
+    calendarRef.value.scrollToDate(date2Str(d));
+  }
+};
+const click2 = () => {
+  const d = [date2Str(new Date()), getDay(6)];
+  date.value = d;
+};
+const click3 = () => {
+  const d = new Date();
+  const year = d.getFullYear();
+  let month = d.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  const yearMonth = `${year}-${month}`;
+  const currMonthDays = getMonthDays(year + '', month + '');
+  date.value = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+</script>
+
+<style>
+.calendar-demo-wrapper {
+  display: flex;
+  padding: 0 40px;
+  justify-content: center;
+}
+
+.calendar-demo-wrapper .btn {
+  margin: 0px 5px;
+  background: #fa3f19;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/packages/__VUE/calendar/demo/disabled.vue b/src/packages/__VUE/calendar/demo/disabled.vue
new file mode 100644
index 0000000000..bd583da14d
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/disabled.vue
@@ -0,0 +1,33 @@
+<template>
+  <nut-cell title="Disabled Date" :desc="String(date)" @click="show = true"> </nut-cell>
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    start-date="2022-01-01"
+    end-date="2022-11-30"
+    :disabled-date="disabledDate"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref('');
+const choose = (param) => {
+  date.value = param[3];
+};
+const disabledDate = (date) => {
+  const disabledDate = {
+    '2022-01-05': true,
+    '2022-01-06': true,
+    '2022-01-10': true,
+    '2022-01-11': true,
+    '2022-01-12': true,
+    '2022-01-13': true,
+    '2022-01-14': true
+  };
+  return disabledDate[date];
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/index.vue b/src/packages/__VUE/calendar/demo/index.vue
new file mode 100644
index 0000000000..135161bfc8
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <Demo class="calendar-demo">
+    <h2>{{ t('single') }}</h2>
+    <Single />
+
+    <h2>{{ t('range') }}</h2>
+    <Range />
+
+    <h2>{{ t('multiple') }}</h2>
+    <Multiple />
+
+    <h2>{{ t('week') }}</h2>
+    <Week />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('singleQuick') }}</h2>
+    <SingleQuick />
+
+    <h2>{{ t('rangeQuick') }}</h2>
+    <RangeQuick />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('tiled') }}</h2>
+    <Tiled />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Single from './single.vue';
+import Range from './range.vue';
+import Multiple from './multiple.vue';
+import Week from './week.vue';
+import Disabled from './disabled.vue';
+import SingleQuick from './single-quick.vue';
+import RangeQuick from './range-quick.vue';
+import Custom from './custom.vue';
+import Tiled from './tiled.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    single: '选择单个日期',
+    range: '选择日期区间',
+    multiple: '选择多个日期',
+    week: '选择周',
+    disabled: '自定义禁用日期',
+    singleQuick: '快捷选择-单个日期',
+    rangeQuick: '快捷选择-日期范围',
+    custom: '自定义日历',
+    tiled: '平铺展示'
+  },
+  'en-US': {
+    single: 'Select Single Date',
+    range: 'Select Date Range',
+    multiple: 'Select Multiple Date',
+    week: 'Select Week',
+    disabled: 'Disabled Date',
+    singleQuick: 'Quick Select Single',
+    rangeQuick: 'Quick Select Range',
+    custom: 'Custom Calendar',
+    tiled: 'Tiled Display'
+  }
+});
+</script>
+
+<style lang="scss">
+.calendar-demo {
+  .nut-cell__value {
+    flex: initial !important;
+  }
+}
+</style>
diff --git a/src/packages/__VUE/calendar/demo/multiple.vue b/src/packages/__VUE/calendar/demo/multiple.vue
new file mode 100644
index 0000000000..13ad2908d5
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/multiple.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-cell title="Multiple" :desc="String(date.length)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="multiple"
+    start-date="2022-01-01"
+    end-date="2022-09-10"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref([]);
+const choose = (param) => {
+  date.value = param.map((item) => item[3]);
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/range-quick.vue b/src/packages/__VUE/calendar/demo/range-quick.vue
new file mode 100644
index 0000000000..0e19029e79
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/range-quick.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-cell title="Range" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="range"
+    start-date="2019-12-22"
+    end-date="2021-01-08"
+    is-auto-back-fill
+    @close="show = false"
+    @choose="choose"
+    @select="select"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref(['2019-12-23', '2019-12-26']);
+const choose = (param) => {
+  date.value = [param[0][3], param[1][3]];
+};
+const select = (param) => {
+  console.log(param);
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/range.vue b/src/packages/__VUE/calendar/demo/range.vue
new file mode 100644
index 0000000000..8f06c7b00c
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/range.vue
@@ -0,0 +1,25 @@
+<template>
+  <nut-cell title="Range" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="range"
+    start-date="2019-12-22"
+    end-date="2021-01-08"
+    @close="show = false"
+    @choose="choose"
+    @select="select"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref(['2019-12-23', '2019-12-26']);
+const choose = (param) => {
+  date.value = [param[0][3], param[1][3]];
+};
+const select = (param) => {
+  console.log(param);
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/single-quick.vue b/src/packages/__VUE/calendar/demo/single-quick.vue
new file mode 100644
index 0000000000..8ea8612eee
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/single-quick.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-cell title="Single" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    start-date="2022-01-11"
+    end-date="2022-11-30"
+    is-auto-back-fill
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref('2022-02-01');
+const choose = (param) => {
+  date.value = param[3];
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/single.vue b/src/packages/__VUE/calendar/demo/single.vue
new file mode 100644
index 0000000000..bf13226a8e
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/single.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-cell title="Single" :desc="String(date)" @click="show = true" />
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    start-date="2022-01-11"
+    end-date="2022-11-30"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref('2022-02-01');
+const choose = (param) => {
+  date.value = param[3];
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/tiled.vue b/src/packages/__VUE/calendar/demo/tiled.vue
new file mode 100644
index 0000000000..1efbc053e9
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/tiled.vue
@@ -0,0 +1,21 @@
+<template>
+  <div style="height: 500px">
+    <nut-calendar
+      :poppable="false"
+      is-auto-back-fill
+      :default-value="date"
+      start-date="2022-01-11"
+      end-date="2022-11-30"
+      @choose="choose"
+    >
+    </nut-calendar>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+const date = ref('2022-02-01');
+const choose = (param) => {
+  console.log(param);
+  date.value = param[3];
+};
+</script>
diff --git a/src/packages/__VUE/calendar/demo/week.vue b/src/packages/__VUE/calendar/demo/week.vue
new file mode 100644
index 0000000000..3271aa349c
--- /dev/null
+++ b/src/packages/__VUE/calendar/demo/week.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-cell title="Week" :desc="String(date)" @click="show = true"> </nut-cell>
+  <nut-calendar
+    v-model:visible="show"
+    :default-value="date"
+    type="week"
+    start-date="2019-12-22"
+    end-date="2021-01-08"
+    @close="show = false"
+    @choose="choose"
+  >
+  </nut-calendar>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const date = ref(['2019-12-23', '2019-12-26']);
+const choose = (param) => {
+  const { weekDate } = param;
+  date.value = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+</script>
diff --git a/src/packages/__VUE/calendar/doc.en-US.md b/src/packages/__VUE/calendar/doc.en-US.md
index a0c3c76f5f..26c26c2ee2 100644
--- a/src/packages/__VUE/calendar/doc.en-US.md
+++ b/src/packages/__VUE/calendar/doc.en-US.md
@@ -14,694 +14,46 @@ const app = createApp();
 app.use(Calendar);
 ```
 
-### Basic Usage
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Select Single Date"
-    :desc="state.date ? `${state.date} ${state.dateWeek}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-11`"
-    :end-date="`2022-11-30`"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  isVisible: false,
-  date: '',
-  dateWeek: ''
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-  state.dateWeek = param[4];
-};
-</script>
-```
+### Select Single Date
 
-:::
+> demo: calendar single
 
 ### Select Date Range
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Select Date Range"
-    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    :start-date="`2019-12-22`"
-    :end-date="`2021-01-08`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    @select="select"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = [...[param[0][3], param[1][3]]];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
-
-:::
+> demo: calendar range
 
 ### Select Multiple Date
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :show-icon="true"
-    title="Select Multiple Date"
-    :desc="state.date7 && state.date7.length ? `${state.date7.length} dates selected` : 'Please Select Date'"
-    @click="openSwitch('isVisible7')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible7"
-    :default-value="state.date7"
-    type="multiple"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-09-10`"
-    @close="closeSwitch('isVisible7')"
-    @choose="setChooseValue7"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date7: [],
-  isVisible7: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue7 = (chooseData) => {
-  let dateArr = chooseData.map((item) => {
-    return item[3];
-  });
-  state.date7 = [...dateArr];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-```
-
-:::
+> demo: calendar multiple
 
 ### Select Week
 
 When set to week selection, the start and end dates of the week will be determined according to `first-day-of-week`. For example, when `first-day-of-week` is 0, the start date of a week is Sunday. In other cases, the start date of the week is Monday.
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Select Week"
-    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="week"
-    :start-date="`2019-12-22`"
-    :end-date="`2021-01-08`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    @select="select"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  let { weekDate } = param;
-  state.date = [weekDate[0].date[3], weekDate[1].date[3]];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
 
-:::
+> demo: calendar week
 
 ### Customize the disable date
 
 By configuring the `disabled-date` function callback, you can customize to disable certain dates from being selected.
 When the type is `range`, if this function is set, you need to filter out the disabled date after selecting the result
 
-:::demo
-
-```html
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Customize the disable date"
-    :desc="date ? `${date}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-11-30`"
-    :disabled-date="disabledDate"
-  >
-  </nut-calendar>
-</template>
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      const disabledDate = (date) => {
-        const disabledDate = {
-          '2022-01-05': true,
-          '2022-01-06': true,
-          '2022-01-10': true,
-          '2022-01-11': true,
-          '2022-01-12': true,
-          '2022-01-13': true,
-          '2022-01-14': true
-        };
-        return disabledDate[date];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        disabledDate
-      };
-    }
-  };
-</script>
-```
-
-:::
-
-### Quick Select Single Date
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Select Single Date"
-    :desc="state.date ? state.date : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :default-value="state.date"
-    :is-auto-back-fill="true"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: '',
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-```
-
-:::
-
-### Quick Select Date Range
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Select Date Range"
-    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-12-31`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :is-auto-back-fill="true"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2021-12-23', '2021-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = [...[param[0][3], param[1][3]]];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar disabled
 
-:::
+### Quick Select Single
 
-### Custom Button
+> demo: calendar single-quick
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Custom Button"
-    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    ref="calendarRef"
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-  >
-    <template #btn>
-      <div class="wrapper">
-        <div class="d_div"> <span class="d_btn" @click="goDate">Go Date</span></div>
-        <div class="d_div"> <span class="d_btn" @click="clickBtn">Last Seven Days</span></div>
-        <div class="d_div"> <span class="d_btn" @click="clickBtn1">This Month</span></div>
-      </div>
-    </template>
-    <template #day="date">
-      <span>{{ date.date.day }}</span>
-    </template>
-  </nut-calendar>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  date: [],
-  isVisible: false
-});
-const calendarRef = ref(null);
-const getNumTwoBit = function (n) {
-  n = Number(n);
-  return (n > 9 ? '' : '0') + n;
-};
-const date2Str = function (date, split) {
-  split = split || '-';
-  const y = date.getFullYear();
-  const m = getNumTwoBit(date.getMonth() + 1);
-  const d = getNumTwoBit(date.getDate());
-  return [y, m, d].join(split);
-};
-const getDay = function (i) {
-  i = i || 0;
-  let date = new Date();
-  const diff = i * (1000 * 60 * 60 * 24);
-  date = new Date(date.getTime() + diff);
-  return date2Str(date);
-};
-const isLeapYear = function (y) {
-  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
-};
-const getMonthDays = function (year, month) {
-  if (/^0/.test(month)) {
-    month = month.split('')[1];
-  }
-  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
-    month as any
-  ];
-};
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-const clickBtn = () => {
-  let date = [date2Str(new Date()), getDay(6)];
-  state.date = date;
-};
-const clickBtn1 = () => {
-  let date = new Date();
-  let year = date.getFullYear();
-  let month: any = date.getMonth() + 1;
-  month = month < 10 ? '0' + month : month + '';
-  let yearMonth = `${year}-${month}`;
-  let currMonthDays = getMonthDays(year + '', month + '');
-  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-};
-const goDate = () => {
-  if (calendarRef.value) {
-    var date1 = new Date();
-    date1.setDate(date1.getDate() + 30);
-    calendarRef.value.scrollToDate(date2Str(date1));
-  }
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-.wrapper {
-  display: flex;
-  padding: 0 40px;
-  justify-content: center;
-}
-.d_div {
-  margin: 0px 5px;
-}
-.d_btn {
-  background: #fa3f19;
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  display: inline-block;
-}
-</style>
-```
-
-:::
-
-### Custom Date Text
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Custom Date Text"
-    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-12-31`"
-    confirm-text="submit"
-    start-text="Enter"
-    end-text="Leave"
-    title="Select Date"
-  >
-    <template #day="date">
-      <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
-    </template>
-    <template #bottom-info="date">
-      <span class="info">{{ date.date ? (date.date.day == 10 ? '十' : '') : '' }}</span>
-    </template>
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: [],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+### Quick Select Range
 
-:::
-
-### Custom Footer v4.1.6
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :show-icon="true"
-    title="Custom Footer"
-    :desc="state.date ? `${state.date}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    :poppable="true"
-    :is-auto-back-fill="false"
-    @close="closeSwitch('isVisible')"
-    @select="setSelectalue"
-  >
-    <template #footer-info="dateInfo">
-      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)">{{
-        disabled ? 'Even dates cannot be selected' : 'Odd dates can be selected'
-      }}</nut-button>
-    </template>
-  </nut-calendar>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  date: '2023-09-03',
-  isVisible: false,
-  disabled: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setSelectalue = (param) => {
-  state.disabled = param[2] % 2 === 0;
-};
-const clickBtn = (dateInfo) => {
-  state.date = dateInfo.date[3];
-  state.isVisible = false;
-};
-</script>
-```
+> demo: calendar range-quick
 
-:::
-
-### Custom First Day Of Week
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="Custom First Day Of Week"
-    :desc="state.date ? `${state.date}` : 'Please Select Date'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :first-day-of-week="2"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  isVisible: false,
-  date: ''
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+### Custom Button
 
-:::
+> demo: calendar custom
 
 ### Tiled Display
 
-:::demo
-
-```vue
-<template>
-  <div class="test-calendar-wrapper">
-    <nut-calendar
-      :poppable="false"
-      :default-value="state.date"
-      :is-auto-back-fill="true"
-      @choose="setChooseValue"
-      :start-date="`2020-02-01`"
-      :end-date="`2020-12-30`"
-    >
-    </nut-calendar>
-  </div>
-</template>
-<script setup>
-import { reactive, toRefs } from 'vue';
-const state = reactive({
-  date: '2020-07-08'
-});
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.test-calendar-wrapper {
-  display: flex;
-  width: 100%;
-  height: 560px;
-  overflow: hidden;
-}
-</style>
-```
-
-:::
+> demo: calendar tiled
 
 ## API
 
diff --git a/src/packages/__VUE/calendar/doc.md b/src/packages/__VUE/calendar/doc.md
index 3152caadea..0afbf792d3 100644
--- a/src/packages/__VUE/calendar/doc.md
+++ b/src/packages/__VUE/calendar/doc.md
@@ -14,701 +14,47 @@ const app = createApp();
 app.use(Calendar);
 ```
 
-### 基础用法
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择单个日期"
-    :desc="state.date ? `${state.date} ${state.dateWeek}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-11`"
-    :end-date="`2022-11-30`"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  isVisible: false,
-  date: '',
-  dateWeek: ''
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-  state.dateWeek = param[4];
-};
-</script>
-```
+### 选择单个日期
 
-:::
+> demo: calendar single
 
 ### 选择日期区间
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择日期区间"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    :start-date="`2019-12-22`"
-    :end-date="`2021-01-08`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    @select="select"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = [...[param[0][3], param[1][3]]];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
-
-:::
+> demo: calendar range
 
 ### 选择多个日期
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :show-icon="true"
-    title="选择多个日期"
-    :desc="state.date7 && state.date7.length ? `已选择${state.date7.length}个日期` : '请选择'"
-    @click="openSwitch('isVisible7')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible7"
-    :default-value="state.date7"
-    type="multiple"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-09-10`"
-    @close="closeSwitch('isVisible7')"
-    @choose="setChooseValue7"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date7: [],
-  isVisible7: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue7 = (chooseData) => {
-  let dateArr = chooseData.map((item) => {
-    return item[3];
-  });
-  state.date7 = [...dateArr];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-```
-
-:::
+> demo: calendar multiple
 
 ### 选择周
 
-当设置为周选择时，会根据`first-day-of-week` 判断周的起始与结束日期。如`first-day-of-week`为 0 时，一周的起始日期为星期日。其他情况时，一周的起始日期为星期一。
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择周"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="week"
-    :start-date="`2019-12-22`"
-    :end-date="`2021-01-08`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    @select="select"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  let { weekDate } = param;
-  state.date = [weekDate[0].date[3], weekDate[1].date[3]];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+当设置为周选择时，会根据 `first-day-of-week` 判断周的起始与结束日期。如 `first-day-of-week` 为 0 时，一周的起始日期为星期日。其他情况时，一周的起始日期为星期一。
 
-:::
+> demo: calendar week
 
 ### 自定义禁用日期
 
-通过配置`disabled-date`函数回调可实现自定义禁用某些日期为不可选中状态。
-当type类型为`日期区间(range)`时，若是设置了该函数，则需要在选中结果后，自行过滤掉禁用的日期
-
-:::demo
-
-```html
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义禁用日期"
-    :desc="date ? `${date}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-11-30`"
-    :disabled-date="disabledDate"
-  >
-  </nut-calendar>
-</template>
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      const disabledDate = (date) => {
-        const disabledDate = {
-          '2022-01-05': true,
-          '2022-01-06': true,
-          '2022-01-10': true,
-          '2022-01-11': true,
-          '2022-01-12': true,
-          '2022-01-13': true,
-          '2022-01-14': true
-        };
-        return disabledDate[date];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        disabledDate
-      };
-    }
-  };
-</script>
-```
+通过配置 `disabled-date` 函数回调可实现自定义禁用某些日期为不可选中状态。
 
-:::
-
-### 快捷选择-单选
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择单个日期"
-    :desc="state.date ? state.date : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :default-value="state.date"
-    :is-auto-back-fill="true"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: '',
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-```
+当 `type` 为 `range` 时，若是设置了该函数，则需要在选中结果后，自行过滤掉禁用的日期
 
-:::
-
-### 快捷选择-范围选择
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择日期范围"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-12-31`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :is-auto-back-fill="true"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2021-12-23', '2021-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = [...[param[0][3], param[1][3]]];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar disabled
 
-:::
-
-### 自定义日历按钮
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义按钮"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    ref="calendarRef"
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-  >
-    <template #btn>
-      <div class="wrapper">
-        <div class="d_div">
-          <span class="d_btn" @click="goDate">去某个时间</span>
-        </div>
-        <div class="d_div">
-          <span class="d_btn" @click="clickBtn">最近七天</span>
-        </div>
-        <div class="d_div">
-          <span class="d_btn" @click="clickBtn1">当月</span>
-        </div>
-      </div>
-    </template>
-    <template #day="date">
-      <span>{{ date.date.day }}</span>
-    </template>
-  </nut-calendar>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  date: [],
-  isVisible: false
-});
-const calendarRef = ref(null);
-const getNumTwoBit = function (n) {
-  n = Number(n);
-  return (n > 9 ? '' : '0') + n;
-};
-const date2Str = function (date, split) {
-  split = split || '-';
-  const y = date.getFullYear();
-  const m = getNumTwoBit(date.getMonth() + 1);
-  const d = getNumTwoBit(date.getDate());
-  return [y, m, d].join(split);
-};
-const getDay = function (i) {
-  i = i || 0;
-  let date = new Date();
-  const diff = i * (1000 * 60 * 60 * 24);
-  date = new Date(date.getTime() + diff);
-  return date2Str(date);
-};
-const isLeapYear = function (y) {
-  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
-};
-const getMonthDays = function (year, month) {
-  if (/^0/.test(month)) {
-    month = month.split('')[1];
-  }
-  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
-    month as any
-  ];
-};
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-const clickBtn = () => {
-  let date = [date2Str(new Date()), getDay(6)];
-  state.date = date;
-};
-const clickBtn1 = () => {
-  let date = new Date();
-  let year = date.getFullYear();
-  let month: any = date.getMonth() + 1;
-  month = month < 10 ? '0' + month : month + '';
-  let yearMonth = `${year}-${month}`;
-  let currMonthDays = getMonthDays(year + '', month + '');
-  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-};
-const goDate = () => {
-  if (calendarRef.value) {
-    var date1 = new Date();
-    date1.setDate(date1.getDate() + 30);
-    calendarRef.value.scrollToDate(date2Str(date1));
-  }
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-.wrapper {
-  display: flex;
-  padding: 0 40px;
-  justify-content: center;
-}
-.d_div {
-  margin: 0px 5px;
-}
-.d_btn {
-  background: #fa3f19;
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  display: inline-block;
-}
-</style>
-```
+### 快捷选择-单个日期
 
-:::
-
-### 自定义时间文案
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义时间文案"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-12-31`"
-    confirm-text="提交"
-    start-text="入店"
-    end-text="离店"
-    title="日期选择"
-  >
-    <template #day="date">
-      <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
-    </template>
-    <template #bottom-info="date">
-      <span class="info">{{ date.date ? (date.date.day == 10 ? '十' : '') : '' }}</span>
-    </template>
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: [],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar single-quick
 
-:::
-
-### 自定义底部区域 v4.1.6
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :show-icon="true"
-    title="自定义底部区域"
-    :desc="state.date ? `${state.date}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    :poppable="true"
-    :is-auto-back-fill="false"
-    @close="closeSwitch('isVisible')"
-    @select="setSelectalue"
-  >
-    <template #footer-info="dateInfo">
-      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)">{{
-        disabled ? '偶数的日期不能选择' : '奇数的日期可以选择'
-      }}</nut-button>
-    </template>
-  </nut-calendar>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  date: '2023-09-03',
-  isVisible: false,
-  disabled: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setSelectalue = (param) => {
-  state.disabled = param[2] % 2 === 0;
-};
-const clickBtn = (dateInfo) => {
-  state.date = dateInfo.date[3];
-  state.isVisible = false;
-};
-</script>
-```
+### 快捷选择-日期范围
 
-:::
-
-### 自定义周起始日
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义周起始日"
-    :desc="state.date ? `${state.date}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :first-day-of-week="2"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  isVisible: false,
-  date: ''
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar range-quick
 
-:::
+### 自定义日历
 
-### 平铺展示
+> demo: calendar custom
 
-:::demo
-
-```vue
-<template>
-  <div class="test-calendar-wrapper">
-    <nut-calendar
-      :poppable="false"
-      :default-value="state.date"
-      :is-auto-back-fill="true"
-      @choose="setChooseValue"
-      :start-date="`2020-02-01`"
-      :end-date="`2020-12-30`"
-    >
-    </nut-calendar>
-  </div>
-</template>
-<script setup>
-import { reactive, toRefs } from 'vue';
-const state = reactive({
-  date: '2020-07-08'
-});
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.test-calendar-wrapper {
-  display: flex;
-  width: 100%;
-  height: 560px;
-  overflow: hidden;
-}
-</style>
-```
+### 平铺展示
 
-:::
+> demo: calendar tiled
 
 ## API
 
diff --git a/src/packages/__VUE/calendar/doc.taro.md b/src/packages/__VUE/calendar/doc.taro.md
index 84ca43bad3..2ba602679c 100644
--- a/src/packages/__VUE/calendar/doc.taro.md
+++ b/src/packages/__VUE/calendar/doc.taro.md
@@ -14,701 +14,47 @@ const app = createApp();
 app.use(Calendar);
 ```
 
-### 基础用法
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择单个日期"
-    :desc="state.date ? `${state.date} ${state.dateWeek}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-11`"
-    :end-date="`2022-11-30`"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  isVisible: false,
-  date: '',
-  dateWeek: ''
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-  state.dateWeek = param[4];
-};
-</script>
-```
+### 选择单个日期
 
-:::
+> demo: calendar single dentry
 
 ### 选择日期区间
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择日期区间"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    :start-date="`2019-12-22`"
-    :end-date="`2021-01-08`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    @select="select"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = [...[param[0][3], param[1][3]]];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
-
-:::
+> demo: calendar range dentry
 
 ### 选择多个日期
 
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :show-icon="true"
-    title="选择多个日期"
-    :desc="state.date7 && state.date7.length ? `已选择${state.date7.length}个日期` : '请选择'"
-    @click="openSwitch('isVisible7')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible7"
-    :default-value="state.date7"
-    type="multiple"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-09-10`"
-    @close="closeSwitch('isVisible7')"
-    @choose="setChooseValue7"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date7: [],
-  isVisible7: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue7 = (chooseData) => {
-  let dateArr = chooseData.map((item) => {
-    return item[3];
-  });
-  state.date7 = [...dateArr];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-```
-
-:::
+> demo: calendar multiple dentry
 
 ### 选择周
 
-当设置为周选择时，会根据`first-day-of-week` 判断周的起始与结束日期。如`first-day-of-week`为 0 时，一周的起始日期为星期日。其他情况时，一周的起始日期为星期一。
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择周"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="week"
-    :start-date="`2019-12-22`"
-    :end-date="`2021-01-08`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    @select="select"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  let { weekDate } = param;
-  state.date = [weekDate[0].date[3], weekDate[1].date[3]];
-};
-const select = (param) => {
-  console.log(param);
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+当设置为周选择时，会根据 `first-day-of-week` 判断周的起始与结束日期。如 `first-day-of-week` 为 0 时，一周的起始日期为星期日。其他情况时，一周的起始日期为星期一。
 
-:::
+> demo: calendar week dentry
 
 ### 自定义禁用日期
 
-通过配置`disabled-date`函数回调可实现自定义禁用某些日期为不可选中状态。
-当type类型为`日期区间(range)`时，若是设置了该函数，则需要在选中结果后，自行过滤掉禁用的日期
-
-:::demo
-
-```html
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义禁用日期"
-    :desc="date ? `${date}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-11-30`"
-    :disabled-date="disabledDate"
-  >
-  </nut-calendar>
-</template>
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      const disabledDate = (date) => {
-        const disabledDate = {
-          '2022-01-05': true,
-          '2022-01-06': true,
-          '2022-01-10': true,
-          '2022-01-11': true,
-          '2022-01-12': true,
-          '2022-01-13': true,
-          '2022-01-14': true
-        };
-        return disabledDate[date];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        disabledDate
-      };
-    }
-  };
-</script>
-```
+通过配置 `disabled-date` 函数回调可实现自定义禁用某些日期为不可选中状态。
 
-:::
-
-### 快捷选择-单选
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择单个日期"
-    :desc="state.date ? state.date : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :default-value="state.date"
-    :is-auto-back-fill="true"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: '',
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-```
+当 `type` 为 `range` 时，若是设置了该函数，则需要在选中结果后，自行过滤掉禁用的日期
 
-:::
-
-### 快捷选择-范围选择
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="选择日期范围"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-12-31`"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :is-auto-back-fill="true"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: ['2021-12-23', '2021-12-26'],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = [...[param[0][3], param[1][3]]];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar disabled dentry
 
-:::
-
-### 自定义日历按钮
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义按钮"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    ref="calendarRef"
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-  >
-    <template #btn>
-      <div class="wrapper">
-        <div class="d_div">
-          <span class="d_btn" @click="goDate">去某个时间</span>
-        </div>
-        <div class="d_div">
-          <span class="d_btn" @click="clickBtn">最近七天</span>
-        </div>
-        <div class="d_div">
-          <span class="d_btn" @click="clickBtn1">当月</span>
-        </div>
-      </div>
-    </template>
-    <template #day="date">
-      <span>{{ date.date.day }}</span>
-    </template>
-  </nut-calendar>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  date: [],
-  isVisible: false
-});
-const calendarRef = ref(null);
-const getNumTwoBit = function (n) {
-  n = Number(n);
-  return (n > 9 ? '' : '0') + n;
-};
-const date2Str = function (date, split) {
-  split = split || '-';
-  const y = date.getFullYear();
-  const m = getNumTwoBit(date.getMonth() + 1);
-  const d = getNumTwoBit(date.getDate());
-  return [y, m, d].join(split);
-};
-const getDay = function (i) {
-  i = i || 0;
-  let date = new Date();
-  const diff = i * (1000 * 60 * 60 * 24);
-  date = new Date(date.getTime() + diff);
-  return date2Str(date);
-};
-const isLeapYear = function (y) {
-  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
-};
-const getMonthDays = function (year, month) {
-  if (/^0/.test(month)) {
-    month = month.split('')[1];
-  }
-  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
-    month as any
-  ];
-};
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-const clickBtn = () => {
-  let date = [date2Str(new Date()), getDay(6)];
-  state.date = date;
-};
-const clickBtn1 = () => {
-  let date = new Date();
-  let year = date.getFullYear();
-  let month: any = date.getMonth() + 1;
-  month = month < 10 ? '0' + month : month + '';
-  let yearMonth = `${year}-${month}`;
-  let currMonthDays = getMonthDays(year + '', month + '');
-  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-};
-const goDate = () => {
-  if (calendarRef.value) {
-    var date1 = new Date();
-    date1.setDate(date1.getDate() + 30);
-    calendarRef.value.scrollToDate(date2Str(date1));
-  }
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-.wrapper {
-  display: flex;
-  padding: 0 40px;
-  justify-content: center;
-}
-.d_div {
-  margin: 0px 5px;
-}
-.d_btn {
-  background: #fa3f19;
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  display: inline-block;
-}
-</style>
-```
+### 快捷选择-单个日期
 
-:::
-
-### 自定义时间文案
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义时间文案"
-    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    type="range"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :start-date="`2022-01-01`"
-    :end-date="`2022-12-31`"
-    confirm-text="提交"
-    start-text="入店"
-    end-text="离店"
-    title="日期选择"
-  >
-    <template #day="date">
-      <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
-    </template>
-    <template #bottom-info="date">
-      <span class="info">{{ date.date ? (date.date.day == 10 ? '十' : '') : '' }}</span>
-    </template>
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  date: [],
-  isVisible: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar single-quick dentry
 
-:::
-
-### 自定义底部区域 v4.1.6
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :show-icon="true"
-    title="自定义底部区域"
-    :desc="state.date ? `${state.date}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    :poppable="true"
-    :is-auto-back-fill="false"
-    @close="closeSwitch('isVisible')"
-    @select="setSelectalue"
-  >
-    <template #footer-info="dateInfo">
-      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)">{{
-        disabled ? '偶数的日期不能选择' : '奇数的日期可以选择'
-      }}</nut-button>
-    </template>
-  </nut-calendar>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  date: '2023-09-03',
-  isVisible: false,
-  disabled: false
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setSelectalue = (param) => {
-  state.disabled = param[2] % 2 === 0;
-};
-const clickBtn = (dateInfo) => {
-  state.date = dateInfo.date[3];
-  state.isVisible = false;
-};
-</script>
-```
+### 快捷选择-日期范围
 
-:::
-
-### 自定义周起始日
-
-:::demo
-
-```vue
-<template>
-  <nut-cell
-    :showIcon="true"
-    title="自定义周起始日"
-    :desc="state.date ? `${state.date}` : '请选择'"
-    @click="openSwitch('isVisible')"
-  >
-  </nut-cell>
-  <nut-calendar
-    v-model:visible="state.isVisible"
-    :default-value="state.date"
-    @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :first-day-of-week="2"
-  >
-  </nut-calendar>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  isVisible: false,
-  date: ''
-});
-const openSwitch = (param) => {
-  state[`${param}`] = true;
-};
-const closeSwitch = (param) => {
-  state[`${param}`] = false;
-};
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.nut-cell__value {
-  flex: initial;
-}
-</style>
-```
+> demo: calendar range-quick dentry
 
-:::
+### 自定义日历
 
-### 平铺展示
+> demo: calendar custom dentry
 
-:::demo
-
-```vue
-<template>
-  <div class="test-calendar-wrapper">
-    <nut-calendar
-      :poppable="false"
-      :default-value="state.date"
-      :is-auto-back-fill="true"
-      @choose="setChooseValue"
-      :start-date="`2020-02-01`"
-      :end-date="`2020-12-30`"
-    >
-    </nut-calendar>
-  </div>
-</template>
-<script setup>
-import { reactive, toRefs } from 'vue';
-const state = reactive({
-  date: '2020-07-08'
-});
-const setChooseValue = (param) => {
-  state.date = param[3];
-};
-</script>
-<style>
-.test-calendar-wrapper {
-  display: flex;
-  width: 100%;
-  height: 560px;
-  overflow: hidden;
-}
-</style>
-```
+### 平铺展示
 
-:::
+> demo: calendar tiled dentry
 
 ## API