fix&improve

components/calendar/Constants.js

@@ -0,0 +1,3 @@
+export default {
+  PREFIX_CLS: 'ant-calendar',
+};

components/calendar/NoteList.jsx

@@ -0,0 +1,27 @@
+import React, {PropTypes, Component} from 'react';
+import {PREFIX_CLS} from './Constants';
+
+class NoteList extends Component {
+  render() {
+    const {listdata, prefixCls} = this.props;
+
+    if (!listdata || listdata === 0) return null;
+
+    return (
+      <ul className={prefixCls}>
+        { listdata.map(function (item, index) {
+          return <li key={`list-${index}`}><span className={`${prefixCls}-node-${item.type}`}>●</span>{ item.content }</li>;
+        }) }
+      </ul>
+    );
+  }
+}
+NoteList.propTypes = {
+  listdata: PropTypes.array,
+  prefixCls: PropTypes.string,
+};
+NoteList.defaultProps = {
+  prefixCls: `${PREFIX_CLS}-notes-list`,
+};
+
+export default NoteList;

components/calendar/Notes.jsx

@@ -0,0 +1,44 @@
+import React, {PropTypes, Component} from 'react';
+import NoteList from './NoteList';
+import Tooltip from '../tooltip';
+import {PREFIX_CLS} from './Constants';
+
+class Notes extends Component {
+  render() {
+    const {listdata, threshold, prefixCls} = this.props;
+
+    const classNames = [prefixCls];
+    let items;
+    if (listdata.length > threshold) {
+      items = new Array(threshold).fill('gray');
+      classNames.push(`${prefixCls}-overflow`);
+    } else {
+      items = listdata.map(item => item.type);
+    }
+    const el = (<div className={classNames.join(' ')}>
+      {
+        items.map((type, i) => (
+          <span key={`item-${i}`}
+            className={`${prefixCls}-node-${type}`}>●</span>
+          )
+        )
+      }
+    </div>);
+
+    return (
+      <Tooltip placement="right" trigger={['hover']} overlay={<NoteList listdata={listdata} />}>{el}</Tooltip>
+    );
+  }
+}
+Notes.propTypes = {
+  listdata: PropTypes.array,
+  threshold: PropTypes.number,
+  prefixCls: PropTypes.string,
+};
+Notes.defaultProps = {
+  listdata: null,
+  threshold: 3,
+  prefixCls: `${PREFIX_CLS}-notes`,
+};
+
+export default Notes;

components/calendar/demo/fullscreen.md

@@ -10,7 +10,6 @@
 import { Calendar } from 'antd';
 
 function getDateData(value) {
-
   let listdata;
   switch (value.getDayOfMonth()) {
     case 8:
@@ -32,18 +31,14 @@ function getDateData(value) {
         { type: 'error', content: '这里是错误事项.' }
       ]; break;
   }
-  
   return listdata;
-
 }
-
 function getMonthData(value) {
   if (value.getMonth() === 8) {
     return 1394;
   }
   return 0;
 }
-
 ReactDOM.render(
   <Calendar fullscreen={true} getDateData={getDateData} getMonthData={getMonthData} />
 , document.getElementById('components-calendar-demo-fullscreen'));

components/calendar/index.jsx

@@ -1,136 +1,62 @@
 import React, {PropTypes, Component} from 'react';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
-import Tooltip from 'rc-tooltip';
-import 'rc-tooltip/assets/bootstrap.css';
-import 'rc-calendar/assets/index.css';
+import Notes from './Notes';
+import NoteList from './NoteList';
+import {PREFIX_CLS} from './Constants';
 
 function noop () { return null; }
 
-class NoteList extends Component {
-  render() {
-    const {listdata, prefixCls} = this.props;
-
-    if (!listdata || listdata === 0) return null;
-
-    return (
-      <ul className={prefixCls}>
-        { listdata.map(function (item, index) {
-          return <li key={`list-${index}`}><span className={`${prefixCls}-node-${item.type}`}>●</span>{ item.content }</li>;
-        }) }
-      </ul>
-    );
-  }
-}
-NoteList.propTypes = {
-  listdata: PropTypes.array,
-  prefixCls: PropTypes.string,
-};
-NoteList.defaultProps = {
-  prefixCls: 'calendar-notes-list'
-};
-
-class Notes extends Component {
-  constructor(props) {
-    super();
-  }
-  type2class(type) {
-    return type;
-  }
-  render() {
-    const {listdata, threshold, prefixCls} = this.props;
-
-    if (!listdata || listdata.length === 0) return null;
-
-    const classNames = [prefixCls];
-    let items;
-    if (listdata.length > threshold) {
-      items = new Array(threshold).fill('gray');
-      classNames.push(`${prefixCls}-overflow`);
-    } else {
-      items = listdata.map(item => item.type);
-    }
-    const el = (<div className={classNames.join(' ')}>
-      { items.map(function (type, i) {
-        return (<span key={`item-${i}`} className={`${prefixCls}-node-${this.type2class(type)}`}>●</span>);
-      }.bind(this)) }
-    </div>);
-
-    return (
-      <Tooltip placement="right" trigger={['hover']} overlay={<NoteList listdata={listdata} />}>{el}</Tooltip>
-    );
-  }
-}
-Notes.propTypes = {
-  listdata: PropTypes.array,
-  threshold: PropTypes.number,
-  prefixCls: PropTypes.string,
-};
-Notes.defaultProps = {
-  listdata: null,
-  threshold: 3,
-  prefixCls: 'calendar-notes',
-};
-
-class MonthCellNoteNum extends Component {
-  render() {
-    const {num} = this.props;
-    return (
-      <div className="rc-calendar-month-cell-notes">
-        <section>{num}</section>
-        <span>待办事项数</span>
-      </div>
-    );
-  }
-}
-MonthCellNoteNum.propTypes = {
-  num: PropTypes.number,
-  prefixCls: PropTypes.string,
-};
-MonthCellNoteNum.defaultProps = {
-  num: 0,
-  prefixCls: 'calendar-notes',
-};
-
 function zerofixed (v) {
   if (v < 10) return '0' + v;
   return v + '';
 }
 
+const MonthCellNoteNum = ({num, prefixCls}) => {
+  return (
+    <div className={`${prefixCls}-month-cell`}>
+      <section>{num}</section>
+      <span>待办事项数</span>
+    </div>
+  );
+};
+
 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 (
-        <a className="rc-calendar-month-panel-month">
+        <a className={`${prefixCls}-month-panel-month`}>
           <span>{locale.format.shortMonths[month]}</span>
-          <MonthCellNoteNum num={noteNum} />
+          <MonthCellNoteNum num={noteNum} prefixCls={`${prefixCls}-notes`} />
         </a>
       );
     }
 
     return (
-      <a className="rc-calendar-month-panel-month">{locale.format.shortMonths[month]}</a>
+      <a className={`${prefixCls}-month-panel-month`}>{locale.format.shortMonths[month]}</a>
     );
   }
   fullscreenDateCellRender(value) {
+    const prefixCls = this.props.prefixCls;
     let listdata = this.props.getDateData(value);
-
     return (
-      <span className="rc-calendar-date calendar-notes-date-full">
+      <span className={`${prefixCls}-date ${prefixCls}-notes-date-full`}>
         <span>{ zerofixed(value.getDayOfMonth()) }</span>
         <NoteList listdata={listdata} />
       </span>
     );
   }
   dateCellRender(value) {
-    const el = (<span className="rc-calendar-date calendar-notes-date">{ zerofixed(value.getDayOfMonth()) }</span>);
+    const prefixCls = this.props.prefixCls;
+    const el = (<span className={`${prefixCls}-date ${prefixCls}-notes-date`}>{ zerofixed(value.getDayOfMonth()) }</span>);
     const listdata = this.props.getDateData(value);
     return (
       <div style={{position: 'relative', height: 32}}>
         { el }
-        { <Notes listdata={listdata} /> }
+        { (listdata && listdata.length > 0) ? <Notes listdata={listdata} /> : null }
       </div>
     );
   }
@@ -156,13 +82,14 @@ NoticeCalendar.propTypes = {
   getDateData: PropTypes.func,
   fullscreen: PropTypes.bool,
   locale: PropTypes.object,
+  prefixCls: PropTypes.string,
 };
 NoticeCalendar.defaultProps = {
   locale: CalendarLocale,
   getMonthData: noop,
   getDateData: noop,
   fullscreen: false,
+  prefixCls: PREFIX_CLS,
 };
 
-
 export default NoticeCalendar;

components/calendar/index.md

@@ -20,7 +20,7 @@
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
 | value        | 展示日期           | gregorian-calendar object   | 当前日期        |
-| fullscrenn  | 是否全屏显示    | bool   | false           |
+| fullscreen  | 是否全屏显示    | bool   | false           |
 | getDateData  | 获取日的显示数据    | function   | 无           |
 | getMonthData       | 获取月的显示数据 | function   | 无  |
 | dateCellRendar  | 自定义渲染日期单元格    | function   | 无           |

style/components/calendar.less

@@ -1,105 +1,3 @@
-div.rc-calendar-full { width: 280px; }
-div.rc-calendar-fullscreen { width: 100%; }
-
-.rc-calendar-fullscreen {
-  .rc-calendar-table {
-    table-layout: fixed;
-  }
-  
-  .rc-calendar-month-cell-notes {
-    text-align: center;
-    color: #666;
-
-    > section {
-      font-size: 24px;
-    }
-  }
-
-}
-
-.calendar-notes {
-  height: 9px;
-  line-height: 8px;
-  text-align: center;
-  overflow: hidden;
-  border-radius: 4px;
-  bottom: -5px;
-  left: 4px;
-  font-size: 8px;
-  margin: auto;
-  width: 19px;
-  cursor: pointer;
-
-  &-overflow {
-    border: 1px solid #d9d9d9;
-  }
-
-  span&-node-gray {
-    color: #ccc;
-  }
-  span&-node-warn {
-    color: #fac450;
-  }
-  span&-node-normal {
-    color: #2db7f5;
-  }
-  span&-node-error {
-    color: #f60;
-  }
-
-  &-date {
-    width: 20px; 
-    height: 20px;
-    line-height: 20px;
-  }
-}
-
-span.calendar-notes-date-full {
-  overflow: auto;
-  padding: 0 8px 8px 8px;
-}
-
-.calendar-notes-list {
-  list-style: none;
-  text-align: left;
-  margin: 0;
-  padding: 0;
- 
-
-  & * { vertical-align: middle; }
-
-  > li {
-    color: #999;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    > span:first-child {
-    font-size: 9px;
-    margin-right: 4px;
-  } 
-  }
-
-  &-node-gray {
-    color: #ccc;
-  }
-  &-node-warn {
-    color: #fac450;
-  }
-  &-node-normal {
-    color: #2db7f5;
-  }
-  &-node-error {
-    color: #f60;
-  }
-}
-
-.rc-tooltip {
-  .rc-tooltip-inner {
-    padding: 8px 12px;
-  }
-  
-}
-
-
-
+@import "calendar/index";
+@import "calendar/NoteList";
+@import "calendar/Notes";

style/components/calendar/NoteList.less

@@ -0,0 +1,36 @@
+.@{calendar-prefix-cls}-notes {
+  &-list {
+    list-style: none;
+    text-align: left;
+    margin: 0;
+    padding: 0;
+   
+
+    & * { vertical-align: middle; }
+
+    > li {
+      color: #999;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      > span:first-child {
+      font-size: 9px;
+      margin-right: 4px;
+    } 
+    }
+
+    &-node-gray {
+      color: #ccc;
+    }
+    &-node-warn {
+      color: #fac450;
+    }
+    &-node-normal {
+      color: #2db7f5;
+    }
+    &-node-error {
+      color: #f60;
+    }
+  }
+}

style/components/calendar/Notes.less

@@ -0,0 +1,37 @@
+.@{calendar-prefix-cls}-notes {
+  height: 9px;
+  line-height: 8px;
+  text-align: center;
+  overflow: hidden;
+  border-radius: 4px;
+  bottom: -5px;
+  left: 4px;
+  font-size: 8px;
+  margin: auto;
+  width: 19px;
+  cursor: pointer;
+
+  &-overflow {
+    border: 1px solid #d9d9d9;
+  }
+
+  span&-node-gray {
+    color: #ccc;
+  }
+  span&-node-warn {
+    color: #fac450;
+  }
+  span&-node-normal {
+    color: #2db7f5;
+  }
+  span&-node-error {
+    color: #f60;
+  }
+
+  &-date {
+    width: 20px; 
+    height: 20px;
+    line-height: 20px;
+  }
+
+}

style/components/calendar/index.less

@@ -0,0 +1,96 @@
+.@{calendar-prefix-cls}-header{
+  &-switcher {
+    margin-top: 4px;
+    margin-right: 8px;
+    float: right;
+    display: inline-block;
+    > span {
+      float: left;
+      height: 24px;
+      line-height: 24px;
+      border: 1px solid #d9d9d9;
+      padding: 0 10px;
+      color: #666;
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        border-right: none;
+      }
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border-left: none;
+      }
+      &.normal:hover {
+        border-color: #23c0fa;
+        box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
+        cursor: pointer;
+      }
+      &.focus {
+        border-color: #3fc7fa;
+        background-color: #3fc7fa;
+        color: #fff;
+      }
+    }
+  } 
+
+  .rc-select-selection--single {
+    height: 24px;
+    .rc-select-selection__rendered {
+      line-height: 24px;
+    }
+  }
+} 
+
+.@{calendar-prefix-cls}-fullscreen {
+  width: 100%;
+
+  .@{calendar-prefix-cls} {
+    &-table {
+      table-layout: fixed;
+    }  
+    &-header {
+      border-bottom: none;
+    }
+    &-column-header {
+      text-align: right; padding-right: 12px;
+    }
+    &-cell { padding:0; }
+    &-date,
+    &-month-panel-month {
+      display: block;
+      height: 116px; 
+      width: auto;
+      border-radius: 0; 
+      margin: 0 4px;
+      border: none;
+      border-top: 2px solid #eee;
+      text-align: right;
+      padding-right: 8px;
+
+      &:hover { color: inherit; }
+    }
+    &-today .@{calendar-prefix-cls}-date,
+    &-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
+      border-top-color: #3FC7FA;
+      color: #3FC7FA;
+      background: none;
+    }
+    &-selected-day .@{calendar-prefix-cls}-date,
+    &-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
+      background-color: #ebfaff; 
+    }
+    &-notes-month-cell {
+      text-align: center!important;
+      color: #666;
+
+      > section {
+        font-size: 24px;
+      }
+    }
+    &-notes-date-full {
+      overflow: auto;
+      padding: 0 8px 8px 8px;
+    }
+  }
+}