@nutui/nutui-react-taro 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/esm/{calendaritem.taro-c222ea25.js → calendaritem.taro-0262d6ab.js}

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { ScrollView } from "@tarojs/components";
-import { nextTick } from "@tarojs/taro";
+import Taro, { nextTick } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 const Utils = {
@@ -31,7 +32,7 @@ const Utils = {
     return dayNames[index];
   },
   /**
-   * 返回星期数
+   * 返回上一个月在当前面板中的天数
    * @return {Number}
    */
   getMonthPreDay(year, month) {
@@ -120,7 +121,105 @@ const Utils = {
       return true;
     }
     return false;
+  },
+  getMonthWeek(year, month, date, firstDayOfWeek = 0) {
+    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date));
+    let w = dateNow.getDay();
+    const d = dateNow.getDate();
+    let remainder = 6 - w;
+    if (firstDayOfWeek !== 0) {
+      w = w === 0 ? 7 : w;
+      remainder = 7 - w;
+    }
+    return Math.ceil((d + remainder) / 7);
+  },
+  getYearWeek(year, month, date, firstDayOfWeek = 0) {
+    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date));
+    const dateFirst = new Date(Number(year), 0, 1);
+    const dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 864e5);
+    return Math.ceil((dataNumber + (dateFirst.getDay() + 1 - 1)) / 7);
+  },
+  getWeekDate(year, month, date, firstDayOfWeek = 0) {
+    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date));
+    const nowTime = dateNow.getTime();
+    let day = dateNow.getDay();
+    if (firstDayOfWeek === 0) {
+      const oneDayTime2 = 24 * 60 * 60 * 1e3;
+      const SundayTime2 = nowTime - day * oneDayTime2;
+      const SaturdayTime = nowTime + (6 - day) * oneDayTime2;
+      const sunday2 = this.date2Str(new Date(SundayTime2));
+      const saturday = this.date2Str(new Date(SaturdayTime));
+      return [sunday2, saturday];
+    }
+    day = day === 0 ? 7 : day;
+    const oneDayTime = 24 * 60 * 60 * 1e3;
+    const MondayTime = nowTime - (day - 1) * oneDayTime;
+    const SundayTime = nowTime + (7 - day) * oneDayTime;
+    const monday = this.date2Str(new Date(MondayTime));
+    const sunday = this.date2Str(new Date(SundayTime));
+    return [monday, sunday];
+  },
+  formatResultDate(date) {
+    const days = [...date.split("-")];
+    days[2] = Utils.getNumTwoBit(Number(days[2]));
+    days[3] = `${days[0]}-${days[1]}-${days[2]}`;
+    days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
+    return days;
+  }
+};
+const getCurrMonthData = (type, year, month) => {
+  switch (type) {
+    case "prev":
+      month === 1 && (year -= 1);
+      month = month === 1 ? 12 : --month;
+      break;
+    case "next":
+      month === 12 && (year += 1);
+      month = month === 12 ? 1 : ++month;
+      break;
+  }
+  return [
+    year,
+    Utils.getNumTwoBit(month),
+    Utils.getMonthDays(String(year), String(month))
+  ];
+};
+const getDaysStatus = (type, year, month) => {
+  let days = Utils.getMonthDays(`${year}`, `${month}`);
+  if (type === "prev" && days >= 7) {
+    days -= 7;
+  }
+  return Array.from(Array(days), (v, k) => {
+    return {
+      day: k + 1,
+      type,
+      year,
+      month
+    };
+  });
+};
+const getPreMonthDates = (type, year, month, firstDayOfWeek) => {
+  let preMonth = +month - 1;
+  let preYear = year;
+  if (preMonth <= 0) {
+    preMonth = 12;
+    preYear += 1;
   }
+  let days = Utils.getMonthPreDay(+year, +month);
+  days -= firstDayOfWeek;
+  if (type === "prev" && days >= 7) {
+    days -= 7;
+  }
+  const preDates = Utils.getMonthDays(`${preYear}`, `${preMonth}`);
+  const months = Array.from(Array(preDates), (v, k) => {
+    return {
+      day: k + 1,
+      type,
+      preYear,
+      preMonth
+    };
+  });
+  return months.slice(preDates - days);
 };
 const _window = window;
 function requestAniFrame() {
@@ -134,7 +233,36 @@ function requestAniFrame() {
   };
 }
 const requestAniFrame$1 = requestAniFrame();
+const splitDate = (date) => {
+  const split = date.indexOf("-") !== -1 ? "-" : "/";
+  return date.split(split);
+};
+const isMultiple = (day, days) => {
+  if (days.length > 0) {
+    return days.some((item) => {
+      return Utils.isEqual(item, day);
+    });
+  }
+  return false;
+};
+const isCurrDay = (month, day) => {
+  const date = `${month.curData[0]}/${month.curData[1]}/${day}`;
+  return Utils.isEqual(date, Utils.date2Str(/* @__PURE__ */ new Date(), "/"));
+};
+const getCurrDate = (day, month) => {
+  return `${month.curData[0]}/${month.curData[1]}/${Utils.getNumTwoBit(+day.day)}`;
+};
+const isStart = (day, days) => {
+  return Utils.isEqual(days[0], day);
+};
+const isEnd = (day, days) => {
+  return Utils.isEqual(days[1], day);
+};
+const isStartAndEnd = (days) => {
+  return days.length >= 2 && Utils.isEqual(days[0], days[1]);
+};
 const defaultProps = {
+  ...ComponentDefaults,
   type: "single",
   autoBackfill: false,
   popup: true,
@@ -148,6 +276,7 @@ const defaultProps = {
   showTitle: true,
   showSubTitle: true,
   scrollAnimation: true,
+  firstDayOfWeek: 0,
   renderHeaderButtons: void 0,
   renderDay: void 0,
   renderDayTop: void 0,
@@ -156,15 +285,19 @@ const defaultProps = {
   },
   onUpdate: () => {
   },
-  onClickDay: (data) => {
+  onDayClick: (data) => {
   },
   onPageChange: (data) => {
   }
 };
 const CalendarItem = React.forwardRef((props, ref) => {
   const { locale } = useConfig();
-  const { type, autoBackfill, popup, title, defaultValue, showToday, startText, endText, confirmText, showTitle, showSubTitle, scrollAnimation, renderHeaderButtons, renderDay, renderDayTop, renderDayBottom, onConfirm, onUpdate, onClickDay, onPageChange } = { ...defaultProps, ...props };
-  const weeks = locale.calendaritem.weekdays;
+  const { popup, type, autoBackfill, title, defaultValue, startDate, endDate, showToday, startText, endText, confirmText, showTitle, showSubTitle, scrollAnimation, firstDayOfWeek, renderHeaderButtons, renderDay, renderDayTop, renderDayBottom, onConfirm, onUpdate, onDayClick, onPageChange } = { ...defaultProps, ...props };
+  const weekdays = locale.calendaritem.weekdays;
+  const weeks = [
+    ...weekdays.slice(firstDayOfWeek, 7),
+    ...weekdays.slice(0, firstDayOfWeek)
+  ];
   const monthTitle = locale.calendaritem.monthTitle;
   const [yearMonthTitle, setYearMonthTitle] = useState("");
   const [monthsData, setMonthsData] = useState([]);
@@ -173,12 +306,8 @@ const CalendarItem = React.forwardRef((props, ref) => {
   const [monthDefaultRange, setMonthDefaultRange] = useState([]);
   const [scrollTop, setScrollTop] = useState(0);
   const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
-  const propStartDate = props.startDate || Utils.getDay(0);
-  const propEndDate = props.endDate || Utils.getDay(365);
-  const splitDate = (date) => {
-    const split = date.indexOf("-") !== -1 ? "-" : "/";
-    return date.split(split);
-  };
+  const propStartDate = startDate || Utils.getDay(0);
+  const propEndDate = endDate || Utils.getDay(365);
   const startDates = splitDate(propStartDate);
   const endDates = splitDate(propEndDate);
   const [state] = useState({
@@ -205,146 +334,40 @@ const CalendarItem = React.forwardRef((props, ref) => {
   let viewHeight = 0;
   const classPrefix = "nut-calendar";
   const dayPrefix = "nut-calendar-day";
-  const classes = classNames({
-    [`${classPrefix}-title`]: !popup,
-    [`${classPrefix}-nofooter`]: !!autoBackfill
-  }, classPrefix);
-  const headerClasses = classNames({
-    [`${classPrefix}-header`]: true,
-    [`${classPrefix}-header-title`]: !popup
-  });
-  const isMultiple = (d) => {
-    if (currentDate.length > 0) {
-      return currentDate.some((item) => {
-        return Utils.isEqual(item, d);
-      });
-    }
-    return false;
-  };
-  const getCurrDate = (day, month) => {
-    return `${month.curData[0]}/${month.curData[1]}/${Utils.getNumTwoBit(+day.day)}`;
-  };
-  const getClasses = (day, month) => {
-    const dateStr = getCurrDate(day, month);
-    if (day.type === "active") {
-      if (propStartDate && Utils.compareDate(dateStr, propStartDate) || propEndDate && Utils.compareDate(propEndDate, dateStr)) {
-        return `${dayPrefix}-disabled`;
-      }
-      if (type === "range") {
-        if (isStart(dateStr) || isEnd(dateStr)) {
-          return `${dayPrefix}-active ${isStart(dateStr) ? "active-start" : ""} ${isEnd(dateStr) ? "active-end" : ""}`;
-        }
-        if (Array.isArray(currentDate) && Object.values(currentDate).length === 2 && Utils.compareDate(currentDate[0], dateStr) && Utils.compareDate(dateStr, currentDate[1])) {
-          return `${dayPrefix}-choose`;
-        }
-        return null;
-      }
-      if (type === "multiple" && isMultiple(dateStr) || !Array.isArray(currentDate) && Utils.isEqual(currentDate, dateStr)) {
-        return `${dayPrefix}-active`;
+  const getMonthData = (curData, monthNum, type2) => {
+    let i = 0;
+    let date = curData;
+    const monthData = monthsData;
+    do {
+      const y = parseInt(date[0], 10);
+      const m = parseInt(date[1], 10);
+      const days = [
+        ...getPreMonthDates("prev", y, m, firstDayOfWeek),
+        ...getDaysStatus("active", y, m)
+      ];
+      const cssHeight = 39 + (days.length > 35 ? 384 : 320);
+      let scrollTop2 = 0;
+      if (monthData.length > 0) {
+        const monthEle = monthData[monthData.length - 1];
+        scrollTop2 = monthEle.scrollTop + monthEle.cssHeight;
       }
-      return null;
-    }
-    return `${dayPrefix}-disabled`;
-  };
-  const isCurrDay = (month, day) => {
-    const date = `${month.curData[0]}/${month.curData[1]}/${day}`;
-    return Utils.isEqual(date, Utils.date2Str(/* @__PURE__ */ new Date(), "/"));
-  };
-  const isStart = (d) => {
-    return Utils.isEqual(currentDate[0], d);
-  };
-  const isEnd = (d) => {
-    return Utils.isEqual(currentDate[1], d);
-  };
-  const isStartTip = (day, month) => {
-    return type === "range" && day.type === "active" && isStart(getCurrDate(day, month));
-  };
-  const isEndTip = (day, month) => {
-    return currentDate.length >= 2 && type === "range" && day.type === "active" && isEnd(getCurrDate(day, month));
-  };
-  const isStartAndEnd = () => {
-    return currentDate.length >= 2 && Utils.isEqual(currentDate[0], currentDate[1]);
-  };
-  const getCurrMonthData = (type2) => {
-    const monthData = type2 === "prev" ? monthsData[0] : monthsData[monthsData.length - 1];
-    let year = parseInt(monthData.curData[0]);
-    let month = parseInt(monthData.curData[1].toString().replace(/^0/, ""));
-    switch (type2) {
-      case "prev":
-        month === 1 && (year -= 1);
-        month = month === 1 ? 12 : --month;
-        break;
-      case "next":
-        month === 12 && (year += 1);
-        month = month === 12 ? 1 : ++month;
-        break;
-    }
-    return [
-      year,
-      Utils.getNumTwoBit(month),
-      Utils.getMonthDays(String(year), String(month))
-    ];
-  };
-  const getDaysStatus = (days, type2, year, month) => {
-    if (type2 === "prev" && days >= 7) {
-      days -= 7;
-    }
-    return Array.from(Array(days), (v, k) => {
-      return {
-        day: k + 1,
-        type: type2,
-        year,
-        month
+      const monthInfo = {
+        curData: date,
+        title: monthTitle(y, m),
+        monthData: days,
+        cssHeight,
+        scrollTop: scrollTop2
       };
-    });
-  };
-  const getPreDaysStatus = (days, type2, year, month, preCurrMonthDays) => {
-    if (type2 === "prev" && days >= 7) {
-      days -= 7;
-    }
-    const months = Array.from(Array(preCurrMonthDays), (v, k) => {
-      return {
-        day: k + 1,
-        type: type2,
-        year,
-        month
-      };
-    });
-    return months.slice(preCurrMonthDays - days);
-  };
-  const getMonthData = (curData, type2) => {
-    let preMonth = +curData[1] - 1;
-    let preYear = curData[0];
-    if (preMonth <= 0) {
-      preMonth = 12;
-      preYear += 1;
-    }
-    const preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
-    const currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
-    const preCurrMonthDays = Utils.getMonthDays(`${preYear}`, `${preMonth}`);
-    const monthInfo = {
-      curData,
-      title: monthTitle(curData[0], curData[1]),
-      monthData: [
-        ...getPreDaysStatus(preMonthDays, "prev", `${preMonth}`, preYear, preCurrMonthDays),
-        ...getDaysStatus(currMonthDays, "active", curData[0], curData[1])
-      ]
-    };
-    monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
-    let scrollTop2 = 0;
-    if (monthsData.length > 0) {
-      const monthEle = monthsData[monthsData.length - 1];
-      scrollTop2 = monthEle.scrollTop + monthEle.cssHeight;
-    }
-    monthInfo.scrollTop = scrollTop2;
-    if (type2 === "next") {
-      if (!endDates || !Utils.compareDate(`${endDates[0]}/${endDates[1]}/${Utils.getMonthDays(endDates[0], endDates[1])}`, `${curData[0]}/${curData[1]}/${curData[2]}`)) {
-        monthsData.push(monthInfo);
+      if (type2 === "next") {
+        if (!endDates || !Utils.compareDate(`${endDates[0]}/${endDates[1]}/${Utils.getMonthDays(endDates[0], endDates[1])}`, `${curData[0]}/${curData[1]}/${curData[2]}`)) {
+          monthData.push(monthInfo);
+        }
+      } else if (!startDates || !Utils.compareDate(`${curData[0]}/${curData[1]}/${curData[2]}`, `${startDates[0]}/${startDates[1]}/01`)) {
+        monthData.unshift(monthInfo);
       }
-    } else if (!startDates || !Utils.compareDate(`${curData[0]}/${curData[1]}/${curData[2]}`, `${startDates[0]}/${startDates[1]}/01`)) {
-      monthsData.unshift(monthInfo);
-    }
-    setMonthsData(monthsData);
+      date = getCurrMonthData("next", y, m);
+    } while (i++ < monthNum);
+    setMonthsData(monthData);
   };
   const setReachedYearMonthInfo = (current) => {
     const currentMonthsData = monthsData[current];
@@ -376,48 +399,11 @@ const CalendarItem = React.forwardRef((props, ref) => {
     setTranslateY(monthsData[start].scrollTop);
     setReachedYearMonthInfo(current);
   };
-  const monthsViewScroll = (e) => {
-    if (monthsData.length <= 1) {
-      return;
-    }
-    const scrollTop2 = e.target.scrollTop;
-    let current = Math.floor(scrollTop2 / avgHeight);
-    const nextTop = monthsData[current + 1].scrollTop;
-    const nextHeight = monthsData[current + 1].cssHeight;
-    if (current === 0) {
-      if (scrollTop2 >= nextTop) {
-        current += 1;
-      }
-    } else if (current > 0 && current < monthsNum - 1) {
-      if (scrollTop2 >= nextTop) {
-        current += 1;
-      }
-      if (scrollTop2 < monthsData[current].scrollTop) {
-        current -= 1;
-      }
-    } else {
-      const viewPosition = Math.round(scrollTop2 + viewHeight);
-      if (current + 1 <= monthsNum && viewPosition >= nextTop + nextHeight) {
-        current += 1;
-      }
-      if (current >= 1 && scrollTop2 < monthsData[current - 1].scrollTop) {
-        current -= 1;
-      }
-    }
-    setDefaultRange(monthsNum, current);
-  };
   const getMonthNum = () => {
-    const startDate = {
-      year: Number(startDates[0]),
-      month: Number(startDates[1])
-    };
-    const endDate = {
-      year: Number(endDates[0]),
-      month: Number(endDates[1])
-    };
-    let monthNum = endDate.month - startDate.month;
-    if (endDate.year - startDate.year > 0) {
-      monthNum += 12 * (endDate.year - startDate.year);
+    let monthNum = Number(endDates[1]) - Number(startDates[1]);
+    const yearNum = Number(endDates[0]) - Number(startDates[0]);
+    if (yearNum > 0) {
+      monthNum += 12 * yearNum;
     }
     if (monthNum <= 0) {
       monthNum = 1;
@@ -425,27 +411,7 @@ const CalendarItem = React.forwardRef((props, ref) => {
     setMonthsNum(monthNum);
     return monthNum;
   };
-  const getMonthsData = (monthNum) => {
-    getMonthData(startDates, "next");
-    let i = 1;
-    do {
-      getMonthData(getCurrMonthData("next"), "next");
-    } while (i++ < monthNum);
-  };
-  const requestAniFrameFunc = (current, monthNum) => {
-    const lastItem = monthsData[monthsData.length - 1];
-    const containerHeight = lastItem.cssHeight + lastItem.scrollTop;
-    requestAniFrame$1(() => {
-      if (monthsRef && monthsPanel && viewAreaRef) {
-        viewHeight = monthsRef.current.clientHeight;
-        monthsPanel.current.style.height = `${containerHeight}px`;
-        setScrollTop(monthsData[current].scrollTop);
-        nextTick(() => setScrollWithAnimation(true));
-      }
-    });
-    setAvgHeight(Math.floor(containerHeight / (monthNum + 1)));
-  };
-  const renderCurrentDate = () => {
+  const setDefaultDate = () => {
     let defaultData = [];
     if (type === "range" && Array.isArray(currentDate)) {
       if (currentDate.length > 0) {
@@ -460,7 +426,7 @@ const CalendarItem = React.forwardRef((props, ref) => {
           ...splitDate(currentDate[1])
         ];
       }
-    } else if (props.type === "multiple" && Array.isArray(currentDate)) {
+    } else if (type === "multiple" && Array.isArray(currentDate)) {
       if (currentDate.length > 0) {
         const defaultArr = [];
         const obj = {};
@@ -475,6 +441,22 @@ const CalendarItem = React.forwardRef((props, ref) => {
         currentDate.splice(0) && currentDate.push(...defaultArr);
         defaultData = [...splitDate(defaultArr[0])];
       }
+    } else if (type === "week" && Array.isArray(currentDate)) {
+      if (currentDate.length > 0) {
+        const [y, m, d] = splitDate(currentDate[0]);
+        const weekArr = Utils.getWeekDate(y, m, d, firstDayOfWeek);
+        currentDate.splice(0) && currentDate.push(...weekArr);
+        if (propStartDate && Utils.compareDate(currentDate[0], propStartDate)) {
+          currentDate.splice(0, 1, propStartDate);
+        }
+        if (propEndDate && Utils.compareDate(propEndDate, currentDate[1])) {
+          currentDate.splice(1, 1, propEndDate);
+        }
+        defaultData = [
+          ...splitDate(currentDate[0]),
+          ...splitDate(currentDate[1])
+        ];
+      }
     } else if (currentDate) {
       if (currentDate.length > 0) {
         if (propStartDate && Utils.compareDate(currentDate, propStartDate)) {
@@ -488,6 +470,9 @@ const CalendarItem = React.forwardRef((props, ref) => {
         defaultData = [];
       }
     }
+    return defaultData;
+  };
+  const getCurrentIndex = (defaultData) => {
     let current = 0;
     let lastCurrent = 0;
     if (defaultData.length > 0) {
@@ -495,30 +480,41 @@ const CalendarItem = React.forwardRef((props, ref) => {
         if (item.title === monthTitle(defaultData[0], defaultData[1])) {
           current = index;
         }
-        if (props.type === "range") {
+        if (type === "range" || type === "week") {
           if (item.title === monthTitle(defaultData[3], defaultData[4])) {
             lastCurrent = index;
           }
         }
       });
     } else {
-      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-      const currentMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
-      const currentYearMonthIndex = monthsData.findIndex((item) => {
-        return +item.curData[0] === currentYear && +item.curData[1] === currentMonth;
+      const date = /* @__PURE__ */ new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const index = monthsData.findIndex((item) => {
+        return +item.curData[0] === year && +item.curData[1] === month;
       });
-      if (currentYearMonthIndex > -1) {
-        current = currentYearMonthIndex;
+      if (index > -1) {
+        current = index;
       }
     }
+    return {
+      current,
+      lastCurrent
+    };
+  };
+  const renderCurrentDate = () => {
+    const defaultData = setDefaultDate();
+    const current = getCurrentIndex(defaultData);
     if (defaultData.length > 0) {
       if (type === "range") {
-        chooseDay({ day: defaultData[2], type: "active" }, monthsData[current], true);
-        chooseDay({ day: defaultData[5], type: "active" }, monthsData[lastCurrent], true);
+        chooseDay({ day: defaultData[2], type: "active" }, monthsData[current.current], true);
+        chooseDay({ day: defaultData[5], type: "active" }, monthsData[current.lastCurrent], true);
+      } else if (props.type === "week") {
+        chooseDay({ day: defaultData[2], type: "curr" }, monthsData[current.current], true);
       } else if (type === "multiple") {
         [...currentDate].forEach((item) => {
           const dateArr = splitDate(item);
-          let currentIndex = current;
+          let currentIndex = current.current;
           monthsData.forEach((item2, index) => {
             if (item2.title === monthTitle(dateArr[0], dateArr[1])) {
               currentIndex = index;
@@ -527,23 +523,44 @@ const CalendarItem = React.forwardRef((props, ref) => {
           chooseDay({ day: dateArr[2], type: "active" }, monthsData[currentIndex], true);
         });
       } else {
-        chooseDay({ day: defaultData[2], type: "active" }, monthsData[current], true);
+        chooseDay({ day: defaultData[2], type: "active" }, monthsData[current.current], true);
       }
     }
-    return current;
+    return current.current;
+  };
+  const requestAniFrameFunc = (current, monthNum) => {
+    const lastItem = monthsData[monthsData.length - 1];
+    const containerHeight = lastItem.cssHeight + lastItem.scrollTop;
+    requestAniFrame$1(() => {
+      if (monthsRef && monthsPanel && viewAreaRef) {
+        viewHeight = monthsRef.current.clientHeight;
+        monthsPanel.current.style.height = `${containerHeight}px`;
+        monthsRef.current.scrollTop = monthsData[current].scrollTop;
+        setScrollTop(monthsData[current].scrollTop);
+        nextTick(() => setScrollWithAnimation(true));
+      }
+    });
+    setAvgHeight(Math.floor(containerHeight / (monthNum + 1)));
   };
   const initData = () => {
     const monthNum = getMonthNum();
-    getMonthsData(monthNum);
+    getMonthData(startDates, monthNum, "next");
     const current = renderCurrentDate();
     setDefaultRange(monthNum, current);
     requestAniFrameFunc(current, monthNum);
   };
+  useEffect(() => {
+    initData();
+  }, []);
   const resetRender = () => {
     state.currDateArray.splice(0);
     monthsData.splice(0);
     initData();
   };
+  useEffect(() => {
+    setCurrentDate(resetDefaultValue() || []);
+    popup && resetRender();
+  }, [defaultValue]);
   const scrollToDate = (date) => {
     if (Utils.compareDate(date, propStartDate)) {
       date = propStartDate;
@@ -580,30 +597,68 @@ const CalendarItem = React.forwardRef((props, ref) => {
       }
     });
   };
-  useEffect(() => {
-    initData();
-  }, []);
-  useEffect(() => {
-    setCurrentDate(resetDefaultValue() || []);
-    popup && resetRender();
-  }, [defaultValue]);
+  const monthsViewScroll = (e) => {
+    if (monthsData.length <= 1) {
+      return;
+    }
+    const scrollTop2 = e.detail.scrollTop;
+    Taro.getEnv() === "WEB" && setScrollTop(scrollTop2);
+    let current = Math.floor(scrollTop2 / avgHeight);
+    const nextTop = monthsData[current + 1].scrollTop;
+    const nextHeight = monthsData[current + 1].cssHeight;
+    if (current === 0) {
+      if (scrollTop2 >= nextTop) {
+        current += 1;
+      }
+    } else if (current > 0 && current < monthsNum - 1) {
+      if (scrollTop2 >= nextTop) {
+        current += 1;
+      }
+      if (scrollTop2 < monthsData[current].scrollTop) {
+        current -= 1;
+      }
+    } else {
+      const viewPosition = Math.round(scrollTop2 + viewHeight);
+      if (current + 1 <= monthsNum && viewPosition >= nextTop + nextHeight) {
+        current += 1;
+      }
+      if (current >= 1 && scrollTop2 < monthsData[current - 1].scrollTop) {
+        current -= 1;
+      }
+    }
+    setDefaultRange(monthsNum, current);
+  };
   React.useImperativeHandle(ref, () => ({
     scrollToDate
   }));
-  const confirm = () => {
-    if (type === "range" && state.currDateArray.length === 2 || type !== "range") {
-      const chooseData = state.currDateArray.slice(0);
-      onConfirm && onConfirm(chooseData);
-      if (popup) {
-        onUpdate && onUpdate();
+  const getClasses = (day, month) => {
+    const dateStr = getCurrDate(day, month);
+    if (day.type === "active") {
+      if (propStartDate && Utils.compareDate(dateStr, propStartDate) || propEndDate && Utils.compareDate(propEndDate, dateStr)) {
+        return `${dayPrefix}-disabled`;
+      }
+      if (type === "range" || type === "week") {
+        if (isStart(dateStr, currentDate) || isEnd(dateStr, currentDate)) {
+          return `${dayPrefix}-active ${isStart(dateStr, currentDate) ? "active-start" : ""} ${isEnd(dateStr, currentDate) ? "active-end" : ""}`;
+        }
+        if (Array.isArray(currentDate) && Object.values(currentDate).length === 2 && Utils.compareDate(currentDate[0], dateStr) && Utils.compareDate(dateStr, currentDate[1])) {
+          return `${dayPrefix}-choose`;
+        }
+        return null;
+      }
+      if (type === "multiple" && isMultiple(dateStr, currentDate) || !Array.isArray(currentDate) && Utils.isEqual(currentDate, dateStr)) {
+        return `${dayPrefix}-active`;
       }
+      return null;
     }
+    return `${dayPrefix}-disabled`;
   };
   const chooseDay = (day, month, isFirst) => {
     if (getClasses(day, month) === `${dayPrefix}-disabled`) {
       return;
     }
     const days = [...month.curData];
+    const [y, m] = month.curData;
     days[2] = typeof day.day === "number" ? Utils.getNumTwoBit(day.day) : day.day;
     days[3] = `${days[0]}/${days[1]}/${days[2]}`;
     days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
@@ -640,67 +695,112 @@ const CalendarItem = React.forwardRef((props, ref) => {
         Array.isArray(currentDate) && currentDate.unshift(days[3]);
         state.currDateArray = [[...days], ...state.currDateArray];
       }
+    } else if (type === "week") {
+      const weekArr = Utils.getWeekDate(y, m, `${day.day}`, firstDayOfWeek);
+      if (propStartDate && Utils.compareDate(weekArr[0], propStartDate)) {
+        weekArr.splice(0, 1, propStartDate);
+      }
+      if (propEndDate && Utils.compareDate(propEndDate, weekArr[1])) {
+        weekArr.splice(1, 1, propEndDate);
+      }
+      Array.isArray(currentDate) && currentDate.splice(0) && currentDate.push(...weekArr);
+      state.currDateArray = [
+        Utils.formatResultDate(weekArr[0]),
+        Utils.formatResultDate(weekArr[1])
+      ];
     } else {
       setCurrentDate(days[3]);
       state.currDateArray = [...days];
     }
     if (!isFirst) {
-      onClickDay && onClickDay(state.currDateArray);
+      onDayClick && onDayClick(state.currDateArray);
       if (autoBackfill || !popup) {
         confirm();
       }
     }
     setMonthsData(monthsData.slice());
   };
+  const confirm = () => {
+    if (type === "range" && state.currDateArray.length === 2 || type !== "range") {
+      const chooseData = state.currDateArray.slice(0);
+      onConfirm && onConfirm(chooseData);
+      if (popup) {
+        onUpdate && onUpdate();
+      }
+    }
+  };
+  const classes = classNames({
+    [`${classPrefix}-title`]: !popup,
+    [`${classPrefix}-nofooter`]: !!autoBackfill
+  }, classPrefix);
+  const headerClasses = classNames({
+    [`${classPrefix}-header`]: true,
+    [`${classPrefix}-header-title`]: !popup
+  });
+  const isStartTip = (day, month) => {
+    return (type === "range" || type === "week") && day.type === "active" && isStart(getCurrDate(day, month), currentDate);
+  };
+  const isEndTip = (day, month) => {
+    return currentDate.length >= 2 && (type === "range" || type === "week") && day.type === "active" && isEnd(getCurrDate(day, month), currentDate);
+  };
+  const renderHeader = () => {
+    return React.createElement(
+      "div",
+      { className: headerClasses },
+      showTitle && React.createElement("div", { className: `${classPrefix}-title` }, title || locale.calendaritem.title),
+      renderHeaderButtons && React.createElement("div", { className: `${classPrefix}-header-buttons` }, renderHeaderButtons()),
+      showSubTitle && React.createElement("div", { className: `${classPrefix}-sub-title` }, yearMonthTitle),
+      React.createElement("div", { className: `${classPrefix}-weeks`, ref: weeksPanel }, weeks.map((item) => React.createElement("div", { className: `${classPrefix}-week-item`, key: item }, item)))
+    );
+  };
+  const renderContent = () => {
+    return React.createElement(
+      ScrollView,
+      { scrollTop, scrollY: true, type: "list", scrollWithAnimation, className: `${classPrefix}-content`, onScroll: monthsViewScroll, ref: monthsRef },
+      React.createElement(
+        "div",
+        { className: `${classPrefix}-pannel`, ref: monthsPanel },
+        React.createElement("div", { className: "viewArea", ref: viewAreaRef, style: { transform: `translateY(${translateY}px)` } }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map((month, key) => {
+          return React.createElement(
+            "div",
+            { className: `${classPrefix}-month`, key },
+            React.createElement("div", { className: `${classPrefix}-month-title` }, month.title),
+            React.createElement("div", { className: `${classPrefix}-days` }, month.monthData.map((day, i) => React.createElement(
+              "div",
+              { className: [
+                `${classPrefix}-day`,
+                getClasses(day, month)
+              ].join(" "), onClick: () => {
+                chooseDay(day, month);
+              }, key: i },
+              React.createElement("div", { className: `${classPrefix}-day-day` }, renderDay ? renderDay(day) : day.day),
+              !isStartTip(day, month) && renderDayTop && React.createElement("div", { className: `${classPrefix}-day-info-top` }, renderDayTop(day)),
+              !isStartTip(day, month) && !isEndTip(day, month) && renderDayBottom && React.createElement("div", { className: `${classPrefix}-day-info-bottom` }, renderDayBottom(day)),
+              !isStartTip(day, month) && !isEndTip(day, month) && !renderDayBottom && showToday && isCurrDay(month, day.day) && React.createElement("div", { className: `${classPrefix}-day-info-curr` }, locale.calendaritem.today),
+              isStartTip(day, month) && React.createElement("div", { className: `${classPrefix}-day-info ${isStartAndEnd(currentDate) ? `${classPrefix}-day-info-top` : ""}` }, startText || locale.calendaritem.start),
+              isEndTip(day, month) && React.createElement("div", { className: `${classPrefix}-day-info` }, endText || locale.calendaritem.end)
+            )))
+          );
+        }))
+      )
+    );
+  };
+  const renderFooter = () => {
+    return React.createElement(
+      "div",
+      { className: "nut-calendar-footer" },
+      React.createElement("div", { className: "calendar-confirm-btn", onClick: confirm }, confirmText || locale.confirm)
+    );
+  };
   return React.createElement(
     React.Fragment,
     null,
     React.createElement(
       "div",
       { className: classes },
-      React.createElement(
-        "div",
-        { className: headerClasses },
-        showTitle && React.createElement("div", { className: `${classPrefix}-title` }, title || locale.calendaritem.title),
-        renderHeaderButtons && React.createElement("div", { className: `${classPrefix}-header-buttons` }, renderHeaderButtons()),
-        showSubTitle && React.createElement("div", { className: `${classPrefix}-sub-title` }, yearMonthTitle),
-        React.createElement("div", { className: `${classPrefix}-weeks`, ref: weeksPanel }, weeks.map((item) => React.createElement("div", { className: `${classPrefix}-week-item`, key: item }, item)))
-      ),
-      React.createElement(
-        ScrollView,
-        { scrollTop, scrollY: true, type: "list", scrollWithAnimation, className: `${classPrefix}-content`, onScroll: monthsViewScroll, ref: monthsRef },
-        React.createElement(
-          "div",
-          { className: `${classPrefix}-pannel`, ref: monthsPanel },
-          React.createElement("div", { className: "viewArea", ref: viewAreaRef, style: { transform: `translateY(${translateY}px)` } }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map((month, key) => {
-            return React.createElement(
-              "div",
-              { className: `${classPrefix}-month`, key },
-              React.createElement("div", { className: `${classPrefix}-month-title` }, month.title),
-              React.createElement("div", { className: `${classPrefix}-days` }, month.monthData.map((day, i) => React.createElement(
-                "div",
-                { className: [
-                  `${classPrefix}-day`,
-                  getClasses(day, month)
-                ].join(" "), onClick: () => {
-                  chooseDay(day, month);
-                }, key: i },
-                React.createElement("div", { className: `${classPrefix}-day-day` }, renderDay ? renderDay(day) : day.day),
-                !isStartTip(day, month) && renderDayTop && React.createElement("div", { className: `${classPrefix}-day-info-top` }, renderDayTop(day)),
-                !isStartTip(day, month) && !isEndTip(day, month) && renderDayBottom && React.createElement("div", { className: `${classPrefix}-day-info-bottom` }, renderDayBottom(day)),
-                !isStartTip(day, month) && !isEndTip(day, month) && !renderDayBottom && showToday && isCurrDay(month, day.day) && React.createElement("div", { className: `${classPrefix}-day-info-curr` }, locale.calendaritem.today),
-                isStartTip(day, month) && React.createElement("div", { className: `${classPrefix}-day-info ${isStartAndEnd() ? `${classPrefix}-day-info-top` : ""}` }, startText || locale.calendaritem.start),
-                isEndTip(day, month) && React.createElement("div", { className: `${classPrefix}-day-info` }, endText || locale.calendaritem.end)
-              )))
-            );
-          }))
-        )
-      ),
-      popup && !autoBackfill ? React.createElement(
-        "div",
-        { className: "nut-calendar-footer" },
-        React.createElement("div", { className: "calendar-confirm-btn", onClick: confirm }, confirmText || locale.confirm)
-      ) : ""
+      renderHeader(),
+      renderContent(),
+      popup && !autoBackfill ? renderFooter() : ""
     )
   );
 });