diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md
index 7972b5b3387f285f811a5d8fbd6ac97d7e27e04b..fd86d8faa79e8278cf1bfc9bb24b0c2d100cd0ad 100644
--- a/components/calendar/demo/custom-render.md
+++ b/components/calendar/demo/custom-render.md
@@ -1,6 +1,6 @@
# 自定义渲染
-- order: 2
+- order: 1
用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
@@ -10,11 +10,11 @@
import { Calendar } from 'antd';
function dateCellRender(value) {
- return
date
;
+ return 自定义日数据
;
}
function monthCellRender(value) {
- return month
;
+ return 自定义月数据
;
}
ReactDOM.render(
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
new file mode 100644
index 0000000000000000000000000000000000000000..ddda4103104e61efb23b16b5ed21aca535c38bd1
--- /dev/null
+++ b/components/calendar/demo/notice-calendar.md
@@ -0,0 +1,115 @@
+# 通知事项日历演示
+
+- order: 2
+
+一个复杂的应用实例。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function getListData(value) {
+ console.log(value.getDayOfMonth());
+ var listData;
+ switch (value.getDayOfMonth()) {
+ case 8:
+ listData = [
+ { type: 'warn', content: '这里是警告事项.' },
+ { type: 'normal', content: '这里是普通事项.' }
+ ]; break;
+ case 10:
+ listData = [
+ { type: 'warn', content: '这里是警告事项.' },
+ { type: 'normal', content: '这里是普通事项.' },
+ { type: 'error', content: '这里是错误事项.' }
+ ]; break;
+ case 15:
+ listData = [
+ { type: 'warn', content: '这里是警告事项.' },
+ { type: 'normal', content: '这里是普通事项好长啊。。....' },
+ { type: 'error', content: '这里是错误事项.' },
+ { type: 'error', content: '这里是错误事项.' },
+ { type: 'error', content: '这里是错误事项.' },
+ { type: 'error', content: '这里是错误事项.' }
+ ]; break;
+ }
+ return listData || [];
+}
+
+function dateCellRender(value) {
+ let listData = getListData(value);
+ return
+ {listData.map((item, index) =>
+ -
+ ●
+ {item.content}
+
+ )}
+
;
+}
+
+
+function getMonthData(value) {
+ if (value.getMonth() === 8) {
+ return 1394;
+ }
+}
+
+function monthCellRender(value) {
+ let num = getMonthData(value);
+ return num ?
+
+ 待办事项数
+
: null;
+}
+
+ReactDOM.render(
+
+, document.getElementById('components-calendar-demo-notice-calendar'));
+````
+
+
+````css
+.events {
+ line-height: 24px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.events li {
+ color: #999;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.events li span {
+ vertical-align: middle;
+}
+
+.events li span:first-child {
+ font-size: 9px;
+ margin-right: 4px;
+}
+
+.event-warn {
+ color: #fac450;
+}
+
+.event-normal {
+ color: #2db7f5;
+}
+
+.event-error {
+ color: #f60;
+}
+
+.notes-month {
+ text-align: center;
+}
+.notes-month section {
+ font-size: 28px;
+}
+````
diff --git a/components/calendar/demo/notice-example.md b/components/calendar/demo/notice-example.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx
index aafefe7b15aed8268b8fd58c9288cec9d4330372..60149d74c71ed019cbaa3a52a9cdf0c4baaf1d57 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -32,7 +32,9 @@ class Calendar extends Component {
{locale.format.shortMonths[month]}
- {this.props.monthCellRender(value)}
+
+ {this.props.monthCellRender(value)}
+
;
}
dateCellRender(value) {
@@ -41,7 +43,9 @@ class Calendar extends Component {
{zerofixed(value.getDayOfMonth())}
- {this.props.dateCellRender(value)}
+
+ {this.props.dateCellRender(value)}
+
;
}
setValue(value) {
diff --git a/style/components/calendar/index.less b/style/components/calendar/index.less
index 501332140cb1b5643e06fc69cd98306b638fd148..0449de84b0724cfb15859d41cb690c97f4caf4d6 100644
--- a/style/components/calendar/index.less
+++ b/style/components/calendar/index.less
@@ -51,6 +51,10 @@
border: none;
}
+ td {
+ position: relative;
+ }
+
&-calendar-table {
border-spacing: 0;
margin-bottom: 0;
@@ -73,6 +77,11 @@
}
}
+ &-month,
+ &-date {
+ text-align: center;
+ }
+
&-value {
display: block;
margin: 0 auto;
@@ -83,7 +92,6 @@
padding: 0;
background: transparent;
line-height: 22px;
- text-align: center;
&:hover {
background: tint(@primary-color, 90%);
@@ -139,7 +147,7 @@
width: 46px;
margin: 0 auto;
color: @text-color;
- border-radius: 4px 4px;
+ border-radius: 4px;
height: 36px;
padding: 0;
background: transparent;
@@ -171,10 +179,10 @@
}
}
- &-notes-wrapper {
+ &-content {
position: absolute;
width: 100%;
- left:0;
+ left: 0;
bottom: -9px;
}
@@ -198,6 +206,7 @@
&-fullscreen &-month,
&-fullscreen &-date {
+ text-align: left;
margin: 0 4px;
display: block;
color: @text-color;
@@ -245,15 +254,12 @@
color: #ccc;
}
- &-fullscreen &-note-list-wrapper {
+ &-fullscreen &-content {
height: 90px;
overflow-y: auto;
- }
-
- &-fullscreen &-notes-month {
- text-align: center;
- > section {
- font-size: 28px;
- }
+ position: static;
+ width: auto;
+ left: auto;
+ bottom: auto;
}
}