feat(calendar): 合并2.x功能，支持月面板、季面板，支持展示周号，鸿蒙适配

src/locales/base.ts

@@ -34,6 +34,10 @@ export interface BaseLang {
     start: string
     confirm: string
     title: string
+    week: string
+    month: string
+    year: string
+    quarter: string
     // eslint-disable-next-line @typescript-eslint/ban-types
     monthTitle: Function
     today: string

src/locales/en-US.ts

@@ -34,6 +34,10 @@ const enUS: BaseLang = {
     start: 'Start',
     confirm: 'Confirm',
     title: 'Calendar',
+    week: 'W',
+    month: 'M',
+    year: 'Y',
+    quarter: 'Q',
     monthTitle: (year: number, month: number) =>
       `${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
     today: 'Today',

src/locales/id-ID.ts

@@ -34,6 +34,10 @@ const idID: BaseLang = {
     start: 'Mulai',
     confirm: 'Mengonfirmasi',
     title: 'Kalender',
+    week: 'Mg',
+    month: 'Bl',
+    year: 'Th',
+    quarter: 'Kt',
     monthTitle: (year: number, month: number) =>
       `${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
     today: 'Hari ini',

src/locales/tr-TR.ts

@@ -42,6 +42,10 @@ const trTR: BaseLang = {
     start: 'Başlangıç',
     confirm: 'Onayla',
     title: 'Takvim seçimi',
+    week: 'H',
+    month: 'A',
+    year: 'Y',
+    quarter: 'Ç',
     monthTitle: (year: number, month: number) =>
       `${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
     today: 'Bugün',

src/locales/zh-CN.ts

@@ -36,6 +36,10 @@ const zhCN: BaseLang = {
     start: '开始',
     confirm: '确认',
     title: '日历选择',
+    week: '周',
+    month: '月',
+    year: '年',
+    quarter: '季度',
     monthTitle: (year: number, month: number) =>
       `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
     today: '今天',

src/locales/zh-TW.ts

@@ -36,6 +36,10 @@ const zhCN: BaseLang = {
     start: '開始',
     confirm: '確認',
     title: '日歷選擇',
+    week: '周',
+    month: '月',
+    year: '年',
+    quarter: '季度',
     monthTitle: (year: number, month: number) =>
       `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
     today: '今天',

src/locales/zh-UG.ts

@@ -34,6 +34,10 @@ const zhUG: BaseLang = {
     start: 'بېشى',
     confirm: 'جەزملەشتۈرۈڭ',
     title: 'تاللاڭ',
+    week: 'ھە',
+    month: 'ئا',
+    year: 'ي',
+    quarter: 'پە',
     monthTitle: (year: number, month: number) =>
       `${year} يىلى ${Number(month) < 10 ? `0${Number(month)}` : month} ئاي`,
     today: 'بۈگۈن',

src/packages/calendar/calendar.scss

@@ -1,4 +1,5 @@
 @import '../popup/popup.scss';
+@import './calendarviewmode.scss';
 
 .nut-calendar {
   position: relative;
@@ -62,6 +63,9 @@
     height: 36px;
     border-radius: 0px 0px 12px 12px;
     box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+    &-shrink {
+      padding-left: 17%;
+    }
   }
 
   &-week-item {
@@ -111,6 +115,22 @@
     }
   }
 
+  &-weeknumber {
+    width: 35%;
+    &-index {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      position: relative;
+      height: $calendar-day-height;
+      font-weight: $font-weight;
+      font-size: $font-size-base;
+      margin-bottom: 4px;
+      color: $color-text-help;
+    }
+  }
+
   &-days {
     overflow: hidden;
   }
@@ -198,6 +218,10 @@
     }
   }
 
+  .shrink {
+    display: flex;
+  }
+
   // 底部导航
   &-footer {
     display: flex;

src/packages/calendar/calendar.taro.tsx

@@ -1,27 +1,31 @@
 import React, { useRef } from 'react'
 import Popup from '@/packages/popup/index.taro'
 import CalendarItem from '@/packages/calendaritem/index.taro'
-import { Utils } from '@/utils/date'
+import CalendarViewModeItem from './calendarviewmodeitem.taro'
+import { getDateString } from '@/utils/date'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import type { CalendarDay, CalendarRef, TaroCalendarProps } from '@/types'
 import { ComponentDefaults } from '@/utils/typings'
 
 const defaultProps = {
   ...ComponentDefaults,
   type: 'single',
+  viewMode: 'day',
   autoBackfill: false,
   popup: true,
   visible: false,
   title: '',
+  value: '',
   defaultValue: '',
-  startDate: Utils.getDay(0),
-  endDate: Utils.getDay(365),
+  startDate: getDateString(0),
+  endDate: getDateString(365),
   showToday: true,
   startText: '',
   endText: '',
   confirmText: '',
   showTitle: true,
   showSubTitle: true,
+  showMonthNumber: false,
   scrollAnimation: true,
   firstDayOfWeek: 0,
   disableDate: (date: CalendarDay) => false,
@@ -32,6 +36,7 @@ const defaultProps = {
   onClose: () => {},
   onConfirm: (param: string) => {},
   onDayClick: (data: string) => {},
+  onItemClick: () => {},
   onPageChange: (param: string) => {},
 } as TaroCalendarProps
 
@@ -47,8 +52,10 @@ export const Calendar = React.forwardRef<
     popup,
     visible,
     type,
+    viewMode,
     autoBackfill,
     title,
+    value,
     defaultValue,
     startDate,
     endDate,
@@ -58,6 +65,7 @@ export const Calendar = React.forwardRef<
     confirmText,
     showTitle,
     showSubTitle,
+    showMonthNumber,
     scrollAnimation,
     firstDayOfWeek,
     closeIcon,
@@ -70,6 +78,7 @@ export const Calendar = React.forwardRef<
     onClose,
     onConfirm,
     onDayClick,
+    onItemClick,
     onPageChange,
   } = { ...defaultProps, ...props }
 
@@ -87,10 +96,6 @@ export const Calendar = React.forwardRef<
     close()
   }
 
-  const select = (param: string) => {
-    onDayClick && onDayClick(param)
-  }
-
   const scrollToDate = (date: string) => {
     calendarRef.current?.scrollToDate(date)
   }
@@ -105,53 +110,75 @@ export const Calendar = React.forwardRef<
 
   const renderItem = () => {
     return (
-      <CalendarItem
-        ref={calendarRef}
-        style={style}
-        className={className}
-        children={children}
-        type={type}
-        autoBackfill={autoBackfill}
-        popup={popup}
-        title={title || locale.calendaritem.title}
-        defaultValue={defaultValue}
-        startDate={startDate}
-        endDate={endDate}
-        showToday={showToday}
-        startText={startText || locale.calendaritem.start}
-        endText={endText || locale.calendaritem.end}
-        confirmText={confirmText || locale.calendaritem.confirm}
-        showTitle={showTitle}
-        showSubTitle={showSubTitle}
-        scrollAnimation={scrollAnimation}
-        firstDayOfWeek={firstDayOfWeek}
-        disableDate={disableDate}
-        renderHeaderButtons={renderHeaderButtons}
-        renderBottomButton={renderBottomButton}
-        renderDay={renderDay}
-        renderDayTop={renderDayTop}
-        renderDayBottom={renderDayBottom}
-        onConfirm={choose}
-        onDayClick={select}
-        onPageChange={yearMonthChange}
-      />
+      <>
+        {viewMode !== 'day' ? (
+          <CalendarViewModeItem
+            ref={calendarRef}
+            style={style}
+            className={className}
+            type={type}
+            viewMode={viewMode}
+            title={title || locale.calendaritem.title}
+            value={value}
+            defaultValue={defaultValue}
+            startDate={startDate}
+            endDate={endDate}
+            showTitle={showTitle}
+            scrollAnimation={scrollAnimation}
+            renderDay={renderDay}
+            onItemClick={onItemClick}
+          />
+        ) : (
+          <CalendarItem
+            ref={calendarRef}
+            style={style}
+            className={className}
+            children={children}
+            type={type}
+            autoBackfill={autoBackfill}
+            popup={popup}
+            title={title || locale.calendaritem.title}
+            defaultValue={defaultValue}
+            startDate={startDate}
+            endDate={endDate}
+            showToday={showToday}
+            startText={startText || locale.calendaritem.start}
+            endText={endText || locale.calendaritem.end}
+            confirmText={confirmText || locale.calendaritem.confirm}
+            showTitle={showTitle}
+            showSubTitle={showSubTitle}
+            showMonthNumber={showMonthNumber}
+            scrollAnimation={scrollAnimation}
+            firstDayOfWeek={firstDayOfWeek}
+            disableDate={disableDate}
+            renderHeaderButtons={renderHeaderButtons}
+            renderBottomButton={renderBottomButton}
+            renderDay={renderDay}
+            renderDayTop={renderDayTop}
+            renderDayBottom={renderDayBottom}
+            onConfirm={choose}
+            onDayClick={onDayClick}
+            onPageChange={yearMonthChange}
+          />
+        )}
+      </>
     )
   }
 
   return (
     <>
-      {popup ? (
+      {popup && viewMode === 'day' ? (
         <Popup
           className="nut-calendar-popup"
           visible={visible}
           position="bottom"
           round
           closeable
+          closeIcon={closeIcon}
           destroyOnClose
           onOverlayClick={closePopup}
           onCloseIconClick={closePopup}
           style={{ height: '83%' }}
-          closeIcon={closeIcon}
         >
           {renderItem()}
         </Popup>