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 | 无 |