custom render demo

components/calendar/demo/custom-render.md

@@ -0,0 +1,23 @@
+# 自定义渲染
+
+- order: 2
+
+用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function dateCellRender(value) {
+  return <span>date</span>;
+}
+
+function monthCellRender(value) {
+  return <span>month</span>;
+}
+
+ReactDOM.render(
+  <Calendar type="date" dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, document.getElementById('components-calendar-demo-custom-render'));
+````

components/calendar/index.jsx

@@ -38,40 +38,69 @@ class NoticeCalendar extends Component {
   }
   monthCellRender(value, locale) {
     const prefixCls = this.props.prefixCls;
+    const render = this.props.monthCellRender;
+    let content;
+    if (render) {
+      content = <div className={`${prefixCls}-fullscreen-month`}>
+        {render(value)}
+      </div>;
+    } else {
       const month = value.getMonth();
       const noteNum = this.props.getMonthData(value);
       if (noteNum > 0) {
-      return (
+        content = (
-        <a className={`${prefixCls}-fullscreen-month`}>
+          <div className={`${prefixCls}-fullscreen-month`}>
             <span>{locale.format.shortMonths[month]}</span>
             <MonthCellNoteNum num={noteNum} prefixCls={`${prefixCls}-notes`} />
-        </a>
+          </div>
         );
+      } else {
+        content = <div className={`${prefixCls}-fullscreen-month`}>
+          {locale.format.shortMonths[month]}
+        </div>;
       }
-    return (
+    }
-      <a className={`${prefixCls}-fullscreen-month`}>{locale.format.shortMonths[month]}</a>
+    return content;
-    );
   }
   fullscreenDateCellRender(value) {
     const prefixCls = this.props.prefixCls;
-    let listData = this.props.getDateData(value);
+    const render = this.props.dateCellRender;
-    return (
+    let content;
-      <span className={`${prefixCls}-fullscreen-date`}>
+    if (render) {
+      content = <span className={`${prefixCls}-fullscreen-date`}>
+        {render(value)}
+      </span>;
+    } else {
+      content = <span className={`${prefixCls}-fullscreen-date`}>
         <span>{ zerofixed(value.getDayOfMonth()) }</span>
-        <div className={`${prefixCls}-note-list-wrapper`}><NoteList listData={listData} /></div>
+        <div className={`${prefixCls}-note-list-wrapper`}>
-      </span>
+          <NoteList listData={this.props.getDateData(value)} />
-    );
+        </div>
+      </span>;
+    }
+    return content;
   }
   dateCellRender(value) {
     const prefixCls = this.props.prefixCls;
-    const el = (<span className={`${prefixCls}-date ${prefixCls}-notes-date`}>{ zerofixed(value.getDayOfMonth()) }</span>);
+    const render = this.props.dateCellRender;
+    let content;
+    if (render) {
+      content = <div style={{ position: 'relative' }}>
+        {render(value)}
+      </div>;
+    } else {
       const listData = this.props.getDateData(value);
-    return (
+      content = <div style={{ position: 'relative' }}>
-      <div style={{ position: 'relative' }}>
+        <span className={`${prefixCls}-date ${prefixCls}-notes-date`}>
-        { el }
+          {zerofixed(value.getDayOfMonth())}
-        { (listData && listData.length > 0) ? <div className={`${prefixCls}-notes-wrapper`}><Notes listData={listData} /></div> : null }
+        </span>
-      </div>
+        {(listData && listData.length > 0) ?
-    );
+          <div className={`${prefixCls}-notes-wrapper`}>
+            <Notes listData={listData} />
+          </div> : null}
+      </div>;
+    }
+    return content;
   }
   setValue(value) {
     if (this.state.value !== value) {
@@ -93,11 +122,10 @@ class NoticeCalendar extends Component {
   render() {
     const props = this.props;
     const {value, type} = this.state;
-    const {locale, prefixCls, style, className, fullscreen, monthCellRender, dateCellRender, fullscreenDateCellRender} = props;
+    const {locale, prefixCls, style, className, fullscreen} = props;
+    const dateCellRender = fullscreen
+      ? this.fullscreenDateCellRender : this.dateCellRender;
 
-    const _monthCellRender = monthCellRender ? monthCellRender : this.monthCellRender;
-    const _dateCellRender = dateCellRender ? dateCellRender : this.dateCellRender;
-    const _fullscreenDateCellRender = fullscreenDateCellRender ? fullscreenDateCellRender : this.fullscreenDateCellRender;
     return (
       <div className={prefixCls + '-wrapper' + (className ? ' ' + className : '') + (fullscreen ? ' ' + prefixCls + '-wrapper-fullscreen' : '' )} style={style}>
         <Header
@@ -115,8 +143,8 @@ class NoticeCalendar extends Component {
           showHeader={false}
           value={value}
           onChange={this.onPanelChange.bind(this)}
-          monthCellRender={ fullscreen ? _monthCellRender.bind(this) : null }
+          monthCellRender={ this.monthCellRender.bind(this) }
-          dateCellRender={ fullscreen ? _fullscreenDateCellRender.bind(this) : _dateCellRender.bind(this) }/>
+          dateCellRender={ dateCellRender.bind(this) } />
       </div>
     );
   }
@@ -136,6 +164,7 @@ NoticeCalendar.propTypes = {
   onChange: PropTypes.func,
   onTypeChange: PropTypes.func,
 };
+
 NoticeCalendar.defaultProps = {
   locale: CalendarLocale,
   getMonthData: noop,

components/calendar/index.md

@@ -27,7 +27,6 @@
 | getDateData  | 获取日的显示数据    | function   | 无           |
 | getMonthData       | 获取月的显示数据 | function   | 无  |
 | dateCellRender  | 自定义渲染日期单元格    | function   | 无           |
-| fullscreenDateCellRender  | 自定义渲染日期单元格(全屏)    | function   | 无           |
 | monthCellRender       | 自定义渲染月单元格 | function   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
 | onChange | 日期改变 | bool | 无 |