Add dateFullCellRender and monthFullCellRender for calendar component (…

…ant-design#5138)
jawQ · Mar 2, 2017 · 27e3f66 · 27e3f66
1 parent 8bfbe9b
commit 27e3f66
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
@@ -35,7 +35,9 @@ moment.locale('zh-cn');
 | defaultValue | set default date | [moment](http://momentjs.com/) | default date     |
 | mode         | can be set to month or year | string | month  |
 | fullscreen   | to set whether full-screen display   | boolean     | true         |
-| dateCellRender     | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
-| monthCellRender    | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
+| dateCellRender      | to set the way of renderer the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| monthCellRender     | to set the way of renderer the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| dateFullCellRender  | to set the way of renderer the date cell,the returned content will override the cell | function(date: moment): ReactNode | - |
+| monthFullCellRender | to set the way of renderer the month cell,the returned content will override the cell | function(date: moment): ReactNode | - |
 | locale       | set locale | object   | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
 | onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
@@ -33,6 +33,8 @@ export interface CalendarProps {
   fullscreen?: boolean;
   dateCellRender?: (date: moment.Moment) => React.ReactNode;
   monthCellRender?: (date: moment.Moment) => React.ReactNode;
+  dateFullCellRender?: (date: moment.Moment) => React.ReactNode;
+  monthFullCellRender?: (date: moment.Moment) => React.ReactNode;
   locale?: any;
   style?: React.CSSProperties;
   onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
@@ -54,6 +56,8 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
   static propTypes = {
     monthCellRender: PropTypes.func,
     dateCellRender: PropTypes.func,
+    monthFullCellRender: PropTypes.func,
+    dateFullCellRender: PropTypes.func,
     fullscreen: PropTypes.bool,
     locale: PropTypes.object,
     prefixCls: PropTypes.string,
@@ -151,7 +155,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     if (value && localeCode) {
       value.locale(localeCode);
     }
-    const { prefixCls, style, className, fullscreen } = props;
+    const { prefixCls, style, className, fullscreen, dateFullCellRender, monthFullCellRender } = props;
     const type = (mode === 'year') ? 'month' : 'date';
     const locale = getComponentLocale(props, context, 'Calendar', () => require('./locale/zh_CN'));
 
@@ -160,6 +164,9 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
       cls += (` ${prefixCls}-fullscreen`);
     }
 
+    const monthCellRender = monthFullCellRender || this.monthCellRender;
+    const dateCellRender = dateFullCellRender || this.dateCellRender;
+
     return (
       <div className={cls} style={style}>
         <Header
@@ -179,8 +186,8 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
           prefixCls={prefixCls}
           showHeader={false}
           value={value}
-          monthCellRender={this.monthCellRender}
-          dateCellRender={this.dateCellRender}
+          monthCellRender={monthCellRender}
+          dateCellRender={dateCellRender}
         />
       </div>
     );

diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
@@ -37,7 +37,9 @@ moment.locale('zh-cn');
 | defaultValue | 默认展示的日期  | [moment](http://momentjs.com/)     | 默认日期     |
 | mode         | 初始模式，`month/year` | string | month  |
 | fullscreen   | 是否全屏显示   | boolean     | true         |
-| dateCellRender     | 自定义渲染日期单元格| function(date: moment): ReactNode   | 无 |
-| monthCellRender    | 自定义渲染月单元格  | function(date: moment): ReactNode   | 无 |
+| dateCellRender      | 自定义渲染日期单元格，返回内容会被追加到单元格| function(date: moment): ReactNode   | 无 |
+| monthCellRender     | 自定义渲染月单元格，返回内容会被追加到单元格  | function(date: moment): ReactNode   | 无 |
+| dateFullCellRender  | 自定义渲染日期单元格，返回内容覆盖单元格| function(date: moment): ReactNode   | 无 |
+| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格  | function(date: moment): ReactNode   | 无 |
 | locale       | 国际化配置     | object   | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
 | onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |