Feat calendar format (#1230)

* fix: 修复钉钉小程序mixin传入null报错问题

* feat: Calendar日历在弹窗内时，需要禁用页面滚动

* feat: 新增onMonthFormatter函数

* feat: 新增onMonthFormatter函数

Author: rayhomie

compiled/alipay/demo/pages/Calendar/index.axml

@@ -52,7 +52,8 @@
   <view slot="content">
     <ant-calendar
       monthRange="{{ demo8.monthRange }}"
-      onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
+      onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
+      onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
   </view>
 </collapse-container>
 

compiled/alipay/demo/pages/Calendar/index.js

@@ -16,6 +16,9 @@ function demo8Formatter(cell) {
         topClassName = isOdd ? 'odd' : 'even';
     }
     return {
+        className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
+            ? 'hidden'
+            : '',
         top: {
             className: topClassName,
             label: isOdd ? '奇数' : '偶数',
@@ -25,6 +28,11 @@ function demo8Formatter(cell) {
         },
     };
 }
+function demo8MonthFormatter(month) {
+    return {
+        className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
+    };
+}
 function demoFormatter(cell, value) {
     if (Array.isArray(value) && value.length == 1) {
         const current = value[0];
@@ -72,7 +80,10 @@ Page({
         },
         demo8: {
             visible: true,
-            monthRange: [new Date().getTime(), new Date().getTime()],
+            monthRange: [
+                dayjs().toDate().getTime(),
+                dayjs().add(1, 'M').toDate().getTime(),
+            ],
         },
         demo9: {
             visible: true,
@@ -97,6 +108,7 @@ Page({
     },
     demoFormatter,
     demo8Formatter,
+    demo8MonthFormatter,
     demo9HandleChange(value) {
         this.setData({
             'demo9.value': value,

compiled/alipay/demo/pages/Calendar/index.less

@@ -27,3 +27,13 @@ page {
 .even {
   color: blue;
 }
+
+.ant-calendar-cell.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ant-calendar-body-container.shrink {
+  height: 100px;
+  overflow: hidden;
+}

compiled/alipay/src/Calendar/helper.sjs

@@ -11,7 +11,8 @@ function getClassName(value, index) {
     isRowEnd = value.isRowEnd,
     inThisMonth = value.inThisMonth,
     isToday = value.isToday,
-    disabled = value.disabled;
+    disabled = value.disabled,
+    className = value.className;
   var classNames = {
     disabled: disabled,
     today: inThisMonth && isToday,
@@ -23,7 +24,7 @@ function getClassName(value, index) {
     hidden: !inThisMonth,
     'row-end': index % 7 === 6
   };
-  var result = 'ant-calendar-cell';
+  var result = "ant-calendar-cell ".concat(className || '');
   keys(classNames).forEach(function (key) {
     if (classNames[key]) {
       result += " ant-calendar-cell-".concat(key);

compiled/alipay/src/Calendar/index.axml

@@ -47,7 +47,8 @@
       a:for="{{ monthList }}"
       a:for-index="index"
       a:for-item="currentMonth">
-      <view class="ant-calendar-body-container">
+      <view
+        class="ant-calendar-body-container {{ currentMonth.className || '' }}">
         <view class="ant-calendar-title-container">
           <slot name="calendarTitle">
             <view class="ant-calendar-title">{{ currentMonth.title }}</view>

compiled/alipay/src/Calendar/index.md

@@ -30,6 +30,7 @@ toc: 'content'
 | weekStartsOn          | 星期栏，以周几作为第一天显示。默认为 `Sunday`  | `Sunday` \| `Monday`                                        | `Sunday`    |
 | onChange              | 日期变化回调                                   | (date: CalendarValue) => void                               | 无          |
 | onFormatter           | 用于设置单元格的自定义数据                     | (cell: CellState, currentValue: CalendarValue) => CellState | 无          |
+| onMonthFormatter           | 用于设置月份的自定义数据                     | (month: any) => CellState | 无          |
 | localeText            | 国际化文案                                     | Partial`<LocaleText>`                                       | 无          |
 | changedScrollIntoView | 选中值改变后是否滚动视图                       | boolean                                                     | 无          |
 

compiled/alipay/src/Calendar/index.ts

@@ -116,13 +116,19 @@ Component(
       }
     },
     updateData() {
-      const [monthRange, plocaleText, pweekStartsOn, onFormatter] =
-        getValueFromProps(this, [
-          'monthRange',
-          'localeText',
-          'weekStartsOn',
-          'onFormatter',
-        ]);
+      const [
+        monthRange,
+        plocaleText,
+        pweekStartsOn,
+        onFormatter,
+        onMonthFormatter,
+      ] = getValueFromProps(this, [
+        'monthRange',
+        'localeText',
+        'weekStartsOn',
+        'onFormatter',
+        'onMonthFormatter',
+      ]);
       const localeText = Object.assign({}, defaultLocaleText, plocaleText);
       const markItems = [...localeText.weekdayNames];
       const weekStartsOn = pweekStartsOn;
@@ -146,6 +152,7 @@ Component(
               isSelectedBegin,
               isSelectedEnd,
               isSelected,
+              className,
             } = o;
             const newState =
               onFormatter(
@@ -157,13 +164,14 @@ Component(
                   isSelectedBegin,
                   isSelectedEnd,
                   isSelected,
+                  className,
                 },
                 value
               ) ?? {};
             const result = { ...o };
             if (typeof newState === 'object') {
-              // 只允许修改三个字段
-              ['top', 'bottom', 'disabled'].forEach((key) => {
+              // 只允许修改的字段字段
+              ['top', 'bottom', 'disabled', 'className'].forEach((key) => {
                 if (key in newState) {
                   result[key] = newState[key];
                 }
@@ -172,12 +180,16 @@ Component(
             return result;
           });
         }
-        return {
+        let month = {
           title: p.format(localeText.title),
+          className: '',
           cells,
         };
+        if (onMonthFormatter && typeof onMonthFormatter === 'function') {
+          month = { ...month, ...onMonthFormatter(p) };
+        }
+        return month;
       });
-
       this.setData({ markItems, monthList });
     },
   },

compiled/alipay/src/Calendar/props.ts

@@ -45,6 +45,10 @@ export interface LocaleText {
 }
 
 export interface CellState {
+  /**
+   * 类名
+   */
+  className?: string;
   /**
    * 是否被禁止
    */
@@ -132,6 +136,7 @@ export interface ICalendarProps extends IBaseProps {
   onFormatter?: (
     cell: Pick<
       CellState,
+      | 'className'
       | 'disabled'
       | 'top'
       | 'bottom'
@@ -142,6 +147,12 @@ export interface ICalendarProps extends IBaseProps {
     >,
     currentValue: CalendarValue
   ) => Pick<CellState, 'disabled' | 'top' | 'bottom'>;
+  /**
+   * onMonthFormatter 用于设置月份的自定义数据
+   * @param month 原始数据
+   * @returns 返回新的数据
+   */
+  onMonthFormatter?: (month) => { title?: string; className?: string };
 }
 
 export const CalendarDefaultProps = {
@@ -152,5 +163,6 @@ export const CalendarDefaultProps = {
   weekStartsOn: 'Sunday',
   localeText: defaultLocaleText,
   onFormatter: null,
+  onMonthFormatter: null,
   changedScrollIntoView: null,
 };

compiled/wechat/demo/pages/Calendar/index.js

@@ -16,6 +16,9 @@ function demo8Formatter(cell) {
         topClassName = isOdd ? 'odd' : 'even';
     }
     return {
+        className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
+            ? 'hidden'
+            : '',
         top: {
             className: topClassName,
             label: isOdd ? '奇数' : '偶数',
@@ -25,6 +28,11 @@ function demo8Formatter(cell) {
         },
     };
 }
+function demo8MonthFormatter(month) {
+    return {
+        className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
+    };
+}
 function demoFormatter(cell, value) {
     if (Array.isArray(value) && value.length == 1) {
         const current = value[0];
@@ -72,10 +80,14 @@ Page({
         },
         demo8: {
             visible: true,
-            monthRange: [new Date().getTime(), new Date().getTime()],
+            monthRange: [
+                dayjs().toDate().getTime(),
+                dayjs().add(1, 'M').toDate().getTime(),
+            ],
         },
         demoFormatter,
         demo8Formatter,
+        demo8MonthFormatter,
         demo9: {
             visible: true,
             value: nowDate,
@@ -99,6 +111,7 @@ Page({
     },
     demoFormatter,
     demo8Formatter,
+    demo8MonthFormatter,
     demo9HandleChange(value) {
         this.setData({
             'demo9.value': value.detail,

compiled/wechat/demo/pages/Calendar/index.wxml

@@ -52,7 +52,8 @@
   <view slot="content">
     <ant-calendar
       monthRange="{{ demo8.monthRange }}"
-      onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
+      onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
+      onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
   </view>
 </collapse-container>