update calendar

components/calendar/Header.jsx

@@ -18,6 +18,7 @@ class Header extends Component {
     }
     return (
       <Select
+        style={{ width: 75 }}
         size={ fullscreen ? null : 'small' }
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-year-select`}
@@ -39,6 +40,7 @@ class Header extends Component {
 
     return (
       <Select
+        style={{ width: 70 }}
         size={ fullscreen ? null : 'small' }
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-month-select`}

components/calendar/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-最简单的用法。
+一个通用的日历面板，支持年/月切换。
 
 ---
 
@@ -10,40 +10,43 @@
 import { Calendar } from 'antd';
 
 function getDateData(value) {
-
   let listData;
   switch (value.getDayOfMonth()) {
     case 8:
       listData = [
         { type: 'warn', content: '这里是警告事项.' },
         { type: 'normal', content: '这里是普通事项.' }
-      ]; break;
+      ];
+      break;
     case 10:
       listData = [
         { type: 'warn', content: '这里是警告事项.' },
         { type: 'normal', content: '这里是普通事项.' },
         { type: 'error', content: '这里是错误事项.' }
-      ]; break;
+      ];
+      break;
     case 15:
       listData = [
         { type: 'warn', content: '这里是警告事项.' },
-        { type: 'normal', content: '这里是普通事项.' },
+        { type: 'normal', content: '这里是普通事项好长啊。。....' },
+        { type: 'error', content: '这里是错误事项.' },
+        { type: 'error', content: '这里是错误事项.' },
         { type: 'error', content: '这里是错误事项.' },
         { type: 'error', content: '这里是错误事项.' }
-      ]; break;
+      ];
+      break;
   }
-  
   return listData;
+}
 
-}
-function onChange(value) {
-  console.log('change');
-}
-function onTypeChange(type) {
-  console.log('Type change: %s.', type);
+function getMonthData(value) {
+  if (value.getMonth() === 8) {
+    return 1394;
+  }
+  return 0;
 }
 
 ReactDOM.render(
-  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}><Calendar getDateData={getDateData} onChange={onChange} onTypeChange={onTypeChange} type="date" /></div>
+  <Calendar type="date" getDateData={getDateData} getMonthData={getMonthData} />
 , document.getElementById('components-calendar-demo-basic'));
 ````

components/calendar/demo/card.md

@@ -1,8 +1,8 @@
-# 全屏
+# 卡片模式
 
-- order: 3
+- order: 0
 
-变大
+用于嵌套在空间有限的容器中。
 
 ---
 
@@ -16,34 +16,38 @@ function getDateData(value) {
       listData = [
         { type: 'warn', content: '这里是警告事项.' },
         { type: 'normal', content: '这里是普通事项.' }
-      ]; break;
+      ];
+      break;
     case 10:
       listData = [
         { type: 'warn', content: '这里是警告事项.' },
         { type: 'normal', content: '这里是普通事项.' },
         { type: 'error', content: '这里是错误事项.' }
-      ]; break;
+      ];
+      break;
     case 15:
       listData = [
         { type: 'warn', content: '这里是警告事项.' },
-        { type: 'normal', content: '这里是普通事项好长啊。。....' },
-        { type: 'error', content: '这里是错误事项.' },
-        { type: 'error', content: '这里是错误事项.' },
+        { type: 'normal', content: '这里是普通事项.' },
         { type: 'error', content: '这里是错误事项.' },
         { type: 'error', content: '这里是错误事项.' }
-      ]; break;
+      ];
+      break;
   }
   return listData;
 }
-function getMonthData(value) {
-  if (value.getMonth() === 8) {
-    return 1394;
-  }
-  return 0;
+
+function onChange(value) {
+  console.log('change');
 }
+
+function onTypeChange(type) {
+  console.log('Type change: %s.', type);
+}
+
 ReactDOM.render(
-  <Calendar fullscreen={true} type={'date'} getDateData={getDateData} getMonthData={getMonthData} />
-, document.getElementById('components-calendar-demo-fullscreen'));
+  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+    <Calendar fullscreen={false} type="date" getDateData={getDateData} onChange={onChange} onTypeChange={onTypeChange} />
+  </div>
+, document.getElementById('components-calendar-demo-card'));
 ````
-
-

components/calendar/index.jsx

@@ -121,6 +121,7 @@ class NoticeCalendar extends Component {
     );
   }
 }
+
 NoticeCalendar.propTypes = {
   monthCellRender: PropTypes.func,
   dateCellRender: PropTypes.func,
@@ -139,7 +140,7 @@ NoticeCalendar.defaultProps = {
   locale: CalendarLocale,
   getMonthData: noop,
   getDateData: noop,
-  fullscreen: false,
+  fullscreen: true,
   prefixCls: PREFIX_CLS,
   onChange: noop,
   onTypeChange: noop,

components/calendar/index.md

@@ -1,16 +1,18 @@
 # Calendar
 
 - category: Components
+- type: 展示
 - chinese: 日历
 - cols: 1
 
 ---
 
-可以显示代办事项的日历。
+按照日历形式展示数据的容器。
 
 ## 何时使用
 
-可以显示内容的日历。
+当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
+
 
 ## API
 
@@ -20,8 +22,8 @@
 
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 展示日期           | gregorian-calendar object   | 当前日期        |
-| fullscreen  | 是否全屏显示    | bool   | false           |
+| value        | 展示日期       | gregorian-calendar object   | 当前日期        |
+| fullscreen   | 是否全屏显示    | bool   | true           |
 | getDateData  | 获取日的显示数据    | function   | 无           |
 | getMonthData       | 获取月的显示数据 | function   | 无  |
 | dateCellRendar  | 自定义渲染日期单元格    | function   | 无           |

style/components/calendar/NoteList.less

@@ -17,7 +17,7 @@
       > span:first-child {
         font-size: 9px;
         margin-right: 4px;
-      } 
+      }
     }
 
     &-node-gray {

style/components/calendar/Notes.less

@@ -29,7 +29,7 @@
   }
 
   &-date {
-    width: 20px; 
+    width: 20px;
     height: 20px;
     line-height: 20px;
   }

style/components/calendar/index.less

@@ -17,13 +17,18 @@
       padding: 11px 16px 11px 0;
       text-align: right;
 
+      .ant-select {
+        text-align: left;
+      }
+
       .ant-radio-group {
-        margin-left: 10px;
+        margin-left: 8px;
+        text-align: left;
       }
 
       label.ant-radio-button {
         height: 22px;
-        line-height: 22px;
+        line-height: 20px;
         padding: 0 10px;
       }
     }
@@ -44,7 +49,7 @@
       max-width: 100%;
       background-color: transparent;
       width: 100%;
-      height: 235px;
+      height: 246px;
     }
 
     table, td, th, td {
@@ -175,14 +180,12 @@
     }
 
     &-notes-wrapper {
-      position: absolute; 
+      position: absolute;
       width: 100%;
       left:0;
       bottom: -9px;
     }
   }
-  
-  
 
   &-fullscreen {
     .@{notice-calendar-prefix-cls} {
@@ -191,12 +194,14 @@
         table-layout: fixed;
       }
       &-header {
+        .ant-radio-group {
+          margin-left: 16px;
+        }
         label.ant-radio-button {
           height: 28px;
-          line-height: 28px;
+          line-height: 26px;
         }
       }
-
       &-fullscreen-month,
       &-fullscreen-date {
         margin: 0 4px;
@@ -206,22 +211,24 @@
         padding:4px 8px;
         text-align: right;
         border-top: 2px solid #eee;
+        transition: background 0.3s ease;
 
         &:hover {
           background: tint(@primary-color, 90%);
           cursor: pointer;
         }
       }
-      
+
       &-column-header {
         text-align: right;
         padding-right: 12px;
+        padding-bottom: 5px;
       }
       &-cell {
         padding: 0;
       }
       &-month-panel-selected-cell .@{notice-calendar-prefix-cls}-fullscreen-month {
-        background-color: tint(@primary-color, 90%); 
+        background-color: tint(@primary-color, 90%);
         color: @text-color;
       }
       &-month-panel-selected-cell .@{notice-calendar-prefix-cls}-fullscreen-month,
@@ -231,12 +238,12 @@
         color: @primary-color;
       }
 
-      &-last-month-cell .@{notice-calendar-prefix-cls}-fullscreen-date, 
+      &-last-month-cell .@{notice-calendar-prefix-cls}-fullscreen-date,
       &-next-month-btn-day .@{notice-calendar-prefix-cls}-fullscreen-date {
         color: #ccc;
       }
       &-note-list-wrapper {
-        height: 90px; 
+        height: 90px;
         overflow-y: auto;
       }
       &-notes-month {
@@ -248,4 +255,4 @@
     }
   }
 
-}
+}