feat(Calendar): new component

demo/app.json

@@ -54,7 +54,8 @@
     "pages/Empty/index",
     "pages/Toast/index",
     "pages/FloatPanel/index",
-    "pages/FloatPanelEvent/index"
+    "pages/FloatPanelEvent/index",
+    "pages/Calendar/index"
   ],
   "window": {
     "enableWK": "YES",

demo/pages/Calendar/index.acss

@@ -0,0 +1,14 @@
+.wrapper {
+}
+
+.wrapper1 {
+
+}
+
+.wrapper1 .amd-calendar-dateItem-wrapper-rangearea {
+    background-color: #FFF3E8 !important;
+}
+
+.wrapper1 .amd-calendar-dateItem-wrapper-rangeedge {
+    background-color: #FF8E1E !important;
+}

demo/pages/Calendar/index.axml

@@ -0,0 +1,113 @@
+<view>
+    <list header="基础用法" radius="{{true}}" class="list">
+        <view class="line">
+            <list-item 
+                onTap="handleButton1Tap"
+                extraBrief="{{date1}}"
+            >
+                选择单日期
+            </list-item>
+            <list-item
+                onTap="handleButton2Tap"
+                extraBrief="{{range1 ? `${range1[0]} - ${range1[1]}` : ''}}"
+            >选择日期范围</list-item>
+        </view>
+    </list>
+
+    <list header="扩展用法" radius="{{true}}" class="list">
+        <view class="line">
+            <list-item onTap="handleButton3Tap">带农历节</list-item>
+        </view>
+    </list>
+
+    <list header="自定义用法" radius="{{true}}" class="list">
+        <view class="line">
+            <list-item
+                onTap="handleButton4Tap"
+            >
+                自定义颜色
+            </list-item>
+            <list-item
+                onTap="handleButton5Tap"
+            >自定义文案与假日</list-item>
+            <list-item
+                onTap="handleButton6Tap"
+            >自定义可选范围</list-item>
+        </view>
+    </list>
+</view>
+
+<calendar 
+    className="wrapper"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    selectDate="{{date1}}"
+    onChange="handleDateChange"
+    selectionMode="single"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+    a:if="{{show1}}"
+/>
+
+<calendar 
+    className="wrapper"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    selectRange="{{range1}}"
+    onChange="handleRangeChange"
+    selectionMode="range"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+    a:if="{{show2}}"
+/>
+
+<calendar 
+    className="wrapper"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    onChange="handleChange"
+    selectionMode="single"
+    showlunar="{{true}}"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+    a:if="{{show3}}"
+/>
+
+<calendar 
+    className="wrapper1"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    onChange="handleChange"
+    selectionMode="range"
+    showlunar="{{true}}"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+    a:if="{{show4}}"
+/>
+
+<calendar 
+    className="wrapper"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    onChange="handleChange"
+    selectionMode="range"
+    showlunar="{{true}}"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+    a:if="{{show5}}"
+    customDateList="{{customDateList}}"
+    holidayList="{{holidayList}}"
+/>
+
+<calendar 
+    className="wrapper"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    onChange="handleChange"
+    selectionMode="range"
+    showlunar="{{true}}"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+    a:if="{{show6}}"
+    disableDates="{{disableDates}}"
+/>

demo/pages/Calendar/index.js

@@ -0,0 +1,216 @@
+import dayjs from 'dayjs'
+
+Page({
+  data: {
+    show: false,
+    date1: null,
+    range1: null,
+    startDate: '2022-07-01',
+    endDate: '2022-10-26',
+    holidayList: [
+      {
+        name: '中秋',
+        range: ['2022-09-10', '2022-09-12'],
+        type: 'holiday',
+        day: '2022-09-10'
+      },
+      {
+        name: '国庆',
+        range: ['2022-10-01', '2022-10-07'],
+        type: 'holiday',
+        day: '2022-10-01'
+      }
+    ],
+    customDateList: [
+      {
+        date: '2022-07-17',
+        text: '未出账',
+        color: '#999999'
+      },
+      {
+        date: '2022-07-18',
+        text: '未出账',
+        color: '#999999'
+      },
+      {
+        date: '2022-07-19',
+        text: '未出账',
+        color: '#999999'
+      },
+      {
+        date: '2022-07-20',
+        text: '未出账',
+        color: '#999999'
+      },
+      {
+        date: '2022-07-21',
+        text: '未出账',
+        color: '#999999'
+      },
+      {
+        date: '2022-08-25',
+        text: '+100',
+        color: '#F93A4A'
+      },
+      {
+        date: '2022-08-24',
+        text: '+100',
+        color: '#F93A4A'
+      },
+      {
+        date: '2022-08-23',
+        text: '+100',
+        color: '#F93A4A'
+      },
+      {
+        date: '2022-08-22',
+        text: '+100',
+        color: '#F93A4A'
+      },
+      {
+        date: '2022-08-21',
+        text: '+100',
+        color: '#F93A4A'
+      },
+      {
+        date: '2022-08-20',
+        text: '-100',
+        color: '#00B578'
+      },
+      {
+        date: '2022-08-19',
+        text: '-100',
+        color: '#00B578'
+      },
+      {
+        date: '2022-08-18',
+        text: '-100',
+        color: '#00B578'
+      },
+      {
+        date: '2022-08-17',
+        text: '-100',
+        color: '#00B578'
+      },
+      {
+        date: '2022-08-16',
+        text: '-100',
+        color: '#00B578'
+      },
+    ],
+    disableDates: [
+      '2022-09-11',
+      '2022-09-12',
+      '2022-09-13',
+      '2022-09-14',
+      '2022-09-15',
+    ]
+  },
+  onChange (date) {
+    my.alert({
+      content: date
+    })
+  },
+  onClose () {
+    this.setData({
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false,
+      show5: false,
+      show6: false
+    })
+  },
+  onLoad () {
+  },
+  calStartEndDate () {
+    const now = dayjs()
+    const startDate = now.subtract(3, 'month');
+    const endDate = now.add(3, 'month');
+    this.setData ({
+      startDate: startDate.format("YYYY-MM-DD"),
+      endDate: endDate.format("YYYY-MM-DD")
+    })
+  },
+  handleButton1Tap () {
+    this.setData({
+      show1: true,
+      show2: false,
+      show3: false,
+      show4: false,
+      show5: false,
+      show6: false
+    })
+  },
+  handleButton2Tap () {
+    this.setData({
+      show1: false,
+      show2: true,
+      show3: false,
+      show4: false,
+      show5: false,
+      show6: false
+
+    })
+  },
+  handleButton3Tap () {
+    this.setData({
+      show1: false,
+      show2: false,
+      show3: true,
+      show4: false,
+      show5: false,
+      show6: false
+
+    })
+  },
+  handleButton4Tap () {
+    this.setData({
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: true,
+      show5: false,
+      show6: false
+
+    })
+  },
+  handleButton5Tap () {
+    this.setData({
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false,
+      show5: true,
+      show6: false
+
+    })
+  },
+  handleButton6Tap () {
+    this.setData({
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false,
+      show5: false,
+      show6: true
+    })
+  },
+  handleDateChange (date) {
+    this.setData({
+      date1: date,
+    })
+    this.onClose()
+  },
+  handleRangeChange (range) {
+    this.setData({ range1: range })
+    this.onClose()
+  },
+  handleChange (date) {
+    my.alert({ 
+      content: date
+     })
+    this.onClose()
+
+  }
+});

demo/pages/Calendar/index.json

@@ -0,0 +1,9 @@
+{
+  "defaultTitle": "Calendar",
+  "usingComponents": {
+    "calendar": "../../../src/Calendar/index",
+    "list": "antd-mini/es/List/index",
+    "list-item": "antd-mini/es/List/ListItem/index"
+  },
+  "allowsBounceVertical": "NO"
+}

demo/utils/constants.js

@@ -71,6 +71,11 @@ export const componentList = [
         nameZN: '滑动面板',
         path: '/pages/FloatPanel/index',
       },
+      {
+        name: 'Calendar',
+        nameZN: '日历',
+        path: '/pages/Calendar/index',
+      },
     ],
   },
   {

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "async-validator": "^4.0.7",
+    "dayjs": "^1.11.3",
     "fast-deep-equal": "3.1.3",
     "tslib": "^2.3.1"
   },
@@ -126,4 +127,4 @@
   ],
   "license": "MIT",
   "homepage": "https://github.com/ant-design/ant-design-mini"
-}
+}