diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md new file mode 100644 index 0000000000..8fb46671fd --- /dev/null +++ b/components/calendar/demo/custom-render.md @@ -0,0 +1,23 @@ +# 自定义渲染 + +- order: 2 + +用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。 + +--- + +````jsx +import { Calendar } from 'antd'; + +function dateCellRender(value) { + return date; +} + +function monthCellRender(value) { + return month; +} + +ReactDOM.render( + +, document.getElementById('components-calendar-demo-custom-render')); +```` diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index ec41306650..e48679b317 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -38,40 +38,69 @@ class NoticeCalendar extends Component { } monthCellRender(value, locale) { const prefixCls = this.props.prefixCls; - const month = value.getMonth(); - const noteNum = this.props.getMonthData(value); - if (noteNum > 0) { - return ( - - {locale.format.shortMonths[month]} - - - ); + const render = this.props.monthCellRender; + let content; + if (render) { + content =
+ {render(value)} +
; + } else { + const month = value.getMonth(); + const noteNum = this.props.getMonthData(value); + if (noteNum > 0) { + content = ( +
+ {locale.format.shortMonths[month]} + +
+ ); + } else { + content =
+ {locale.format.shortMonths[month]} +
; + } } - return ( - {locale.format.shortMonths[month]} - ); + return content; } fullscreenDateCellRender(value) { const prefixCls = this.props.prefixCls; - let listData = this.props.getDateData(value); - return ( - + const render = this.props.dateCellRender; + let content; + if (render) { + content = + {render(value)} + ; + } else { + content = { zerofixed(value.getDayOfMonth()) } -
-
- ); +
+ +
+
; + } + return content; } dateCellRender(value) { const prefixCls = this.props.prefixCls; - const el = ({ zerofixed(value.getDayOfMonth()) }); - const listData = this.props.getDateData(value); - return ( -
- { el } - { (listData && listData.length > 0) ?
: null } -
- ); + const render = this.props.dateCellRender; + let content; + if (render) { + content =
+ {render(value)} +
; + } else { + const listData = this.props.getDateData(value); + content =
+ + {zerofixed(value.getDayOfMonth())} + + {(listData && listData.length > 0) ? +
+ +
: null} +
; + } + 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 (
+ monthCellRender={ this.monthCellRender.bind(this) } + dateCellRender={ dateCellRender.bind(this) } />
); } @@ -136,6 +164,7 @@ NoticeCalendar.propTypes = { onChange: PropTypes.func, onTypeChange: PropTypes.func, }; + NoticeCalendar.defaultProps = { locale: CalendarLocale, getMonthData: noop, diff --git a/components/calendar/index.md b/components/calendar/index.md index 9c1e0bf0b3..6ee1392016 100644 --- a/components/calendar/index.md +++ b/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 | 无 |