Add notice calendar demo

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 <div>date</div>;
+  return <div>自定义日数据</div>;
 }
 
 function monthCellRender(value) {
-  return <div>month</div>;
+  return <div>自定义月数据</div>;
 }
 
 ReactDOM.render(

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 <ul className="events">
+    {listData.map((item, index) =>
+      <li key={index}>
+        <span className={`event-${item.type}`}>●</span>
+        {item.content}
+      </li>
+    )}
+  </ul>;
+}
+
+
+function getMonthData(value) {
+  if (value.getMonth() === 8) {
+    return 1394;
+  }
+}
+
+function monthCellRender(value) {
+  let num = getMonthData(value);
+  return num ? <div className="notes-month">
+    <section>{num}</section>
+    <span>待办事项数</span>
+  </div> : null;
+}
+
+ReactDOM.render(
+  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, 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;
+}
+````

components/calendar/index.jsx

@@ -32,7 +32,9 @@ class Calendar extends Component {
       <div className={`${prefixCls}-value`}>
         {locale.format.shortMonths[month]}
       </div>
-      {this.props.monthCellRender(value)}
+      <div className={`${prefixCls}-content`}>
+        {this.props.monthCellRender(value)}
+      </div>
     </div>;
   }
   dateCellRender(value) {
@@ -41,7 +43,9 @@ class Calendar extends Component {
       <div className={`${prefixCls}-value`}>
         {zerofixed(value.getDayOfMonth())}
       </div>
-      {this.props.dateCellRender(value)}
+      <div className={`${prefixCls}-content`}>
+        {this.props.dateCellRender(value)}
+      </div>
     </div>;
   }
   setValue(value) {

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;
   }
 }