Merge pull request #503 from ant-design/feature-calendar

add components/calendar

components/calendar/Constants.js

+export default {
+  PREFIX_CLS: 'ant-calendar',
+};

components/calendar/NoteList.jsx

+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

+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/basic.md

+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function getDateData(value) {
+
+  let 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: '这里是错误事项.' }
+      ]; break;
+  }
+  
+  return listData;
+
+}
+
+
+ReactDOM.render(
+  <Calendar getDateData={getDateData} />
+, document.getElementById('components-calendar-demo-basic'));
+````

components/calendar/demo/fullscreen.md

+# 全屏
+
+- order: 3
+
+变大
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function getDateData(value) {
+  let 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: '这里是错误事项.' }
+      ]; 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

+import React, {PropTypes, Component} from 'react';
+import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
+import FullCalendar from 'rc-calendar/lib/FullCalendar';
+import Notes from './Notes';
+import NoteList from './NoteList';
+import {PREFIX_CLS} from './Constants';
+
+function noop () { return null; }
+
+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={`${prefixCls}-month-panel-month`}>
+          <span>{locale.format.shortMonths[month]}</span>
+          <MonthCellNoteNum num={noteNum} prefixCls={`${prefixCls}-notes`} />
+        </a>
+      );
+    }
+    return (
+      <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={`${prefixCls}-date ${prefixCls}-notes-date-full`}>
+        <span>{ zerofixed(value.getDayOfMonth()) }</span>
+        <NoteList listData={listData} />
+      </span>
+    );
+  }
+  dateCellRender(value) {
+    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 }
+        { (listData && listData.length > 0) ? <Notes listData={listData} /> : null }
+      </div>
+    );
+  }
+  render() {
+    const props = this.props;
+    const {fullscreen, monthCellRender, dateCellRender, fullscreenDateCellRender} = props;
+
+    const _monthCellRender = monthCellRender ? monthCellRender : this.monthCellRender;
+    const _dateCellRender = dateCellRender ? dateCellRender : this.dateCellRender;
+    const _fullscreenDateCellRender = fullscreenDateCellRender ? fullscreenDateCellRender : this.fullscreenDateCellRender;
+
+    return (<FullCalendar
+      {...props}
+      monthCellRender={ fullscreen ? _monthCellRender.bind(this) : null }
+      dateCellRender={ fullscreen ? _fullscreenDateCellRender.bind(this) : _dateCellRender.bind(this) }/>);
+  }
+}
+NoticeCalendar.propTypes = {
+  monthCellRender: PropTypes.func,
+  dateCellRender: PropTypes.func,
+  fullDateCellRender: PropTypes.func,
+  getMonthData: PropTypes.func,
+  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

+# Calendar
+
+- category: Components
+- chinese: 日历
+- cols: 1
+
+---
+
+可以显示代办事项的日历。
+
+## 何时使用
+
+可以显示内容的日历。
+
+## API
+
+```html
+<Calendar getDateData={getDateDataMethod} getMonthData={getMonthDataMethod} />
+```
+
+| 参数         | 说明           | 类型     | 默认值       |
+|--------------|----------------|----------|--------------|
+| value        | 展示日期           | gregorian-calendar object   | 当前日期        |
+| fullscreen  | 是否全屏显示    | bool   | false           |
+| getDateData  | 获取日的显示数据    | function   | 无           |
+| getMonthData       | 获取月的显示数据 | function   | 无  |
+| dateCellRendar  | 自定义渲染日期单元格    | function   | 无           |
+| fullscreenDateCellRendar  | 自定义渲染日期单元格(全屏)    | function   | 无           |
+| monthCellRendar       | 自定义渲染月单元格 | function   | 无  |
+| locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |

index.js

@@ -58,6 +58,7 @@ const antd = {
   Spin: require('./components/spin'),
   Form: require('./components/form').Form,
   Input: require('./components/form').Input,
+  Calendar: require('./components/calendar'),
 };
 
 antd.version = require('./package.json').version;

style/components/calendar.less

+@import "calendar/index";
+@import "calendar/NoteList";
+@import "calendar/Notes";
\ No newline at end of file

style/components/calendar/NoteList.less

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

style/components/calendar/Notes.less

+.@{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 @btn-default-border;
+  }
+
+  span&-node-gray {
+    color: #ccc;
+  }
+  span&-node-warn {
+    color: @warning-color;
+  }
+  span&-node-normal {
+    color: @primary-color;
+  }
+  span&-node-error {
+    color: @error-color;
+  }
+
+  &-date {
+    width: 20px; 
+    height: 20px;
+    line-height: 20px;
+  }
+
+}

style/components/calendar/index.less

+.@{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 @btn-default-border;
+      padding: 0 10px;
+      color: @text-color;
+      &: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: @primary-color;
+        box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
+        cursor: pointer;
+      }
+      &.focus {
+        border-color: @primary-color;
+        background-color: @link-hover-color;
+        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;
+      color: @text-color;
+    }
+    &-today .@{calendar-prefix-cls}-date,
+    &-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
+      border-top-color: @primary-color;
+      color: @primary-color;
+      background: none;
+    }
+    &-selected-day .@{calendar-prefix-cls}-date,
+    &-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
+      background-color: tint(@primary-color, 90%); 
+    }
+    &-notes-month-cell {
+      text-align: center!important;
+      color: @text-color;
+
+      > section {
+        font-size: 24px;
+      }
+    }
+    &-notes-date-full {
+      overflow: auto;
+      padding: 0 8px 8px 8px;
+    }
+  }
+}

style/components/index.less

@@ -35,3 +35,4 @@
 @import "badge";
 @import "timeline";
 @import "spin";
+@import "calendar";