feat(Calendar): new component

.minidev/config.json

@@ -1 +0,0 @@
-{ "plugins": ["./scripts/umi.js"] }

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,2 @@
+.wrapper {
+}

demo/pages/Calendar/index.axml

@@ -0,0 +1,14 @@
+
+<calendar 
+    className="wrapper"
+    startDate="{{startDate}}"
+    endDate="{{endDate}}"
+    date="{{date}}"
+    holidayList="{{holidayList}}"
+    customDateList="{{customDateList}}"
+    disableDates="{{disableDates}}"
+    onChange="onChange"
+    selectionMode="range"
+    showConfirmButton="{{true}}"
+    onClose="onClose"
+/>

demo/pages/Calendar/index.js

@@ -0,0 +1,109 @@
+Page({
+  data: {
+    startDate: '2022-07-01',
+    endDate: '2022-10-26',
+    // date: '2022-05-01',
+    holidayList: [
+      {
+        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 () {
+    my.alert({
+      content: '组件关闭'
+    })
+  }
+});

demo/pages/Calendar/index.json

@@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Calendar",
+  "usingComponents": {
+    "calendar": "../../../src/Calendar/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"
-}
+}