update style

assets/index.less

@@ -23,7 +23,6 @@
   &-time-panel {
     display: flex;
     flex-direction: column;
-    width: 250px;
 
     // Header
     &-header {
@@ -85,6 +84,14 @@
     }
   }
 
+  // ================== Year & Month Panel ==================
+  &-year-panel,
+  &-month-panel {
+    &-cell-inner {
+      width: 100px;
+    }
+  }
+
   // ====================== Week Panel ======================
   &-week-panel {
     &-row {
@@ -101,6 +108,11 @@
       }
     }
 
+    &-cell,
+    &-cell-inner {
+      width: 20px;
+    }
+
     &-cell-week {
       font-size: 12px;
       color: #999;

examples/calendar.tsx

@@ -1,12 +1,29 @@
 import React from 'react';
-import moment, { Moment } from 'moment';
+import { Moment } from 'moment';
+import Picker from '../src/Picker';
 import PickerPanel from '../src/PickerPanel';
 import momentGenerateConfig from '../src/generate/moment';
 import zhCN from '../src/locale/zh_CN';
 import '../assets/index.less';
 
+function dateRender(date: Moment) {
+  return <div style={{ width: 80, height: 80 }}>{date.date()}</div>;
+}
+
 export default () => (
-    <div>
-      <PickerPanel locale={zhCN} generateConfig={momentGenerateConfig} />
-    </div>
-  );
+  <div>
+    <PickerPanel<Moment>
+      locale={zhCN}
+      generateConfig={momentGenerateConfig}
+      dateRender={dateRender}
+    />
+
+    <br />
+
+    <Picker<Moment>
+      locale={zhCN}
+      generateConfig={momentGenerateConfig}
+      dateRender={dateRender}
+    />
+  </div>
+);

src/Picker.tsx

@@ -9,6 +9,7 @@ import { isEqual } from './utils/dateUtil';
 import { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
 import { SharedTimeProps } from './panels/TimePanel';
+import { DateRender } from './panels/DatePanel/DateBody';
 
 export interface PickerProps<DateType> {
   prefixCls?: string;
@@ -27,6 +28,7 @@ export interface PickerProps<DateType> {
   format?: string | string[];
   mode?: PanelMode;
   clearIcon?: React.ReactNode;
+  dateRender?: DateRender<DateType>;
   onChange?: (value: DateType | null, dateString: string) => void;
   onOpenChange?: (open: boolean) => void;
 

src/PickerPanel.tsx

@@ -14,6 +14,7 @@ import { GenerateConfig } from './generate';
 import { Locale, PanelMode, PanelRefProps, GetNextMode } from './interface';
 import { isEqual } from './utils/dateUtil';
 import PanelContext from './PanelContext';
+import { DateRender } from './panels/DatePanel/DateBody';
 
 export interface PickerPanelProps<DateType> {
   className?: string;
@@ -27,6 +28,7 @@ export interface PickerPanelProps<DateType> {
   mode?: PanelMode;
   showTime?: boolean | SharedTimeProps;
   tabIndex?: number;
+  dateRender?: DateRender<DateType>;
   onSelect?: (value: DateType) => void;
   onChange?: (value: DateType) => void;
   onPanelChange?: (value: DateType, mode: PanelMode) => void;

src/panels/DatePanel/DateBody.tsx

@@ -103,9 +103,13 @@ function DateBody<DateType>({
             ),
           })}
         >
-          <div className={`${datePrefixCls}-inner`}>
-            {generateConfig.getDate(currentDate)}
-          </div>
+          {dateRender ? (
+            dateRender(currentDate, today)
+          ) : (
+            <div className={`${datePrefixCls}-inner`}>
+              {generateConfig.getDate(currentDate)}
+            </div>
+          )}
         </td>,
       );
     }