From e6eb8cac3af7a04faf17e05ff77fb3ad52fbcead Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 21 Sep 2022 21:24:38 +0800
Subject: [PATCH 1/8] feat(calendar): upgrade style

---
 src/calendar/calendar.vue   | 365 +++++++++++++++---------------------
 src/calendar/demos/base.vue |   2 +-
 src/calendar/props.ts       |  16 +-
 src/calendar/type.ts        |   6 +-
 4 files changed, 168 insertions(+), 221 deletions(-)

diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
index c8e139c1e..394b3419e 100644
--- a/src/calendar/calendar.vue
+++ b/src/calendar/calendar.vue
@@ -1,55 +1,40 @@
 <template>
   <div>
-    <t-popup v-model="flag" placement="bottom">
-      <div class="t-calendar">
-        <div v-if="$slots.head" class="t-calendar__title">
-          <slot name="head"></slot>
+    <t-popup v-model="popup" placement="bottom">
+      <div :class="name">
+        <div v-if="$slots.title || title" :class="`${name}__title`">
+          <slot name="title">{{ title }}</slot>
         </div>
-        <div class="t-calendar__text">
-          <div class="t-calendar__text--year" @click="preYear">
-            <chevron-left-icon size="10" />
-            <chevron-left-icon size="10" style="position: relative; right: 6px" />
-          </div>
-          <div class="t-calendar__text--month" @click="preMonth">
-            <chevron-left-icon size="10" />
-          </div>
-          <div class="t-calendar__text--current">{{ time.year }}年{{ time.month + 1 }}月</div>
-          <div class="t-calendar__text--month" @click="nextMonth">
-            <chevron-right-icon size="10" />
-          </div>
-          <div class="t-calendar__text--year" @click="nextYear">
-            <chevron-right-icon size="10" />
-            <chevron-right-icon size="10" style="position: relative; left: -6px" />
-          </div>
+        <CloseIcon :class="`${name}__close-btn`" size="24" @click="popup = false" />
+        <div :class="`${name}__days`">
+          <div v-for="(item, index) in days" :key="index" :class="`${name}__days-item`">{{ item }}</div>
         </div>
-        <div class="t-calendar__days">
-          <div v-for="(item, index) in days" :key="index" class="t-calendar__days--item">{{ item }}</div>
-        </div>
-        <div class="t-calendar__content">
-          <div v-for="i in 6" :key="i" class="t-calendar__content--item">
-            <div v-for="j in 7" :key="j" class="t-calendar__content--item--text">
-              <div
-                v-if="showDays[(i - 1) * 7 + (j - 1)]"
-                :key="j"
-                class="t-calendar__content--item--text--value"
-                :class="{
-                  't-calendar__content--item--text--nocurrent': !isCurrentMonth(showDays[(i - 1) * 7 + (j - 1)]),
-                  't-calendar__content--item--text--today': isToday(showDays[(i - 1) * 7 + (j - 1)]),
-                }"
-                :style="{
-                  background: isToday(showDays[(i - 1) * 7 + (j - 1)]) ? bgColor : '#fff',
-                  color: isToday(showDays[(i - 1) * 7 + (j - 1)]) ? '#fff' : '#303133',
-                }"
-                @click="chooseDay(showDays[(i - 1) * 7 + (j - 1)])"
-              >
-                <slot name="cell" :item="showDays[(i - 1) * 7 + (j - 1)].getDate()">
-                  <div>{{ showDays[(i - 1) * 7 + (j - 1)].getDate() }}</div>
-                </slot>
-              </div>
+        <div :class="`${name}__months`">
+          <template v-for="(item, index) in months" :key="index">
+            <div :class="`${name}__month`">{{ item.year }} 年 {{ item.month + 1 }} 月</div>
+            <div :class="`${name}__dates`">
+              <template v-for="i in 31" :key="i">
+                <div
+                  v-if="i <= item.lastDate"
+                  :class="{
+                    [`${name}__dates-item`]: true,
+                    [`${name}__dates-item--active`]:
+                      activeDate.year === item.year && activeDate.month === item.month && activeDate.day === i,
+                  }"
+                  :style="{
+                    marginLeft: i === 1 ? `${49 * item.weekdayOfFirstDay}px` : 0,
+                  }"
+                  @click="handleSelect(item.year, item.month, i)"
+                >
+                  <slot name="cell" :item="{}">
+                    <div>{{ i }}</div>
+                  </slot>
+                </div>
+              </template>
             </div>
-          </div>
+          </template>
         </div>
-        <div class="t-calendar__btn" @click="confirm">
+        <div class="t-calendar__footer" @click="confirm">
           <t-button block :style="{ background: bgColor, color: '#fff' }">{{ confirmBtn }}</t-button>
         </div>
       </div>
@@ -58,183 +43,133 @@
 </template>
 
 <script lang="ts">
-import { computed, toRefs, defineComponent, watch, ref, onMounted } from 'vue';
-import { ChevronRightIcon, ChevronLeftIcon } from 'tdesign-icons-vue-next';
-import props from './props';
+import { defineEmits, defineProps, computed, watch, ref, onMounted } from 'vue';
+import { CloseIcon } from 'tdesign-icons-vue-next';
+
 import config from '../config';
+import calendarProps from './props';
 import type { CalendarCell, CalendarValue } from './type';
 
 const { prefix } = config;
 const name = `${prefix}-calendar`;
 
-export default defineComponent({
+export default {
   name,
-  components: {
-    ChevronRightIcon,
-    ChevronLeftIcon,
+};
+</script>
+
+<script setup lang="ts">
+const props = defineProps(calendarProps);
+const emit = defineEmits(['select', 'confirm', 'update:modelValue']);
+
+// 获取时间年月日起
+const getYearMonthDay = (date: Date) => {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  return {
+    year,
+    month,
+    day,
+  };
+};
+
+const popup = ref<boolean>(props.modelValue);
+const value = ref<Date>(props.value as Date);
+const days = ref<string[]>(['日', '一', '二', '三', '四', '五', '六']);
+const today = new Date();
+const minDate = props.minDate ? new Date(props.minDate) : today;
+const maxDate = new Date(props.maxDate ?? today.getFullYear(), today.getMonth() + 6, today.getDate());
+
+const activeDate = computed(() => getYearMonthDay(value.value));
+
+// 选择的时间
+const time = ref<CalendarCell>({
+  year: getYearMonthDay(new Date()).year,
+  month: getYearMonthDay(new Date()).month,
+  day: getYearMonthDay(new Date()).day,
+});
+const dateValue = ref<CalendarValue>();
+
+// 获取日期
+const getDate = (year: number, month: number, day: number) => new Date(year, month, day);
+
+// 判断是否是今天
+const isToday = (date: Date) => {
+  const { year, month, day } = getYearMonthDay(value.value);
+  const { year: y, month: m, day: d } = getYearMonthDay(date);
+  return year === y && month === m && day === d;
+};
+
+// 选择日期
+const handleSelect = (year: number, month: number, date: number) => {
+  const selected = new Date(year, month, date);
+  props.onSelect?.(selected);
+  value.value = selected;
+};
+// 确认
+const confirm = () => {
+  popup.value = false;
+  emit('confirm', dateValue.value);
+};
+// 格式化时间
+const formatDate = computed(() => {
+  const { year, month, day } = getYearMonthDay(value.value);
+  return `${year}-${month + 1}-${day}`;
+});
+const getMonthDates = (date: Date) => {
+  const { year, month } = getYearMonthDay(date);
+  const firstDay = getDate(year, month, 1);
+  const weekdayOfFirstDay = firstDay.getDay();
+  const lastDate = new Date(+getDate(year, month + 1, 1) - 24 * 3600).getDate();
+
+  return {
+    year,
+    month,
+    weekdayOfFirstDay,
+    lastDate,
+  };
+};
+const months = computed(() => {
+  const ans = [];
+  let { year: minYear, month: minMonth } = getYearMonthDay(minDate);
+  const { year: maxYear, month: maxMonth } = getYearMonthDay(maxDate);
+
+  while (minYear < maxYear || (minYear === maxYear && minMonth < maxMonth)) {
+    ans.push(getMonthDates(getDate(minYear, minMonth, 1)));
+    const curDate = getYearMonthDay(getDate(minYear, minMonth + 1, 1));
+    minYear = curDate.year;
+    minMonth = curDate.month;
+  }
+
+  return ans;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    popup.value = val;
   },
-  props,
-  emits: ['cell-click', 'confirm', 'update:modelValue'],
-  setup(props, { emit }) {
-    // 获取时间年月日起
-    const getYearMonthDay = (date: Date) => {
-      const year = date.getFullYear();
-      const month = date.getMonth();
-      const day = date.getDate();
-      return {
-        year,
-        month,
-        day,
-      };
-    };
-    // 显示弹框
-    const flag = ref<boolean>(props.modelValue);
-    // 当前选中日期 默认今天
-    const value = ref<Date>(props.value as Date);
-    // 当前日期
-    const days = ref<string[]>(['日', '一', '二', '三', '四', '五', '六']);
-
-    // 选择的时间
-    const time = ref<CalendarCell>({
-      year: getYearMonthDay(new Date()).year,
-      month: getYearMonthDay(new Date()).month,
-      day: getYearMonthDay(new Date()).day,
-    });
-    const dateValue = ref<CalendarValue>();
-
-    // 获取日期
-    const getDate = (year: number, month: number, day: number) => {
-      return new Date(year, month, day);
-    };
-    // 判断是否是当前月份
-    const isCurrentMonth = (date: Date) => {
-      const { year, month } = getYearMonthDay(date);
-      const { year: y, month: m } = getYearMonthDay(getDate(time.value.year, time.value.month, 1));
-      return year === y && month === m;
-    };
-    // 判断是否是今天
-    const isToday = (date: Date) => {
-      const { year, month, day } = getYearMonthDay(value.value);
-      const { year: y, month: m, day: d } = getYearMonthDay(date);
-      return year === y && month === m && day === d;
-    };
-    // 上一年
-    const preYear = () => {
-      time.value.year--;
-    };
-    // 下一年
-    const nextYear = () => {
-      time.value.year++;
-    };
-    // 上一月
-    const preMonth = () => {
-      const d = getDate(time.value.year, time.value.month, 1);
-      d.setMonth(d.getMonth() - 1);
-      time.value = getYearMonthDay(d);
-    };
-    // 下一月
-    const nextMonth = () => {
-      const d = getDate(time.value.year, time.value.month, 1);
-      d.setMonth(d.getMonth() + 1);
-      time.value = getYearMonthDay(d);
-    };
-    // 选择日期
-    const chooseDay = (item: Date) => {
-      value.value = item;
-      const { year, month, day } = getYearMonthDay(item);
-      emit('cell-click', {
-        year,
-        month: month + 1,
-        day,
-      });
-      const isToday = !!(
-        year === new Date().getFullYear() &&
-        month === new Date().getMonth() &&
-        day === new Date().getDate()
-      );
-      dateValue.value = {
-        year,
-        month: month + 1,
-        day,
-        week: item.getDay(),
-        date: `${year}-${month + 1}-${day}`,
-        isToday,
-      };
-    };
-    // 确认
-    const confirm = () => {
-      flag.value = false;
-      emit('confirm', dateValue.value);
-    };
-    // 格式化时间
-    const formatDate = computed(() => {
-      const { year, month, day } = getYearMonthDay(value.value);
-      return `${year}-${month + 1}-${day}`;
-    });
-    const showDays = computed(() => {
-      const { year, month, day } = getYearMonthDay(getDate(time.value.year, time.value.month, 1));
-      // 获取当月第一天
-      const firstDay = getDate(year, month, 1);
-      // 获取当月第一天是星期几
-      const week = firstDay.getDay();
-      // 开始日期
-      const dis = week * 1000 * 60 * 60 * 24;
-      const startDay = (firstDay as any) - dis;
-      const arr = [];
-      // 循环42天 因为日历是6 * 7的布局
-      for (let i = 0; i < 42; i++) {
-        arr.push(new Date(startDay + i * 1000 * 60 * 60 * 24));
-      }
-      return arr;
-    });
-    watch(
-      () => props.modelValue,
-      (val) => {
-        flag.value = val;
-      },
-    );
-    watch(
-      () => flag.value,
-      (val) => {
-        emit('update:modelValue', val);
-      },
-    );
-    onMounted(() => {
-      time.value.year = getYearMonthDay(value.value).year;
-      time.value.month = getYearMonthDay(value.value).month;
-      dateValue.value = {
-        year: getYearMonthDay(value.value).year,
-        month: getYearMonthDay(value.value).month + 1,
-        day: value.value.getDate(),
-        week: value.value.getDay(),
-        date: `${getYearMonthDay(value.value).year}-${
-          Number(getYearMonthDay(value.value).month) + 1
-        }-${value.value.getDate()}`,
-        isToday: isToday(value.value),
-      };
-    });
-    return {
-      name,
-      ...toRefs(props),
-      getYearMonthDay,
-      flag,
-      value,
-      days,
-      time,
-      dateValue,
-      close,
-      getDate,
-      isCurrentMonth,
-      isToday,
-      preYear,
-      nextYear,
-      preMonth,
-      nextMonth,
-      chooseDay,
-      confirm,
-      formatDate,
-      showDays,
-    };
+);
+watch(
+  () => popup.value,
+  (val) => {
+    emit('update:modelValue', val);
   },
+);
+
+onMounted(() => {
+  time.value.year = getYearMonthDay(value.value).year;
+  time.value.month = getYearMonthDay(value.value).month;
+  dateValue.value = {
+    year: getYearMonthDay(value.value).year,
+    month: getYearMonthDay(value.value).month + 1,
+    day: value.value.getDate(),
+    week: value.value.getDay(),
+    date: `${getYearMonthDay(value.value).year}-${
+      Number(getYearMonthDay(value.value).month) + 1
+    }-${value.value.getDate()}`,
+    isToday: isToday(value.value),
+  };
 });
 </script>
diff --git a/src/calendar/demos/base.vue b/src/calendar/demos/base.vue
index d5da19b6f..ff4428781 100644
--- a/src/calendar/demos/base.vue
+++ b/src/calendar/demos/base.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-calendar v-model="visible" @confirm="handleConfirm" @cell-click="cellClick"></t-calendar>
+    <t-calendar v-model="visible" title="请选择日期" @confirm="handleConfirm" @cell-click="cellClick"></t-calendar>
     <t-cell title="选择日期" note="请选择日期" arrow @click="visible = true"></t-cell>
   </div>
 </template>
diff --git a/src/calendar/props.ts b/src/calendar/props.ts
index 760cf3aa7..750b7fa7e 100644
--- a/src/calendar/props.ts
+++ b/src/calendar/props.ts
@@ -6,6 +6,7 @@
 
 import { TdCalendarProps } from './type';
 import { PropType } from 'vue';
+import { timestamp } from '@vueuse/core';
 
 export default {
   /**
@@ -35,14 +36,25 @@ export default {
   /**
    * 头部插槽（左上角处，默认不显示任何内容）
    */
-  head: {
+  title: {
     type: String,
   },
   /**
    * 当前高亮的日期
    */
   value: {
-    type:  Date as unknown as PropType<TdCalendarProps['value']>,
+    type: Date as unknown as PropType<TdCalendarProps['value']>,
     default: new Date(),
   },
+  minDate: {
+    type: Number,
+    default: null,
+  },
+  maxDate: {
+    type: Number,
+    default: null,
+  },
+  onSelect: {
+    type: Function,
+  },
 };
diff --git a/src/calendar/type.ts b/src/calendar/type.ts
index ccc9b0c05..7faae2678 100644
--- a/src/calendar/type.ts
+++ b/src/calendar/type.ts
@@ -24,7 +24,7 @@ export interface TdCalendarProps {
   /**
    * 头部插槽（左上角处，默认不显示任何内容）
    */
-  head?: string;
+  title?: string;
   /**
    * 当前高亮的日期
    */
@@ -40,7 +40,7 @@ export type CalendarCell = {
   year: number;
   month: number;
   day: number;
-}
+};
 
 export type CalendarValue = {
   year: number;
@@ -49,4 +49,4 @@ export type CalendarValue = {
   week: number;
   date: string;
   isToday: boolean;
-};
\ No newline at end of file
+};

From d6c2e2dc29644f2f1d80a3ded9afb0dd9446426f Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 22 Sep 2022 19:31:39 +0800
Subject: [PATCH 2/8] feat(calendar): support range

---
 src/calendar/calendar.vue          | 146 +++++++++++++++++------------
 src/calendar/demos/base.vue        |   6 +-
 src/calendar/demos/custom-text.vue |  47 ++++++++++
 src/calendar/demos/mobile.vue      |  14 +--
 src/calendar/demos/range.vue       |  18 ++++
 src/calendar/props.ts              |  12 ++-
 6 files changed, 170 insertions(+), 73 deletions(-)
 create mode 100644 src/calendar/demos/custom-text.vue
 create mode 100644 src/calendar/demos/range.vue

diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
index 394b3419e..a953bcdb3 100644
--- a/src/calendar/calendar.vue
+++ b/src/calendar/calendar.vue
@@ -2,8 +2,8 @@
   <div>
     <t-popup v-model="popup" placement="bottom">
       <div :class="name">
-        <div v-if="$slots.title || title" :class="`${name}__title`">
-          <slot name="title">{{ title }}</slot>
+        <div :class="`${name}__title`">
+          <slot name="title">{{ title || '请选择日期' }}</slot>
         </div>
         <CloseIcon :class="`${name}__close-btn`" size="24" @click="popup = false" />
         <div :class="`${name}__days`">
@@ -13,21 +13,30 @@
           <template v-for="(item, index) in months" :key="index">
             <div :class="`${name}__month`">{{ item.year }} 年 {{ item.month + 1 }} 月</div>
             <div :class="`${name}__dates`">
-              <template v-for="i in 31" :key="i">
+              <template v-for="(dateItem, dateIndex) in item.months" :key="dateIndex">
                 <div
-                  v-if="i <= item.lastDate"
                   :class="{
                     [`${name}__dates-item`]: true,
-                    [`${name}__dates-item--active`]:
-                      activeDate.year === item.year && activeDate.month === item.month && activeDate.day === i,
+                    [`${name}__dates-item--${dateItem.type}`]: !!dateItem.type,
+                    [`${dateItem.classname ?? ''}`]: true,
                   }"
                   :style="{
-                    marginLeft: i === 1 ? `${49 * item.weekdayOfFirstDay}px` : 0,
+                    marginLeft: dateIndex === 0 ? `${49 * item.weekdayOfFirstDay}px` : 0,
                   }"
-                  @click="handleSelect(item.year, item.month, i)"
+                  @click="handleSelect(item.year, item.month, dateItem.day, dateItem)"
                 >
-                  <slot name="cell" :item="{}">
-                    <div>{{ i }}</div>
+                  <slot name="cell" :item="dateItem">
+                    <div v-if="dateItem.prefix" :class="`${name}__dates-item-prefix`">{{ dateItem.prefix }}</div>
+                    {{ dateItem.day }}
+                    <div
+                      v-if="dateItem.suffix"
+                      :class="{
+                        [`${name}__dates-item-suffix`]: true,
+                        [`${name}__dates-item-suffix--${dateItem.type}`]: !!dateItem.type,
+                      }"
+                    >
+                      {{ dateItem.suffix }}
+                    </div>
                   </slot>
                 </div>
               </template>
@@ -64,59 +73,44 @@ const emit = defineEmits(['select', 'confirm', 'update:modelValue']);
 
 // 获取时间年月日起
 const getYearMonthDay = (date: Date) => {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
   return {
-    year,
-    month,
-    day,
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    date: date.getDate(),
   };
 };
 
-const popup = ref<boolean>(props.modelValue);
-const value = ref<Date>(props.value as Date);
+const popup = ref<boolean>(props.visible);
+const selectedDate = computed(() => {
+  if (Array.isArray(props.value)) {
+    return props.value.map((item) => new Date(item));
+  }
+  return props.value ? new Date(props.value) : new Date();
+});
+const type = computed(() => props.type);
 const days = ref<string[]>(['日', '一', '二', '三', '四', '五', '六']);
 const today = new Date();
 const minDate = props.minDate ? new Date(props.minDate) : today;
-const maxDate = new Date(props.maxDate ?? today.getFullYear(), today.getMonth() + 6, today.getDate());
+const maxDate = props.maxDate
+  ? new Date(props.maxDate)
+  : new Date(today.getFullYear(), today.getMonth() + 6, today.getDate());
 
-const activeDate = computed(() => getYearMonthDay(value.value));
-
-// 选择的时间
-const time = ref<CalendarCell>({
-  year: getYearMonthDay(new Date()).year,
-  month: getYearMonthDay(new Date()).month,
-  day: getYearMonthDay(new Date()).day,
-});
 const dateValue = ref<CalendarValue>();
 
 // 获取日期
 const getDate = (year: number, month: number, day: number) => new Date(year, month, day);
 
-// 判断是否是今天
-const isToday = (date: Date) => {
-  const { year, month, day } = getYearMonthDay(value.value);
-  const { year: y, month: m, day: d } = getYearMonthDay(date);
-  return year === y && month === m && day === d;
-};
-
 // 选择日期
-const handleSelect = (year: number, month: number, date: number) => {
+const handleSelect = (year: number, month: number, date: number, dateItem) => {
+  if (dateItem.type === 'disabled') return;
   const selected = new Date(year, month, date);
-  props.onSelect?.(selected);
-  value.value = selected;
+  props.onSelect?.({ value: selected });
 };
 // 确认
 const confirm = () => {
   popup.value = false;
   emit('confirm', dateValue.value);
 };
-// 格式化时间
-const formatDate = computed(() => {
-  const { year, month, day } = getYearMonthDay(value.value);
-  return `${year}-${month + 1}-${day}`;
-});
 const getMonthDates = (date: Date) => {
   const { year, month } = getYearMonthDay(date);
   const firstDay = getDate(year, month, 1);
@@ -130,13 +124,58 @@ const getMonthDates = (date: Date) => {
     lastDate,
   };
 };
+const isSameDate = (date1, date2) => {
+  if (date1 instanceof Date) date1 = getYearMonthDay(date1);
+  if (date2 instanceof Date) date2 = getYearMonthDay(date2);
+  const keys = ['year', 'month', 'date'];
+  return keys.every((key) => date1[key] === date2[key]);
+};
+
 const months = computed(() => {
   const ans = [];
   let { year: minYear, month: minMonth } = getYearMonthDay(minDate);
   const { year: maxYear, month: maxMonth } = getYearMonthDay(maxDate);
+  const calcType = (year: number, month: number, date: number) => {
+    const curDate = new Date(year, month, date, 23, 59, 59);
+
+    if (type.value === 'single') {
+      if (isSameDate({ year, month, date }, selectedDate.value)) return 'selected';
+    }
+    if (type.value === 'range') {
+      if (Array.isArray(selectedDate.value)) {
+        const [startDate, endDate] = selectedDate.value;
+
+        if (startDate && isSameDate({ year, month, date }, startDate)) return 'start';
+        if (endDate && isSameDate({ year, month, date }, endDate)) return 'end';
+        if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime())
+          return 'centre';
+      }
+    }
+
+    if (curDate.getTime() < minDate.getTime() || curDate.getTime() > maxDate.getTime()) {
+      return 'disabled';
+    }
+    return '';
+  };
 
-  while (minYear < maxYear || (minYear === maxYear && minMonth < maxMonth)) {
-    ans.push(getMonthDates(getDate(minYear, minMonth, 1)));
+  while (minYear < maxYear || (minYear === maxYear && minMonth <= maxMonth)) {
+    const target = getMonthDates(getDate(minYear, minMonth, 1));
+    const months = [];
+    for (let i = 1; i <= 31; i++) {
+      if (i > target.lastDate) break;
+      const dateObj = {
+        date: getDate(minYear, minMonth, i),
+        day: i,
+        type: calcType(minYear, minMonth, i),
+      };
+      months.push(props.format ? props.format(dateObj) : dateObj);
+    }
+    ans.push({
+      year: minYear,
+      month: minMonth,
+      months,
+      weekdayOfFirstDay: target.weekdayOfFirstDay,
+    });
     const curDate = getYearMonthDay(getDate(minYear, minMonth + 1, 1));
     minYear = curDate.year;
     minMonth = curDate.month;
@@ -146,7 +185,7 @@ const months = computed(() => {
 });
 
 watch(
-  () => props.modelValue,
+  () => props.visible,
   (val) => {
     popup.value = val;
   },
@@ -154,22 +193,7 @@ watch(
 watch(
   () => popup.value,
   (val) => {
-    emit('update:modelValue', val);
+    emit('update:visible', val);
   },
 );
-
-onMounted(() => {
-  time.value.year = getYearMonthDay(value.value).year;
-  time.value.month = getYearMonthDay(value.value).month;
-  dateValue.value = {
-    year: getYearMonthDay(value.value).year,
-    month: getYearMonthDay(value.value).month + 1,
-    day: value.value.getDate(),
-    week: value.value.getDay(),
-    date: `${getYearMonthDay(value.value).year}-${
-      Number(getYearMonthDay(value.value).month) + 1
-    }-${value.value.getDate()}`,
-    isToday: isToday(value.value),
-  };
-});
 </script>
diff --git a/src/calendar/demos/base.vue b/src/calendar/demos/base.vue
index ff4428781..9f2af481c 100644
--- a/src/calendar/demos/base.vue
+++ b/src/calendar/demos/base.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <t-calendar v-model="visible" title="请选择日期" @confirm="handleConfirm" @cell-click="cellClick"></t-calendar>
-    <t-cell title="选择日期" note="请选择日期" arrow @click="visible = true"></t-cell>
+    <t-calendar v-model:visible="visible" @confirm="handleConfirm" @select="cellClick"></t-calendar>
+    <t-cell title="单个选择日期" arrow @click="visible = true"></t-cell>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 
 const visible = ref(false);
 const handleConfirm = (val: string) => {
diff --git a/src/calendar/demos/custom-text.vue b/src/calendar/demos/custom-text.vue
new file mode 100644
index 000000000..38d39e492
--- /dev/null
+++ b/src/calendar/demos/custom-text.vue
@@ -0,0 +1,47 @@
+<template>
+  <t-calendar v-model:visible="visible" :value="value" :format="format" :min-date="minDate" :max-date="maxDate" />
+  <t-cell title="自定义文案" arrow @click="visible = true"></t-cell>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const minDate = new Date(2022, 1, 1);
+const maxDate = new Date(2022, 2, 15);
+const format = (day) => {
+  const { date } = day;
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const curDate = date.getDate();
+
+  day.suffix = '¥60';
+
+  if (year === 2022) {
+    if (month === 2) {
+      const map = {
+        1: '初一',
+        2: '初二',
+        3: '初三',
+        14: '情人节',
+        15: '元宵节',
+      };
+      if (curDate in map) {
+        day.prefix = map[curDate];
+        day.suffix = '¥100';
+        day.classname = 'is-holiday';
+      }
+    }
+  }
+
+  return day;
+};
+
+const visible = ref(false);
+const value = new Date(2022, 1, 15);
+</script>
+
+<style lang="less">
+.is-holiday:not(.t-calendar__dates-item--active) {
+  color: #e34d59;
+}
+</style>
diff --git a/src/calendar/demos/mobile.vue b/src/calendar/demos/mobile.vue
index 78fefaeae..6b9cea3a2 100644
--- a/src/calendar/demos/mobile.vue
+++ b/src/calendar/demos/mobile.vue
@@ -6,16 +6,15 @@
     <tdesign-demo-block title="01 基础" summary="基础用法">
       <div class="Calendar-demo">
         <BaseCalendarDemo />
+        <rangeDemo />
       </div>
     </tdesign-demo-block>
 
-    <tdesign-demo-block title="02 默认日期" summary="设置默认日期">
-      <div class="Calendar-demo">
-        <ValueCalendarDemo />
-      </div>
+    <tdesign-demo-block title="02 自定义" summary=" ">
+      <customTextDemo />
     </tdesign-demo-block>
 
-    <tdesign-demo-block title="03 设置标题" summary="自定义标题">
+    <!-- <tdesign-demo-block title="03 设置标题" summary="自定义标题">
       <div class="Calendar-demo">
         <HeadCalendarDemo />
       </div>
@@ -31,7 +30,7 @@
       <div class="Calendar-demo">
         <ColorCalendarDemo />
       </div>
-    </tdesign-demo-block>
+    </tdesign-demo-block> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -40,4 +39,7 @@ import ValueCalendarDemo from './value.vue';
 import HeadCalendarDemo from './head.vue';
 import CellCalendarDemo from './cell.vue';
 import ColorCalendarDemo from './color.vue';
+
+import customTextDemo from './custom-text.vue';
+import rangeDemo from './range.vue';
 </script>
diff --git a/src/calendar/demos/range.vue b/src/calendar/demos/range.vue
new file mode 100644
index 000000000..4b6ee0e8f
--- /dev/null
+++ b/src/calendar/demos/range.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <t-calendar v-model:visible="visible" :value="value" type="range" @confirm="handleConfirm"></t-calendar>
+    <t-cell title="区间选择日期" arrow @click="visible = true"></t-cell>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const handleConfirm = (val: string) => {
+  console.log(val);
+};
+const today = new Date();
+const tomorrow = new Date(today.getTime() + 5 * 24 * 3600 * 1000);
+const value = ref([today, tomorrow]);
+</script>
diff --git a/src/calendar/props.ts b/src/calendar/props.ts
index 750b7fa7e..8b55470f9 100644
--- a/src/calendar/props.ts
+++ b/src/calendar/props.ts
@@ -12,7 +12,7 @@ export default {
   /**
    * 控制日历显示隐藏
    */
-  modelValue: {
+  visible: {
     type: Boolean,
   },
   // 按钮颜色
@@ -43,8 +43,7 @@ export default {
    * 当前高亮的日期
    */
   value: {
-    type: Date as unknown as PropType<TdCalendarProps['value']>,
-    default: new Date(),
+    type: Number,
   },
   minDate: {
     type: Number,
@@ -57,4 +56,11 @@ export default {
   onSelect: {
     type: Function,
   },
+  format: {
+    type: Function,
+  },
+  type: {
+    type: String,
+    default: 'single',
+  },
 };

From 6e1451cf9aeac8752ce299231a8c4f61673ce4b1 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Fri, 23 Sep 2022 17:21:13 +0800
Subject: [PATCH 3/8] feat(calendar): support range select

---
 src/calendar/calendar.vue          | 61 ++++++++++++++++++++----------
 src/calendar/demos/base.vue        |  4 +-
 src/calendar/demos/custom-text.vue |  2 +-
 src/calendar/props.ts              |  3 ++
 src/calendar/type.ts               | 11 +-----
 5 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
index a953bcdb3..10011252f 100644
--- a/src/calendar/calendar.vue
+++ b/src/calendar/calendar.vue
@@ -43,8 +43,8 @@
             </div>
           </template>
         </div>
-        <div class="t-calendar__footer" @click="confirm">
-          <t-button block :style="{ background: bgColor, color: '#fff' }">{{ confirmBtn }}</t-button>
+        <div class="t-calendar__footer">
+          <t-button block theme="primary" @click="handleConfirm">{{ confirmBtn }}</t-button>
         </div>
       </div>
     </t-popup>
@@ -52,12 +52,11 @@
 </template>
 
 <script lang="ts">
-import { defineEmits, defineProps, computed, watch, ref, onMounted } from 'vue';
+import { defineEmits, defineProps, computed, watch, ref } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import config from '../config';
 import calendarProps from './props';
-import type { CalendarCell, CalendarValue } from './type';
 
 const { prefix } = config;
 const name = `${prefix}-calendar`;
@@ -69,7 +68,7 @@ export default {
 
 <script setup lang="ts">
 const props = defineProps(calendarProps);
-const emit = defineEmits(['select', 'confirm', 'update:modelValue']);
+const emit = defineEmits(['select', 'confirm', 'update:modelValue', 'update:value', 'update:visible']);
 
 // 获取时间年月日起
 const getYearMonthDay = (date: Date) => {
@@ -81,12 +80,9 @@ const getYearMonthDay = (date: Date) => {
 };
 
 const popup = ref<boolean>(props.visible);
-const selectedDate = computed(() => {
-  if (Array.isArray(props.value)) {
-    return props.value.map((item) => new Date(item));
-  }
-  return props.value ? new Date(props.value) : new Date();
-});
+const valueRef = ref(props.value);
+const selectedDate = ref();
+
 const type = computed(() => props.type);
 const days = ref<string[]>(['日', '一', '二', '三', '四', '五', '六']);
 const today = new Date();
@@ -95,21 +91,35 @@ const maxDate = props.maxDate
   ? new Date(props.maxDate)
   : new Date(today.getFullYear(), today.getMonth() + 6, today.getDate());
 
-const dateValue = ref<CalendarValue>();
-
 // 获取日期
 const getDate = (year: number, month: number, day: number) => new Date(year, month, day);
-
+interface TDateItem {
+  type: 'selected' | 'disabled' | 'start' | 'centre' | 'end';
+}
 // 选择日期
-const handleSelect = (year: number, month: number, date: number, dateItem) => {
+const handleSelect = (year: number, month: number, date: number, dateItem: TDateItem) => {
   if (dateItem.type === 'disabled') return;
   const selected = new Date(year, month, date);
-  props.onSelect?.({ value: selected });
+
+  if (type.value === 'range' && Array.isArray(selectedDate.value)) {
+    if (selectedDate.value.length === 1) {
+      if (selectedDate.value[0] > selected) {
+        selectedDate.value = [selected];
+      } else {
+        selectedDate.value = [selectedDate.value[0], selected];
+      }
+    } else {
+      selectedDate.value = [selected];
+    }
+  } else {
+    selectedDate.value = selected;
+  }
+  props.onSelect?.({ value: selectedDate.value });
 };
 // 确认
-const confirm = () => {
+const handleConfirm = () => {
   popup.value = false;
-  emit('confirm', dateValue.value);
+  props.onConfirm?.({ value: selectedDate.value });
 };
 const getMonthDates = (date: Date) => {
   const { year, month } = getYearMonthDay(date);
@@ -124,7 +134,8 @@ const getMonthDates = (date: Date) => {
     lastDate,
   };
 };
-const isSameDate = (date1, date2) => {
+type TDate = Date | number | { year: number; month: number; date: number };
+const isSameDate = (date1: TDate, date2: TDate) => {
   if (date1 instanceof Date) date1 = getYearMonthDay(date1);
   if (date2 instanceof Date) date2 = getYearMonthDay(date2);
   const keys = ['year', 'month', 'date'];
@@ -196,4 +207,16 @@ watch(
     emit('update:visible', val);
   },
 );
+
+watch(
+  valueRef,
+  () => {
+    if (Array.isArray(valueRef.value)) {
+      selectedDate.value = valueRef.value.map((item) => new Date(item));
+    } else {
+      selectedDate.value = valueRef.value ? new Date(valueRef.value) : new Date();
+    }
+  },
+  { immediate: true },
+);
 </script>
diff --git a/src/calendar/demos/base.vue b/src/calendar/demos/base.vue
index 9f2af481c..765836139 100644
--- a/src/calendar/demos/base.vue
+++ b/src/calendar/demos/base.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-calendar v-model:visible="visible" @confirm="handleConfirm" @select="cellClick"></t-calendar>
+    <t-calendar v-model:visible="visible" @confirm="handleConfirm" @select="handleSelect"></t-calendar>
     <t-cell title="单个选择日期" arrow @click="visible = true"></t-cell>
   </div>
 </template>
@@ -12,7 +12,7 @@ const visible = ref(false);
 const handleConfirm = (val: string) => {
   console.log(val);
 };
-const cellClick = (val: any) => {
+const handleSelect = (val: any) => {
   console.log(val);
 };
 </script>
diff --git a/src/calendar/demos/custom-text.vue b/src/calendar/demos/custom-text.vue
index 38d39e492..a8358f1d9 100644
--- a/src/calendar/demos/custom-text.vue
+++ b/src/calendar/demos/custom-text.vue
@@ -41,7 +41,7 @@ const value = new Date(2022, 1, 15);
 </script>
 
 <style lang="less">
-.is-holiday:not(.t-calendar__dates-item--active) {
+.is-holiday:not(.t-calendar__dates-item--selected) {
   color: #e34d59;
 }
 </style>
diff --git a/src/calendar/props.ts b/src/calendar/props.ts
index 8b55470f9..21b4b7fee 100644
--- a/src/calendar/props.ts
+++ b/src/calendar/props.ts
@@ -56,6 +56,9 @@ export default {
   onSelect: {
     type: Function,
   },
+  onConfirm: {
+    type: Function,
+  },
   format: {
     type: Function,
   },
diff --git a/src/calendar/type.ts b/src/calendar/type.ts
index 7faae2678..47d40dc58 100644
--- a/src/calendar/type.ts
+++ b/src/calendar/type.ts
@@ -28,7 +28,7 @@ export interface TdCalendarProps {
   /**
    * 当前高亮的日期
    */
-  value?: Date;
+  value?: CalendarValue;
 }
 
 export interface DateCellDescription {
@@ -42,11 +42,4 @@ export type CalendarCell = {
   day: number;
 };
 
-export type CalendarValue = {
-  year: number;
-  month: number;
-  day: number;
-  week: number;
-  date: string;
-  isToday: boolean;
-};
+export type CalendarValue = number | number[];

From cb8763fefb1dcba220beecf145ee23af43d6ecda Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Sat, 24 Sep 2022 21:43:52 +0800
Subject: [PATCH 4/8] docs(calendar): update api docs

---
 src/calendar/calendar.en-US.md | 25 +++++++++++
 src/calendar/calendar.md       | 28 +++++++-----
 src/calendar/props.ts          | 81 ++++++++++++++--------------------
 src/calendar/type.ts           | 69 ++++++++++++++++++++---------
 4 files changed, 122 insertions(+), 81 deletions(-)
 create mode 100644 src/calendar/calendar.en-US.md

diff --git a/src/calendar/calendar.en-US.md b/src/calendar/calendar.en-US.md
new file mode 100644
index 000000000..6c539744b
--- /dev/null
+++ b/src/calendar/calendar.en-US.md
@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+### Calendar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+confirmBtn | String / Object / Slot / Function | '' | Typescript：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+firstDayOfWeek | Number | 7 | \- | N
+format | Function | - | Typescript：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end'; ` `interface TDate { date: Date; day: number; type: TDateType; className: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+maxDate | Number / Date | - | Typescript：`number | Date` | N
+minDate | Number / Date | - | Typescript：`number | Date` | N
+title | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+type | String | 'single' | options：single/multiple/range | N
+value | Number / Array / Date | - | Typescript：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+visible | Boolean | false | \- | N
+onConfirm | Function |  | Typescript：`(value: Date) => void`<br/> | N
+onSelect | Function |  | Typescript：`(value: Date) => void`<br/> | N
+
+### Calendar Events
+
+name | params | description
+-- | -- | --
+confirm | `(value: Date)` | \-
+select | `(value: Date)` | \-
diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md
index c26b7d49b..1a03e90b9 100644
--- a/src/calendar/calendar.md
+++ b/src/calendar/calendar.md
@@ -1,21 +1,25 @@
 :: BASE_DOC ::
 
 ## API
+### Calendar Props
 
-### Calendar Events
-
-名称 | 参数 | 描述
--- | -- | --
-modelValue | Boolean | false | 控制日历显示与隐藏 | Y
-bgColor | String |  #0053DB | 按钮和单元格背景颜色 | N
-confirmBtn | String |  确认 | 确认按钮文案 | N
-head |  Slot / Function |  - | 头部插槽（左上角处，默认不显示任何内容），TS 类型：`string | TNode` [通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-cell |  Slot / Function |  今天日期 | 自定义单元格 类型：`string | TNode` [通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-value | String / Date |  new Date | 当前高亮的日期，默认今天 | N
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。TS 类型：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+firstDayOfWeek | Number | 7 | 第一天从星期几开始，默认周日 | N
+format | Function | - | 用于格式化日期的函数。TS 类型：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end'; ` `interface TDate { date: Date; day: number; type: TDateType; className: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+maxDate | Number / Date | - | 最大可选的日期，不传则默认半年后。TS 类型：`number | Date` | N
+minDate | Number / Date | - | 最小可选的日期，不传则默认今天。TS 类型：`number | Date` | N
+title | String / Slot / Function | - | 标题，不传默认为“请选择日期”。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+type | String | 'single' | 日历的选择类型，singe = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
+value | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。TS 类型：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+visible | Boolean | false | 是否显示日历 | N
+onConfirm | Function |  | TS 类型：`(value: Date) => void`<br/>点击确认按钮时触发 | N
+onSelect | Function |  | TS 类型：`(value: Date) => void`<br/>选择日期时触发 | N
 
 ### Calendar Events
 
 名称 | 参数 | 描述
 -- | -- | --
-cell-click | cell: `type CalendarCell = {year: number;month: number;day: number;}`| 点击单元格触发 |
-confirm | dateValue: `type CalendarValue = {year: number;month: number;day: number;week: number;date: string;isToday: boolean;}` | 点击确认按钮触发 |
+confirm | `(value: Date)` | 点击确认按钮时触发
+select | `(value: Date)` | 选择日期时触发
diff --git a/src/calendar/props.ts b/src/calendar/props.ts
index 21b4b7fee..30311c561 100644
--- a/src/calendar/props.ts
+++ b/src/calendar/props.ts
@@ -6,64 +6,51 @@
 
 import { TdCalendarProps } from './type';
 import { PropType } from 'vue';
-import { timestamp } from '@vueuse/core';
 
 export default {
-  /**
-   * 控制日历显示隐藏
-   */
-  visible: {
-    type: Boolean,
-  },
-  // 按钮颜色
-  bgColor: {
-    type: String,
-    default: '#0053DB',
-  },
-  /**
-   * 确认按钮
-   */
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。 */
   confirmBtn: {
-    type: String,
-    default: '确认',
+    type: [String, Object, Function] as PropType<TdCalendarProps['confirmBtn']>,
+    default: '',
   },
-  /**
-   * 第一天从星期几开始，仅在日历展示维度为月份时（mode = month）有效。默认为 1
-   */
+  /** 第一天从星期几开始，默认周日 */
   firstDayOfWeek: {
     type: Number,
+    default: 7,
   },
-  /**
-   * 头部插槽（左上角处，默认不显示任何内容）
-   */
-  title: {
-    type: String,
-  },
-  /**
-   * 当前高亮的日期
-   */
-  value: {
-    type: Number,
-  },
-  minDate: {
-    type: Number,
-    default: null,
+  /** 用于格式化日期的函数 */
+  format: {
+    type: Function as PropType<TdCalendarProps['format']>,
   },
+  /** 最大可选的日期，不传则默认半年后 */
   maxDate: {
-    type: Number,
-    default: null,
+    type: [Number, Date] as PropType<TdCalendarProps['maxDate']>,
   },
-  onSelect: {
-    type: Function,
-  },
-  onConfirm: {
-    type: Function,
+  /** 最小可选的日期，不传则默认今天 */
+  minDate: {
+    type: [Number, Date] as PropType<TdCalendarProps['minDate']>,
   },
-  format: {
-    type: Function,
+  /** 标题，不传默认为“请选择日期” */
+  title: {
+    type: [String, Function] as PropType<TdCalendarProps['title']>,
   },
+  /** 日历的选择类型，singe = 单选；multiple = 多选; range = 区间选择 */
   type: {
-    type: String,
-    default: 'single',
-  },
+    type: String as PropType<TdCalendarProps['type']>,
+    default: 'single' as TdCalendarProps['type'],
+    validator(val: TdCalendarProps['type']): boolean {
+      if (!val) return true;
+      return ['single', 'multiple', 'range'].includes(val);
+    },
+  },
+  /** 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组 */
+  value: {
+    type: [Number, Array, Date] as PropType<TdCalendarProps['value']>,
+  },
+  /** 是否显示日历 */
+  visible: Boolean,
+  /** 点击确认按钮时触发 */
+  onConfirm: Function as PropType<TdCalendarProps['onConfirm']>,
+  /** 选择日期时触发 */
+  onSelect: Function as PropType<TdCalendarProps['onSelect']>,
 };
diff --git a/src/calendar/type.ts b/src/calendar/type.ts
index 47d40dc58..6c31b04a9 100644
--- a/src/calendar/type.ts
+++ b/src/calendar/type.ts
@@ -3,43 +3,68 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
+
+import { ButtonProps } from '../button';
+import { TNode } from '../common';
+
 export interface TdCalendarProps {
   /**
-   * 控制日历显示隐藏
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。
+   * @default ''
    */
-  modelValue: boolean;
+  confirmBtn?: string | TNode | ButtonProps | null;
   /**
-   * 背景颜色
+   * 第一天从星期几开始，默认周日
+   * @default 7
    */
-  bgColor?: string;
-
+  firstDayOfWeek?: number;
   /**
-   * 确认按钮
+   * 用于格式化日期的函数
    */
-  confirmBtn?: string;
+  format?: (day: TDate) => TDate;
   /**
-   * 第一天从星期几开始，仅在日历展示维度为月份时（mode = month）有效。默认为 1
+   * 最大可选的日期，不传则默认半年后
    */
-  firstDayOfWeek?: number;
+  maxDate?: number | Date;
   /**
-   * 头部插槽（左上角处，默认不显示任何内容）
+   * 最小可选的日期，不传则默认今天
    */
-  title?: string;
+  minDate?: number | Date;
   /**
-   * 当前高亮的日期
+   * 标题，不传默认为“请选择日期”
    */
-  value?: CalendarValue;
+  title?: string | TNode;
+  /**
+   * 日历的选择类型，singe = 单选；multiple = 多选; range = 区间选择
+   * @default 'single'
+   */
+  type?: 'single' | 'multiple' | 'range';
+  /**
+   * 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组
+   */
+  value?: number | Date | TCalendarValue[];
+  /**
+   * 是否显示日历
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 点击确认按钮时触发
+   */
+  onConfirm?: (value: Date) => void;
+  /**
+   * 选择日期时触发
+   */
+  onSelect?: (value: Date) => void;
 }
 
-export interface DateCellDescription {
-  date: Date;
-  label: string;
-}
+export type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end';
 
-export type CalendarCell = {
-  year: number;
-  month: number;
+export interface TDate {
+  date: Date;
   day: number;
-};
+  type: TDateType;
+  className: string;
+}
 
-export type CalendarValue = number | number[];
+export type TCalendarValue = number | Date;

From b2f9664bdd0e146db95841a627ed53cb685849e2 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Sat, 24 Sep 2022 23:52:41 +0800
Subject: [PATCH 5/8] feat(calendar): support first-day-of-week property

---
 src/calendar/calendar.en-US.md |  4 +--
 src/calendar/calendar.md       |  4 +--
 src/calendar/calendar.vue      | 54 +++++++++++++++++++++++-----------
 src/calendar/demos/base.vue    |  2 +-
 src/calendar/demos/cell.vue    | 19 ------------
 src/calendar/demos/color.vue   | 12 --------
 src/calendar/demos/head.vue    | 14 ---------
 src/calendar/demos/value.vue   | 13 --------
 src/calendar/props.ts          |  4 +--
 src/calendar/type.ts           | 10 ++++---
 10 files changed, 50 insertions(+), 86 deletions(-)
 delete mode 100644 src/calendar/demos/cell.vue
 delete mode 100644 src/calendar/demos/color.vue
 delete mode 100644 src/calendar/demos/head.vue
 delete mode 100644 src/calendar/demos/value.vue

diff --git a/src/calendar/calendar.en-US.md b/src/calendar/calendar.en-US.md
index 6c539744b..b9b8e0e70 100644
--- a/src/calendar/calendar.en-US.md
+++ b/src/calendar/calendar.en-US.md
@@ -6,8 +6,8 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 confirmBtn | String / Object / Slot / Function | '' | Typescript：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
-firstDayOfWeek | Number | 7 | \- | N
-format | Function | - | Typescript：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end'; ` `interface TDate { date: Date; day: number; type: TDateType; className: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+firstDayOfWeek | Number | 0 | \- | N
+format | Function | - | Typescript：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | ''; ` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
 maxDate | Number / Date | - | Typescript：`number | Date` | N
 minDate | Number / Date | - | Typescript：`number | Date` | N
 title | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md
index 1a03e90b9..45e518535 100644
--- a/src/calendar/calendar.md
+++ b/src/calendar/calendar.md
@@ -6,8 +6,8 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。TS 类型：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
-firstDayOfWeek | Number | 7 | 第一天从星期几开始，默认周日 | N
-format | Function | - | 用于格式化日期的函数。TS 类型：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end'; ` `interface TDate { date: Date; day: number; type: TDateType; className: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
+firstDayOfWeek | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
+format | Function | - | 用于格式化日期的函数。TS 类型：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | ''; ` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
 maxDate | Number / Date | - | 最大可选的日期，不传则默认半年后。TS 类型：`number | Date` | N
 minDate | Number / Date | - | 最小可选的日期，不传则默认今天。TS 类型：`number | Date` | N
 title | String / Slot / Function | - | 标题，不传默认为“请选择日期”。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
index 10011252f..25b4016fa 100644
--- a/src/calendar/calendar.vue
+++ b/src/calendar/calendar.vue
@@ -18,10 +18,10 @@
                   :class="{
                     [`${name}__dates-item`]: true,
                     [`${name}__dates-item--${dateItem.type}`]: !!dateItem.type,
-                    [`${dateItem.classname ?? ''}`]: true,
+                    [`${dateItem.className ?? ''}`]: true,
                   }"
                   :style="{
-                    marginLeft: dateIndex === 0 ? `${49 * item.weekdayOfFirstDay}px` : 0,
+                    marginLeft: dateIndex === 0 ? `${49 * ((item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7)}px` : 0,
                   }"
                   @click="handleSelect(item.year, item.month, dateItem.day, dateItem)"
                 >
@@ -44,7 +44,11 @@
           </template>
         </div>
         <div class="t-calendar__footer">
-          <t-button block theme="primary" @click="handleConfirm">{{ confirmBtn }}</t-button>
+          <slot name="confirmBtn">
+            <template v-if="confirmBtn">
+              <t-button v-bind="confirmBtn" block theme="primary" @click="handleConfirm" />
+            </template>
+          </slot>
         </div>
       </div>
     </t-popup>
@@ -57,6 +61,7 @@ import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import config from '../config';
 import calendarProps from './props';
+import { TDate, TDateType } from './type';
 
 const { prefix } = config;
 const name = `${prefix}-calendar`;
@@ -82,9 +87,20 @@ const getYearMonthDay = (date: Date) => {
 const popup = ref<boolean>(props.visible);
 const valueRef = ref(props.value);
 const selectedDate = ref();
-
+const firstDayOfWeek = computed(() => props.firstDayOfWeek);
 const type = computed(() => props.type);
-const days = ref<string[]>(['日', '一', '二', '三', '四', '五', '六']);
+const days = computed(() => {
+  const raw = '日一二三四五六';
+  const ans = [];
+  let i = firstDayOfWeek.value % 7;
+
+  while (ans.length < 7) {
+    ans.push(raw[i]);
+    i = (i + 1) % 7;
+  }
+
+  return ans;
+});
 const today = new Date();
 const minDate = props.minDate ? new Date(props.minDate) : today;
 const maxDate = props.maxDate
@@ -93,11 +109,9 @@ const maxDate = props.maxDate
 
 // 获取日期
 const getDate = (year: number, month: number, day: number) => new Date(year, month, day);
-interface TDateItem {
-  type: 'selected' | 'disabled' | 'start' | 'centre' | 'end';
-}
+
 // 选择日期
-const handleSelect = (year: number, month: number, date: number, dateItem: TDateItem) => {
+const handleSelect = (year: number, month: number, date: number, dateItem: TDate) => {
   if (dateItem.type === 'disabled') return;
   const selected = new Date(year, month, date);
 
@@ -114,18 +128,19 @@ const handleSelect = (year: number, month: number, date: number, dateItem: TDate
   } else {
     selectedDate.value = selected;
   }
-  props.onSelect?.({ value: selectedDate.value });
+  props.onSelect?.(selectedDate.value);
 };
 // 确认
 const handleConfirm = () => {
   popup.value = false;
-  props.onConfirm?.({ value: selectedDate.value });
+  props.onConfirm?.(selectedDate.value);
 };
 const getMonthDates = (date: Date) => {
   const { year, month } = getYearMonthDay(date);
   const firstDay = getDate(year, month, 1);
   const weekdayOfFirstDay = firstDay.getDay();
-  const lastDate = new Date(+getDate(year, month + 1, 1) - 24 * 3600).getDate();
+  const lastDate = new Date(+getDate(year, month + 1, 1) - 24 * 3600 * 1000).getDate();
+  console.log(lastDate);
 
   return {
     year,
@@ -134,8 +149,8 @@ const getMonthDates = (date: Date) => {
     lastDate,
   };
 };
-type TDate = Date | number | { year: number; month: number; date: number };
-const isSameDate = (date1: TDate, date2: TDate) => {
+type CompareDate = Date | number | { year: number; month: number; date: number };
+const isSameDate = (date1: CompareDate, date2: CompareDate) => {
   if (date1 instanceof Date) date1 = getYearMonthDay(date1);
   if (date2 instanceof Date) date2 = getYearMonthDay(date2);
   const keys = ['year', 'month', 'date'];
@@ -146,7 +161,7 @@ const months = computed(() => {
   const ans = [];
   let { year: minYear, month: minMonth } = getYearMonthDay(minDate);
   const { year: maxYear, month: maxMonth } = getYearMonthDay(maxDate);
-  const calcType = (year: number, month: number, date: number) => {
+  const calcType = (year: number, month: number, date: number): TDateType => {
     const curDate = new Date(year, month, date, 23, 59, 59);
 
     if (type.value === 'single') {
@@ -171,10 +186,10 @@ const months = computed(() => {
 
   while (minYear < maxYear || (minYear === maxYear && minMonth <= maxMonth)) {
     const target = getMonthDates(getDate(minYear, minMonth, 1));
-    const months = [];
+    const months: TDate[] = [];
     for (let i = 1; i <= 31; i++) {
       if (i > target.lastDate) break;
-      const dateObj = {
+      const dateObj: TDate = {
         date: getDate(minYear, minMonth, i),
         day: i,
         type: calcType(minYear, minMonth, i),
@@ -195,6 +210,11 @@ const months = computed(() => {
   return ans;
 });
 
+const confirmBtn = computed(() => {
+  if (props.confirmBtn === 'string') return { content: props.confirmBtn };
+  return props.confirmBtn;
+});
+
 watch(
   () => props.visible,
   (val) => {
diff --git a/src/calendar/demos/base.vue b/src/calendar/demos/base.vue
index 765836139..2a4e3b7a1 100644
--- a/src/calendar/demos/base.vue
+++ b/src/calendar/demos/base.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const visible = ref(false);
+const visible = ref(true);
 const handleConfirm = (val: string) => {
   console.log(val);
 };
diff --git a/src/calendar/demos/cell.vue b/src/calendar/demos/cell.vue
deleted file mode 100644
index f7c48a941..000000000
--- a/src/calendar/demos/cell.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <t-calendar v-model="visible">
-      <template #cell="{ item }">
-        <div style="text-align: center">
-          {{ item }}
-        </div>
-        <div>描述</div>
-      </template>
-    </t-calendar>
-    <t-cell title="选择日期" note="请选择日期" arrow @click="visible = true"></t-cell>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
-
-const visible = ref(false);
-</script>
diff --git a/src/calendar/demos/color.vue b/src/calendar/demos/color.vue
deleted file mode 100644
index 142fd6772..000000000
--- a/src/calendar/demos/color.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <t-calendar v-model="visible" bg-color="red"></t-calendar>
-    <t-cell title="选择日期" note="请选择日期" arrow @click="visible = true"></t-cell>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
-
-const visible = ref(false);
-</script>
diff --git a/src/calendar/demos/head.vue b/src/calendar/demos/head.vue
deleted file mode 100644
index 0ee0a6aa4..000000000
--- a/src/calendar/demos/head.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <t-calendar v-model="visible">
-      <template #head> 自定义标题 </template>
-    </t-calendar>
-    <t-cell title="选择日期" note="请选择日期" arrow @click="visible = true"></t-cell>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
-
-const visible = ref(false);
-</script>
diff --git a/src/calendar/demos/value.vue b/src/calendar/demos/value.vue
deleted file mode 100644
index 82db1a794..000000000
--- a/src/calendar/demos/value.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <t-calendar v-model="visible" :value="value"></t-calendar>
-    <t-cell title="选择日期" note="请选择日期" arrow @click="visible = true"></t-cell>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
-
-const visible = ref(false);
-const value = new Date('2022-08-08');
-</script>
diff --git a/src/calendar/props.ts b/src/calendar/props.ts
index 30311c561..b36abe9fe 100644
--- a/src/calendar/props.ts
+++ b/src/calendar/props.ts
@@ -13,10 +13,10 @@ export default {
     type: [String, Object, Function] as PropType<TdCalendarProps['confirmBtn']>,
     default: '',
   },
-  /** 第一天从星期几开始，默认周日 */
+  /** 第一天从星期几开始，默认 0 = 周日 */
   firstDayOfWeek: {
     type: Number,
-    default: 7,
+    default: 0,
   },
   /** 用于格式化日期的函数 */
   format: {
diff --git a/src/calendar/type.ts b/src/calendar/type.ts
index 6c31b04a9..a99963741 100644
--- a/src/calendar/type.ts
+++ b/src/calendar/type.ts
@@ -14,8 +14,8 @@ export interface TdCalendarProps {
    */
   confirmBtn?: string | TNode | ButtonProps | null;
   /**
-   * 第一天从星期几开始，默认周日
-   * @default 7
+   * 第一天从星期几开始，默认 0 = 周日
+   * @default 0
    */
   firstDayOfWeek?: number;
   /**
@@ -58,13 +58,15 @@ export interface TdCalendarProps {
   onSelect?: (value: Date) => void;
 }
 
-export type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end';
+export type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
 
 export interface TDate {
   date: Date;
   day: number;
   type: TDateType;
-  className: string;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
 }
 
 export type TCalendarValue = number | Date;

From 4b0e9c6359df417057cd7f379434bbde0c5226f1 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Sun, 25 Sep 2022 00:30:36 +0800
Subject: [PATCH 6/8] feat(calendar): support type = multiple

---
 src/calendar/calendar.md           |  2 +-
 src/calendar/calendar.vue          | 29 +++++++++++++++++++++++------
 src/calendar/demos/base.vue        |  2 +-
 src/calendar/demos/custom-text.vue |  2 +-
 src/calendar/demos/mobile.vue      |  7 ++-----
 src/calendar/demos/multiple.vue    | 18 ++++++++++++++++++
 src/calendar/props.ts              |  2 +-
 src/calendar/type.ts               |  2 +-
 8 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 src/calendar/demos/multiple.vue

diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md
index 45e518535..2b44bc46e 100644
--- a/src/calendar/calendar.md
+++ b/src/calendar/calendar.md
@@ -11,7 +11,7 @@ format | Function | - | 用于格式化日期的函数。TS 类型：`(day: TDat
 maxDate | Number / Date | - | 最大可选的日期，不传则默认半年后。TS 类型：`number | Date` | N
 minDate | Number / Date | - | 最小可选的日期，不传则默认今天。TS 类型：`number | Date` | N
 title | String / Slot / Function | - | 标题，不传默认为“请选择日期”。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-type | String | 'single' | 日历的选择类型，singe = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
+type | String | 'single' | 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
 value | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。TS 类型：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
 visible | Boolean | false | 是否显示日历 | N
 onConfirm | Function |  | TS 类型：`(value: Date) => void`<br/>点击确认按钮时触发 | N
diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
index 25b4016fa..dd1fff98c 100644
--- a/src/calendar/calendar.vue
+++ b/src/calendar/calendar.vue
@@ -56,8 +56,9 @@
 </template>
 
 <script lang="ts">
-import { defineEmits, defineProps, computed, watch, ref } from 'vue';
+import { defineEmits, defineProps, computed, watch, ref, toRaw } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
+import pull from 'lodash/pull';
 
 import config from '../config';
 import calendarProps from './props';
@@ -125,22 +126,30 @@ const handleSelect = (year: number, month: number, date: number, dateItem: TDate
     } else {
       selectedDate.value = [selected];
     }
+  } else if (props.type === 'multiple') {
+    const newVal = [...selectedDate.value];
+    const index = selectedDate.value.findIndex((item: Date) => isSameDate(item, selected));
+    if (index > -1) {
+      newVal.splice(index, 1);
+    } else {
+      newVal.push(selected);
+    }
+    selectedDate.value = newVal;
   } else {
     selectedDate.value = selected;
   }
-  props.onSelect?.(selectedDate.value);
+  props.onSelect?.(toRaw(selectedDate.value));
 };
 // 确认
 const handleConfirm = () => {
   popup.value = false;
-  props.onConfirm?.(selectedDate.value);
+  props.onConfirm?.(toRaw(selectedDate.value));
 };
 const getMonthDates = (date: Date) => {
   const { year, month } = getYearMonthDay(date);
   const firstDay = getDate(year, month, 1);
   const weekdayOfFirstDay = firstDay.getDay();
   const lastDate = new Date(+getDate(year, month + 1, 1) - 24 * 3600 * 1000).getDate();
-  console.log(lastDate);
 
   return {
     year,
@@ -167,6 +176,12 @@ const months = computed(() => {
     if (type.value === 'single') {
       if (isSameDate({ year, month, date }, selectedDate.value)) return 'selected';
     }
+    if (type.value === 'multiple') {
+      const hit = selectedDate.value.some((item: Date) => isSameDate({ year, month, date }, item));
+      if (hit) {
+        return 'selected';
+      }
+    }
     if (type.value === 'range') {
       if (Array.isArray(selectedDate.value)) {
         const [startDate, endDate] = selectedDate.value;
@@ -211,7 +226,7 @@ const months = computed(() => {
 });
 
 const confirmBtn = computed(() => {
-  if (props.confirmBtn === 'string') return { content: props.confirmBtn };
+  if (props.confirmBtn === 'string' || props.confirmBtn === '') return { content: props.confirmBtn || '确认' };
   return props.confirmBtn;
 });
 
@@ -233,8 +248,10 @@ watch(
   () => {
     if (Array.isArray(valueRef.value)) {
       selectedDate.value = valueRef.value.map((item) => new Date(item));
+    } else if (valueRef.value) {
+      selectedDate.value = new Date(valueRef.value);
     } else {
-      selectedDate.value = valueRef.value ? new Date(valueRef.value) : new Date();
+      selectedDate.value = props.type === 'multiple' ? [new Date()] : new Date();
     }
   },
   { immediate: true },
diff --git a/src/calendar/demos/base.vue b/src/calendar/demos/base.vue
index 2a4e3b7a1..765836139 100644
--- a/src/calendar/demos/base.vue
+++ b/src/calendar/demos/base.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const visible = ref(true);
+const visible = ref(false);
 const handleConfirm = (val: string) => {
   console.log(val);
 };
diff --git a/src/calendar/demos/custom-text.vue b/src/calendar/demos/custom-text.vue
index a8358f1d9..c302540bb 100644
--- a/src/calendar/demos/custom-text.vue
+++ b/src/calendar/demos/custom-text.vue
@@ -28,7 +28,7 @@ const format = (day) => {
       if (curDate in map) {
         day.prefix = map[curDate];
         day.suffix = '¥100';
-        day.classname = 'is-holiday';
+        day.className = 'is-holiday';
       }
     }
   }
diff --git a/src/calendar/demos/mobile.vue b/src/calendar/demos/mobile.vue
index 6b9cea3a2..c4f8426c2 100644
--- a/src/calendar/demos/mobile.vue
+++ b/src/calendar/demos/mobile.vue
@@ -6,6 +6,7 @@
     <tdesign-demo-block title="01 基础" summary="基础用法">
       <div class="Calendar-demo">
         <BaseCalendarDemo />
+        <multipleVue />
         <rangeDemo />
       </div>
     </tdesign-demo-block>
@@ -35,11 +36,7 @@
 </template>
 <script lang="ts" setup>
 import BaseCalendarDemo from './base.vue';
-import ValueCalendarDemo from './value.vue';
-import HeadCalendarDemo from './head.vue';
-import CellCalendarDemo from './cell.vue';
-import ColorCalendarDemo from './color.vue';
-
+import multipleVue from './multiple.vue';
 import customTextDemo from './custom-text.vue';
 import rangeDemo from './range.vue';
 </script>
diff --git a/src/calendar/demos/multiple.vue b/src/calendar/demos/multiple.vue
new file mode 100644
index 000000000..381c09111
--- /dev/null
+++ b/src/calendar/demos/multiple.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <t-calendar v-model:visible="visible" type="multiple" @confirm="handleConfirm" @select="handleSelect"></t-calendar>
+    <t-cell title="多个选择日期" arrow @click="visible = true"></t-cell>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const handleConfirm = (val: string) => {
+  console.log(val);
+};
+const handleSelect = (val: any) => {
+  console.log(val);
+};
+</script>
diff --git a/src/calendar/props.ts b/src/calendar/props.ts
index b36abe9fe..6fe48b28a 100644
--- a/src/calendar/props.ts
+++ b/src/calendar/props.ts
@@ -34,7 +34,7 @@ export default {
   title: {
     type: [String, Function] as PropType<TdCalendarProps['title']>,
   },
-  /** 日历的选择类型，singe = 单选；multiple = 多选; range = 区间选择 */
+  /** 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择 */
   type: {
     type: String as PropType<TdCalendarProps['type']>,
     default: 'single' as TdCalendarProps['type'],
diff --git a/src/calendar/type.ts b/src/calendar/type.ts
index a99963741..54a9f03de 100644
--- a/src/calendar/type.ts
+++ b/src/calendar/type.ts
@@ -35,7 +35,7 @@ export interface TdCalendarProps {
    */
   title?: string | TNode;
   /**
-   * 日历的选择类型，singe = 单选；multiple = 多选; range = 区间选择
+   * 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择
    * @default 'single'
    */
   type?: 'single' | 'multiple' | 'range';

From 77d1deb9d0744de8a2346420952f008d6bea7d45 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Sun, 25 Sep 2022 16:48:45 +0800
Subject: [PATCH 7/8] feat(calendar): enrich demo

---
 src/calendar/calendar.vue            |  5 +++--
 src/calendar/demos/custom-button.vue | 15 +++++++++++++++
 src/calendar/demos/custom-range.vue  | 14 ++++++++++++++
 src/calendar/demos/mobile.vue        |  4 ++++
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/calendar/demos/custom-button.vue
 create mode 100644 src/calendar/demos/custom-range.vue

diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
index dd1fff98c..d48502cfb 100644
--- a/src/calendar/calendar.vue
+++ b/src/calendar/calendar.vue
@@ -46,7 +46,7 @@
         <div class="t-calendar__footer">
           <slot name="confirmBtn">
             <template v-if="confirmBtn">
-              <t-button v-bind="confirmBtn" block theme="primary" @click="handleConfirm" />
+              <t-button block theme="primary" v-bind="confirmBtn" @click="handleConfirm" />
             </template>
           </slot>
         </div>
@@ -193,7 +193,8 @@ const months = computed(() => {
       }
     }
 
-    if (curDate.getTime() < minDate.getTime() || curDate.getTime() > maxDate.getTime()) {
+    const minCurDate = new Date(year, month, date, 0, 0, 0);
+    if (curDate.getTime() < minDate.getTime() || minCurDate.getTime() > maxDate.getTime()) {
       return 'disabled';
     }
     return '';
diff --git a/src/calendar/demos/custom-button.vue b/src/calendar/demos/custom-button.vue
new file mode 100644
index 000000000..0a38047c8
--- /dev/null
+++ b/src/calendar/demos/custom-button.vue
@@ -0,0 +1,15 @@
+<template>
+  <t-calendar v-model:visible="visible" :confirm-btn="confirmBtn" />
+  <t-cell title="自定义按钮" arrow @click="visible = true"></t-cell>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false);
+const confirmBtn = {
+  content: 'ok',
+  theme: 'danger',
+  shape: 'round',
+};
+</script>
diff --git a/src/calendar/demos/custom-range.vue b/src/calendar/demos/custom-range.vue
new file mode 100644
index 000000000..5a7645af5
--- /dev/null
+++ b/src/calendar/demos/custom-range.vue
@@ -0,0 +1,14 @@
+<template>
+  <t-calendar v-model:visible="visible" :value="value" :min-date="minDate" :max-date="maxDate" />
+  <t-cell title="自定义日期区间" arrow @click="visible = true"></t-cell>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const minDate = new Date(2022, 0, 1);
+const maxDate = new Date(2022, 0, 31);
+
+const visible = ref(false);
+const value = new Date(2022, 0, 15);
+</script>
diff --git a/src/calendar/demos/mobile.vue b/src/calendar/demos/mobile.vue
index c4f8426c2..d714263d1 100644
--- a/src/calendar/demos/mobile.vue
+++ b/src/calendar/demos/mobile.vue
@@ -13,6 +13,8 @@
 
     <tdesign-demo-block title="02 自定义" summary=" ">
       <customTextDemo />
+      <customButtonVue />
+      <customRangeVue />
     </tdesign-demo-block>
 
     <!-- <tdesign-demo-block title="03 设置标题" summary="自定义标题">
@@ -39,4 +41,6 @@ import BaseCalendarDemo from './base.vue';
 import multipleVue from './multiple.vue';
 import customTextDemo from './custom-text.vue';
 import rangeDemo from './range.vue';
+import customButtonVue from './custom-button.vue';
+import customRangeVue from './custom-range.vue';
 </script>

From cc93bf3f9251c6ce17fd09dfb40e552f0d7b661f Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Sun, 25 Sep 2022 22:12:56 +0800
Subject: [PATCH 8/8] chore: update common

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 46125ae7b..8a306a10f 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 46125ae7b1fe2b18e3bf1cc1d15a04e802a4b06e
+Subproject commit 8a306a10fca05f9f66e28c5932fef4049d68cb48