From 66a271d93a5111704ac00dcd8dffe7b5fe878f9c Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Tue, 13 Mar 2018 22:40:13 +0800
Subject: [PATCH] add calendar

---
 components/_util/callMoment.js              |   4 +
 components/calendar/Constants.js            |   1 +
 components/calendar/Header.vue              | 130 ++++++++++
 components/calendar/demo/basic.md           |  26 ++
 components/calendar/demo/card.md            |  28 +++
 components/calendar/demo/notice-calendar.md | 103 ++++++++
 components/calendar/demo/select.md          |  46 ++++
 components/calendar/index.en-US.md          |  45 ++++
 components/calendar/index.vue               | 204 +++++++++++++++
 components/calendar/index.zh-CN.md          |  46 ++++
 components/calendar/locale/ar_EG.js         |   2 +
 components/calendar/locale/bg_BG.js         |   2 +
 components/calendar/locale/ca_ES.js         |   2 +
 components/calendar/locale/cs_CZ.js         |   2 +
 components/calendar/locale/de_DE.js         |   2 +
 components/calendar/locale/el_GR.js         |   2 +
 components/calendar/locale/en_GB.js         |   2 +
 components/calendar/locale/en_US.js         |   2 +
 components/calendar/locale/es_ES.js         |   2 +
 components/calendar/locale/et_EE.js         |   2 +
 components/calendar/locale/fa_IR.js         |   2 +
 components/calendar/locale/fi_FI.js         |   2 +
 components/calendar/locale/fr_BE.js         |   2 +
 components/calendar/locale/fr_FR.js         |   2 +
 components/calendar/locale/is_IS.js         |   2 +
 components/calendar/locale/it_IT.js         |   2 +
 components/calendar/locale/ja_JP.js         |   2 +
 components/calendar/locale/ko_KR.js         |   2 +
 components/calendar/locale/ku_IQ.js         |   2 +
 components/calendar/locale/nb_NO.js         |   2 +
 components/calendar/locale/nl_BE.js         |   2 +
 components/calendar/locale/nl_NL.js         |   2 +
 components/calendar/locale/pl_PL.js         |   2 +
 components/calendar/locale/pt_BR.js         |   2 +
 components/calendar/locale/pt_PT.js         |   2 +
 components/calendar/locale/ru_RU.js         |   2 +
 components/calendar/locale/sk_SK.js         |   2 +
 components/calendar/locale/sr_RS.js         |   2 +
 components/calendar/locale/sv_SE.js         |   2 +
 components/calendar/locale/th_TH.js         |   2 +
 components/calendar/locale/tr_TR.js         |   2 +
 components/calendar/locale/uk_UA.js         |   2 +
 components/calendar/locale/vi_VN.js         |   2 +
 components/calendar/locale/zh_CN.js         |   2 +
 components/calendar/locale/zh_TW.js         |   2 +
 components/calendar/style/index.js          |   6 +
 components/calendar/style/index.less        | 266 ++++++++++++++++++++
 47 files changed, 975 insertions(+)
 create mode 100644 components/_util/callMoment.js
 create mode 100644 components/calendar/Constants.js
 create mode 100644 components/calendar/Header.vue
 create mode 100644 components/calendar/demo/basic.md
 create mode 100644 components/calendar/demo/card.md
 create mode 100644 components/calendar/demo/notice-calendar.md
 create mode 100644 components/calendar/demo/select.md
 create mode 100644 components/calendar/index.en-US.md
 create mode 100644 components/calendar/index.vue
 create mode 100644 components/calendar/index.zh-CN.md
 create mode 100644 components/calendar/locale/ar_EG.js
 create mode 100644 components/calendar/locale/bg_BG.js
 create mode 100644 components/calendar/locale/ca_ES.js
 create mode 100644 components/calendar/locale/cs_CZ.js
 create mode 100644 components/calendar/locale/de_DE.js
 create mode 100644 components/calendar/locale/el_GR.js
 create mode 100644 components/calendar/locale/en_GB.js
 create mode 100644 components/calendar/locale/en_US.js
 create mode 100644 components/calendar/locale/es_ES.js
 create mode 100644 components/calendar/locale/et_EE.js
 create mode 100644 components/calendar/locale/fa_IR.js
 create mode 100644 components/calendar/locale/fi_FI.js
 create mode 100644 components/calendar/locale/fr_BE.js
 create mode 100644 components/calendar/locale/fr_FR.js
 create mode 100644 components/calendar/locale/is_IS.js
 create mode 100644 components/calendar/locale/it_IT.js
 create mode 100644 components/calendar/locale/ja_JP.js
 create mode 100644 components/calendar/locale/ko_KR.js
 create mode 100755 components/calendar/locale/ku_IQ.js
 create mode 100644 components/calendar/locale/nb_NO.js
 create mode 100644 components/calendar/locale/nl_BE.js
 create mode 100644 components/calendar/locale/nl_NL.js
 create mode 100644 components/calendar/locale/pl_PL.js
 create mode 100644 components/calendar/locale/pt_BR.js
 create mode 100644 components/calendar/locale/pt_PT.js
 create mode 100644 components/calendar/locale/ru_RU.js
 create mode 100644 components/calendar/locale/sk_SK.js
 create mode 100644 components/calendar/locale/sr_RS.js
 create mode 100644 components/calendar/locale/sv_SE.js
 create mode 100644 components/calendar/locale/th_TH.js
 create mode 100644 components/calendar/locale/tr_TR.js
 create mode 100644 components/calendar/locale/uk_UA.js
 create mode 100644 components/calendar/locale/vi_VN.js
 create mode 100644 components/calendar/locale/zh_CN.js
 create mode 100644 components/calendar/locale/zh_TW.js
 create mode 100644 components/calendar/style/index.js
 create mode 100644 components/calendar/style/index.less

diff --git a/components/_util/callMoment.js b/components/_util/callMoment.js
new file mode 100644
index 000000000..3a3dc0ab9
--- /dev/null
+++ b/components/_util/callMoment.js
@@ -0,0 +1,4 @@
+// https://github.com/moment/moment/issues/3650
+export default function callMoment (moment, ...args) {
+  return (moment.default || moment)(...args)
+}
diff --git a/components/calendar/Constants.js b/components/calendar/Constants.js
new file mode 100644
index 000000000..6f34b98cb
--- /dev/null
+++ b/components/calendar/Constants.js
@@ -0,0 +1 @@
+export const PREFIX_CLS = 'ant-fullcalendar'
diff --git a/components/calendar/Header.vue b/components/calendar/Header.vue
new file mode 100644
index 000000000..02b87fb52
--- /dev/null
+++ b/components/calendar/Header.vue
@@ -0,0 +1,130 @@
+<script>
+import { PREFIX_CLS } from './Constants'
+import Select from '../select'
+import { Group, Button } from '../radio'
+import PropTypes from '@/components/_util/vue-types'
+import { initDefaultProps } from '@/components/_util/props-util'
+const Option = Select.Option
+
+export const HeaderProps = {
+  prefixCls: PropTypes.string,
+  locale: PropTypes.any,
+  fullscreen: PropTypes.boolean,
+  yearSelectOffset: PropTypes.number,
+  yearSelectTotal: PropTypes.number,
+  type: PropTypes.string,
+  // onValueChange: PropTypes.(value: moment.Moment) => void,
+  // onTypeChange: PropTypes.(type: string) => void,
+  value: PropTypes.any,
+}
+
+export default {
+  props: initDefaultProps(HeaderProps, {
+    prefixCls: `${PREFIX_CLS}-header`,
+    yearSelectOffset: 10,
+    yearSelectTotal: 20,
+  }),
+
+  // private calenderHeaderNode: HTMLDivElement;
+  methods: {
+    getYearSelectElement (year) {
+      const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this
+      const start = year - yearSelectOffset
+      const end = start + yearSelectTotal
+      const suffix = locale.year === '年' ? '年' : ''
+
+      const options = []
+      for (let index = start; index < end; index++) {
+        options.push(<Option key={`${index}`}>{index + suffix}</Option>)
+      }
+      return (
+        <Select
+          size={fullscreen ? 'default' : 'small'}
+          dropdownMatchSelectWidth={false}
+          class={`${prefixCls}-year-select`}
+          onChange={this.onYearChange}
+          value={String(year)}
+          getPopupContainer={() => this.calenderHeaderNode}
+        >
+          {options}
+        </Select>
+      )
+    },
+
+    getMonthsLocale (value) {
+      const current = value.clone()
+      const localeData = value.localeData()
+      const months = []
+      for (let i = 0; i < 12; i++) {
+        current.month(i)
+        months.push(localeData.monthsShort(current))
+      }
+      return months
+    },
+
+    getMonthSelectElement (month, months) {
+      const { prefixCls, fullscreen } = this
+      const options = []
+
+      for (let index = 0; index < 12; index++) {
+        options.push(<Option key={`${index}`}>{months[index]}</Option>)
+      }
+
+      return (
+        <Select
+          size={fullscreen ? 'default' : 'small'}
+          dropdownMatchSelectWidth={false}
+          class={`${prefixCls}-month-select`}
+          value={String(month)}
+          onChange={this.onMonthChange}
+          getPopupContainer={() => this.getCalenderHeaderNode}
+        >
+          {options}
+        </Select>
+      )
+    },
+
+    onYearChange  (year) {
+      const newValue = this.value.clone()
+      newValue.year(parseInt(year, 10))
+      this.$emit('valueChange', newValue)
+    },
+
+    onMonthChange (month) {
+      const newValue = this.value.clone()
+      newValue.month(parseInt(month, 10))
+      this.$emit('valueChange', newValue)
+    },
+
+    onTypeChange (e) {
+      this.$emit('typeChange', e.target.value)
+    },
+
+    getCalenderHeaderNode () {
+      return this.$refs.calenderHeaderNode
+    },
+  },
+
+  render () {
+    const { type, value, prefixCls, locale, fullscreen } = this
+    const yearSelect = this.getYearSelectElement(value.year())
+    const monthSelect = type === 'date'
+      ? this.getMonthSelectElement(value.month(), this.getMonthsLocale(value)) : null
+    const size = fullscreen ? 'default' : 'small'
+    const typeSwitch = (
+      <Group onChange={this.onTypeChange} value={type} size={size}>
+        <Button value='date'>{locale.month}</Button>
+        <Button value='month'>{locale.year}</Button>
+      </Group>
+    )
+
+    return (
+      <div class={`${prefixCls}-header`} ref='calenderHeaderNode'>
+        {yearSelect}
+        {monthSelect}
+        {typeSwitch}
+      </div>
+    )
+  },
+}
+</script>
\ No newline at end of file
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
new file mode 100644
index 000000000..956bc2621
--- /dev/null
+++ b/components/calendar/demo/basic.md
@@ -0,0 +1,26 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+一个通用的日历面板，支持年/月切换。
+
+## en-US
+
+A basic calendar component with Year/Month switch.
+
+````jsx
+import { Calendar } from 'antd';
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <Calendar onPanelChange={onPanelChange} />
+, mountNode);
+````
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
new file mode 100644
index 000000000..c355f2032
--- /dev/null
+++ b/components/calendar/demo/card.md
@@ -0,0 +1,28 @@
+---
+order: 2
+title:
+  zh-CN: 卡片模式
+  en-US: Card
+---
+
+## zh-CN
+
+用于嵌套在空间有限的容器中。
+
+## en-US
+
+Nested inside a container element for rendering in limited space.
+
+````jsx
+import { Calendar } from 'antd';
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
+  </div>
+, mountNode);
+````
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
new file mode 100644
index 000000000..508b513f6
--- /dev/null
+++ b/components/calendar/demo/notice-calendar.md
@@ -0,0 +1,103 @@
+---
+order: 1
+title:
+  zh-CN: 通知事项日历
+  en-US: Notice Calendar
+---
+
+## zh-CN
+
+一个复杂的应用示例，用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
+
+## en-US
+
+This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
+
+````jsx
+import { Calendar, Badge } from 'antd';
+
+function getListData(value) {
+  let listData;
+  switch (value.date()) {
+    case 8:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+      ]; break;
+    case 10:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+        { type: 'error', content: 'This is error event.' },
+      ]; break;
+    case 15:
+      listData = [
+        { type: 'warning', content: 'This is warning event' },
+        { type: 'success', content: 'This is very long usual event。。....' },
+        { type: 'error', content: 'This is error event 1.' },
+        { type: 'error', content: 'This is error event 2.' },
+        { type: 'error', content: 'This is error event 3.' },
+        { type: 'error', content: 'This is error event 4.' },
+      ]; break;
+    default:
+  }
+  return listData || [];
+}
+
+function dateCellRender(value) {
+  const listData = getListData(value);
+  return (
+    <ul className="events">
+      {
+        listData.map(item => (
+          <li key={item.content}>
+            <Badge status={item.type} text={item.content} />
+          </li>
+        ))
+      }
+    </ul>
+  );
+}
+
+function getMonthData(value) {
+  if (value.month() === 8) {
+    return 1394;
+  }
+}
+
+function monthCellRender(value) {
+  const num = getMonthData(value);
+  return num ? (
+    <div className="notes-month">
+      <section>{num}</section>
+      <span>Backlog number</span>
+    </div>
+  ) : null;
+}
+
+ReactDOM.render(
+  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, mountNode);
+````
+
+````css
+.events {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.events .ant-badge-status {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+.notes-month {
+  text-align: center;
+  font-size: 28px;
+}
+.notes-month section {
+  font-size: 28px;
+}
+````
diff --git a/components/calendar/demo/select.md b/components/calendar/demo/select.md
new file mode 100644
index 000000000..e4c18a183
--- /dev/null
+++ b/components/calendar/demo/select.md
@@ -0,0 +1,46 @@
+---
+order: 3
+title:
+  zh-CN: 选择功能
+  en-US: Selectable Calendar
+---
+
+## zh-CN
+
+一个通用的日历面板，支持年/月切换。
+
+## en-US
+
+A basic calendar component with Year/Month switch.
+
+````jsx
+import { Calendar, Alert } from 'antd';
+import moment from 'moment';
+
+class App extends React.Component {
+  state = {
+    value: moment('2017-01-25'),
+    selectedValue: moment('2017-01-25'),
+  }
+  onSelect = (value) => {
+    this.setState({
+      value,
+      selectedValue: value,
+    });
+  }
+  onPanelChange = (value) => {
+    this.setState({ value });
+  }
+  render() {
+    const { value, selectedValue } = this.state;
+    return (
+      <div>
+        <Alert message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`} />
+        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
new file mode 100644
index 000000000..c62097567
--- /dev/null
+++ b/components/calendar/index.en-US.md
@@ -0,0 +1,45 @@
+---
+category: Components
+type: Data Display
+cols: 1
+title: Calendar
+---
+
+Container for displaying data in calendar form.
+
+## When To Use
+
+When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
+
+## API
+
+**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `moment` correctly.
+
+```jsx
+// The default locale is en-US, if you want to use other locale, just set locale in entry file globaly.
+// import moment from 'moment';
+// import 'moment/locale/zh-cn';
+// moment.locale('zh-cn');
+
+<Calendar
+  dateCellRender={dateCellRender}
+  monthCellRender={monthCellRender}
+  onPanelChange={onPanelChange}
+  onSelect={onSelect}
+/>
+```
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
+| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
+| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |
+| fullscreen | Whether to display in full-screen | boolean | `true` |
+| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
+| mode | The display mode of the calendar | `month` \| `year` | `month` |
+| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |
+| value | The current selected date | [moment](http://momentjs.com/) | current date |
+| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
+| onSelect | Callback for when a date is selected | function(date: moment） | - |
diff --git a/components/calendar/index.vue b/components/calendar/index.vue
new file mode 100644
index 000000000..57f2a25a1
--- /dev/null
+++ b/components/calendar/index.vue
@@ -0,0 +1,204 @@
+<script>
+import PropTypes from '@/components/_util/vue-types'
+import BaseMixin from '@/components/_util/BaseMixin'
+import { getOptionProps, hasProp, initDefaultProps } from '@/components/_util/props-util'
+import * as moment from 'moment'
+import FullCalendar from '../vc-calendar/src/FullCalendar'
+import LocaleReceiver from '../locale-provider/LocaleReceiver'
+import { PREFIX_CLS } from './Constants'
+import Header from './Header'
+import callMoment from '../_util/callMoment'
+import enUS from './locale/en_US'
+
+export { HeaderProps } from './Header'
+
+function noop () { return null }
+
+function zerofixed (v) {
+  if (v < 10) {
+    return `0${v}`
+  }
+  return `${v}`
+}
+export const MomentType = {
+  type: Object,
+  validator: function (value) {
+    return moment.isMoment(value)
+  },
+}
+export const CalendarMode = PropTypes.oneOf(['month', 'year'])
+
+export const CalendarProps = () => ({
+  prefixCls: PropTypes.string,
+  value: MomentType,
+  defaultValue: MomentType,
+  mode: CalendarMode,
+  fullscreen: PropTypes.bool,
+  dateCellRender: PropTypes.func,
+  monthCellRender: PropTypes.func,
+  dateFullCellRender: PropTypes.func,
+  monthFullCellRender: PropTypes.func,
+  locale: PropTypes.any,
+  // onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
+  // onSelect?: (date?: moment.Moment) => void;
+  disabledDate: PropTypes.func,
+})
+
+export default {
+  mixins: [BaseMixin],
+  props: initDefaultProps(CalendarProps(), {
+    locale: {},
+    fullscreen: true,
+    prefixCls: PREFIX_CLS,
+    mode: 'month',
+  }),
+
+  data () {
+    const value = this.value || this.defaultValue || callMoment(moment)
+    if (!moment.isMoment(value)) {
+      throw new Error(
+        'The value/defaultValue of Calendar must be a moment object, ',
+      )
+    }
+    return {
+      sValue: value,
+      sMode: this.mode,
+    }
+  },
+  watch: {
+    value (val) {
+      this.setState({
+        sValue: val,
+      })
+    },
+    mode (val) {
+      this.setState({
+        sMode: val,
+      })
+    },
+  },
+  methods: {
+    monthCellRender (value) {
+      const { prefixCls, monthCellRender = noop } = this
+      return (
+        <div class={`${prefixCls}-month`}>
+          <div class={`${prefixCls}-value`}>
+            {value.localeData().monthsShort(value)}
+          </div>
+          <div class={`${prefixCls}-content`}>
+            {monthCellRender(value)}
+          </div>
+        </div>
+      )
+    },
+
+    dateCellRender (value) {
+      const { prefixCls, dateCellRender = noop } = this
+      return (
+        <div class={`${prefixCls}-date`}>
+          <div class={`${prefixCls}-value`}>
+            {zerofixed(value.date())}
+          </div>
+          <div class={`${prefixCls}-content`}>
+            {dateCellRender(value)}
+          </div>
+        </div>
+      )
+    },
+
+    setValue (value, way) {
+      if (!hasProp(this, 'value')) {
+        this.setState({ sValue: value })
+      }
+      if (way === 'select') {
+        this.$emit('select', value)
+      } else if (way === 'changePanel') {
+        this.$emit('panelChange', value, this.sMode)
+      }
+    },
+
+    setType  (type) {
+      const mode = (type === 'date') ? 'month' : 'year'
+      if (this.sMode !== mode) {
+        this.setState({ sMode: mode })
+        this.$emit('panelChange', this.sValue, this.sMode)
+      }
+    },
+
+    onHeaderValueChange  (value) {
+      this.setValue(value, 'changePanel')
+    },
+
+    onHeaderTypeChange  (type) {
+      this.setType(type)
+    },
+
+    onPanelChange (value, mode) {
+      this.$emit('panelChange', value, mode)
+    },
+
+    onSelect  (value) {
+      this.setValue(value, 'select')
+    },
+
+    renderCalendar  (locale, localeCode) {
+      const props = getOptionProps(this)
+      const { sValue: value, sMode: mode, $listeners } = this
+      if (value && localeCode) {
+        value.locale(localeCode)
+      }
+      const { prefixCls, fullscreen, dateFullCellRender, monthFullCellRender } = props
+      const type = (mode === 'year') ? 'month' : 'date'
+
+      let cls = ''
+      if (fullscreen) {
+        cls += (` ${prefixCls}-fullscreen`)
+      }
+
+      const monthCellRender = monthFullCellRender || this.monthCellRender
+      const dateCellRender = dateFullCellRender || this.dateCellRender
+      const fullCalendarProps = {
+        props: {
+          ...props,
+          Select: noop,
+          locale: locale.lang,
+          type: type,
+          prefixCls: prefixCls,
+          showHeader: false,
+          value: value,
+          monthCellRender: monthCellRender,
+          dateCellRender: dateCellRender,
+        },
+        on: {
+          ...$listeners,
+          select: this.onSelect,
+        },
+      }
+      return (
+        <div class={cls}>
+          <Header
+            fullscreen={fullscreen}
+            type={type}
+            value={value}
+            locale={locale.lang}
+            prefixCls={prefixCls}
+            onTypeChange={this.onHeaderTypeChange}
+            onValueChange={this.onHeaderValueChange}
+          />
+          <FullCalendar {...fullCalendarProps}/>
+        </div>
+      )
+    },
+  },
+
+  render () {
+    return (
+      <LocaleReceiver
+        componentName='Calendar'
+        defaultLocale={enUS}
+        children={this.renderCalendar}
+      />
+    )
+  },
+}
+</script>
\ No newline at end of file
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
new file mode 100644
index 000000000..71e7ff66c
--- /dev/null
+++ b/components/calendar/index.zh-CN.md
@@ -0,0 +1,46 @@
+---
+category: Components
+type: Data Display
+subtitle: 日历
+cols: 1
+title: Calendar
+---
+
+按照日历形式展示数据的容器。
+
+## 何时使用
+
+当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
+
+## API
+
+**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
+
+```jsx
+// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
+// import moment from 'moment';
+// import 'moment/locale/zh-cn';
+// moment.locale('zh-cn');
+
+<Calendar
+  dateCellRender={dateCellRender}
+  monthCellRender={monthCellRender}
+  onPanelChange={onPanelChange}
+  onSelect={onSelect}
+/>
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
+| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
+| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
+| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
+| fullscreen | 是否全屏显示 | boolean | true |
+| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
+| mode | 初始模式，`month/year` | string | month |
+| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
+| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
+| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
+| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
+| onSelect | 点击选择日期回调 | function(date: moment） | 无 |
diff --git a/components/calendar/locale/ar_EG.js b/components/calendar/locale/ar_EG.js
new file mode 100644
index 000000000..f51f426ff
--- /dev/null
+++ b/components/calendar/locale/ar_EG.js
@@ -0,0 +1,2 @@
+import ar_EG from '../../date-picker/locale/ar_EG';
+export default ar_EG;
diff --git a/components/calendar/locale/bg_BG.js b/components/calendar/locale/bg_BG.js
new file mode 100644
index 000000000..c9dd46118
--- /dev/null
+++ b/components/calendar/locale/bg_BG.js
@@ -0,0 +1,2 @@
+import bg_BG from '../../date-picker/locale/bg_BG';
+export default bg_BG;
diff --git a/components/calendar/locale/ca_ES.js b/components/calendar/locale/ca_ES.js
new file mode 100644
index 000000000..25b2888ef
--- /dev/null
+++ b/components/calendar/locale/ca_ES.js
@@ -0,0 +1,2 @@
+import ca_ES from '../../date-picker/locale/ca_ES';
+export default ca_ES;
diff --git a/components/calendar/locale/cs_CZ.js b/components/calendar/locale/cs_CZ.js
new file mode 100644
index 000000000..bfba281a9
--- /dev/null
+++ b/components/calendar/locale/cs_CZ.js
@@ -0,0 +1,2 @@
+import cs_CZ from '../../date-picker/locale/cs_CZ';
+export default cs_CZ;
diff --git a/components/calendar/locale/de_DE.js b/components/calendar/locale/de_DE.js
new file mode 100644
index 000000000..652a9be31
--- /dev/null
+++ b/components/calendar/locale/de_DE.js
@@ -0,0 +1,2 @@
+import de_DE from '../../date-picker/locale/de_DE';
+export default de_DE;
diff --git a/components/calendar/locale/el_GR.js b/components/calendar/locale/el_GR.js
new file mode 100644
index 000000000..4d665092a
--- /dev/null
+++ b/components/calendar/locale/el_GR.js
@@ -0,0 +1,2 @@
+import el_GR from '../../date-picker/locale/el_GR';
+export default el_GR;
diff --git a/components/calendar/locale/en_GB.js b/components/calendar/locale/en_GB.js
new file mode 100644
index 000000000..0d081144e
--- /dev/null
+++ b/components/calendar/locale/en_GB.js
@@ -0,0 +1,2 @@
+import en_GB from '../../date-picker/locale/en_GB';
+export default en_GB;
diff --git a/components/calendar/locale/en_US.js b/components/calendar/locale/en_US.js
new file mode 100644
index 000000000..6847cc35d
--- /dev/null
+++ b/components/calendar/locale/en_US.js
@@ -0,0 +1,2 @@
+import en_US from '../../date-picker/locale/en_US';
+export default en_US;
diff --git a/components/calendar/locale/es_ES.js b/components/calendar/locale/es_ES.js
new file mode 100644
index 000000000..6270b85ad
--- /dev/null
+++ b/components/calendar/locale/es_ES.js
@@ -0,0 +1,2 @@
+import es_ES from '../../date-picker/locale/es_ES';
+export default es_ES;
diff --git a/components/calendar/locale/et_EE.js b/components/calendar/locale/et_EE.js
new file mode 100644
index 000000000..47ad3e77f
--- /dev/null
+++ b/components/calendar/locale/et_EE.js
@@ -0,0 +1,2 @@
+import et_EE from '../../date-picker/locale/et_EE';
+export default et_EE;
diff --git a/components/calendar/locale/fa_IR.js b/components/calendar/locale/fa_IR.js
new file mode 100644
index 000000000..9aa9d1a34
--- /dev/null
+++ b/components/calendar/locale/fa_IR.js
@@ -0,0 +1,2 @@
+import fa_IR from '../../date-picker/locale/fa_IR';
+export default fa_IR;
diff --git a/components/calendar/locale/fi_FI.js b/components/calendar/locale/fi_FI.js
new file mode 100644
index 000000000..b81ea8628
--- /dev/null
+++ b/components/calendar/locale/fi_FI.js
@@ -0,0 +1,2 @@
+import fi_FI from '../../date-picker/locale/fi_FI';
+export default fi_FI;
diff --git a/components/calendar/locale/fr_BE.js b/components/calendar/locale/fr_BE.js
new file mode 100644
index 000000000..89560fc1f
--- /dev/null
+++ b/components/calendar/locale/fr_BE.js
@@ -0,0 +1,2 @@
+import fr_BE from '../../date-picker/locale/fr_BE';
+export default fr_BE;
diff --git a/components/calendar/locale/fr_FR.js b/components/calendar/locale/fr_FR.js
new file mode 100644
index 000000000..98c62aa75
--- /dev/null
+++ b/components/calendar/locale/fr_FR.js
@@ -0,0 +1,2 @@
+import fr_FR from '../../date-picker/locale/fr_FR';
+export default fr_FR;
diff --git a/components/calendar/locale/is_IS.js b/components/calendar/locale/is_IS.js
new file mode 100644
index 000000000..a9524638e
--- /dev/null
+++ b/components/calendar/locale/is_IS.js
@@ -0,0 +1,2 @@
+import is_IS from '../../date-picker/locale/is_IS';
+export default is_IS;
diff --git a/components/calendar/locale/it_IT.js b/components/calendar/locale/it_IT.js
new file mode 100644
index 000000000..907792ffb
--- /dev/null
+++ b/components/calendar/locale/it_IT.js
@@ -0,0 +1,2 @@
+import it_IT from '../../date-picker/locale/it_IT';
+export default it_IT;
diff --git a/components/calendar/locale/ja_JP.js b/components/calendar/locale/ja_JP.js
new file mode 100644
index 000000000..05ebc1440
--- /dev/null
+++ b/components/calendar/locale/ja_JP.js
@@ -0,0 +1,2 @@
+import ja_JP from '../../date-picker/locale/ja_JP';
+export default ja_JP;
diff --git a/components/calendar/locale/ko_KR.js b/components/calendar/locale/ko_KR.js
new file mode 100644
index 000000000..dc0e5ebdb
--- /dev/null
+++ b/components/calendar/locale/ko_KR.js
@@ -0,0 +1,2 @@
+import ko_KR from '../../date-picker/locale/ko_KR';
+export default ko_KR;
diff --git a/components/calendar/locale/ku_IQ.js b/components/calendar/locale/ku_IQ.js
new file mode 100755
index 000000000..f491af31e
--- /dev/null
+++ b/components/calendar/locale/ku_IQ.js
@@ -0,0 +1,2 @@
+import ku_IQ from '../../date-picker/locale/ku_IQ';
+export default ku_IQ;
diff --git a/components/calendar/locale/nb_NO.js b/components/calendar/locale/nb_NO.js
new file mode 100644
index 000000000..f7417e06d
--- /dev/null
+++ b/components/calendar/locale/nb_NO.js
@@ -0,0 +1,2 @@
+import nb_NO from '../../date-picker/locale/nb_NO';
+export default nb_NO;
diff --git a/components/calendar/locale/nl_BE.js b/components/calendar/locale/nl_BE.js
new file mode 100644
index 000000000..7f36785fe
--- /dev/null
+++ b/components/calendar/locale/nl_BE.js
@@ -0,0 +1,2 @@
+import nl_BE from '../../date-picker/locale/nl_BE';
+export default nl_BE;
diff --git a/components/calendar/locale/nl_NL.js b/components/calendar/locale/nl_NL.js
new file mode 100644
index 000000000..cdf131aa3
--- /dev/null
+++ b/components/calendar/locale/nl_NL.js
@@ -0,0 +1,2 @@
+import nl_NL from '../../date-picker/locale/nl_NL';
+export default nl_NL;
diff --git a/components/calendar/locale/pl_PL.js b/components/calendar/locale/pl_PL.js
new file mode 100644
index 000000000..c309a788b
--- /dev/null
+++ b/components/calendar/locale/pl_PL.js
@@ -0,0 +1,2 @@
+import pl_PL from '../../date-picker/locale/pl_PL';
+export default pl_PL;
diff --git a/components/calendar/locale/pt_BR.js b/components/calendar/locale/pt_BR.js
new file mode 100644
index 000000000..2908a36dc
--- /dev/null
+++ b/components/calendar/locale/pt_BR.js
@@ -0,0 +1,2 @@
+import pt_BR from '../../date-picker/locale/pt_BR';
+export default pt_BR;
diff --git a/components/calendar/locale/pt_PT.js b/components/calendar/locale/pt_PT.js
new file mode 100644
index 000000000..c3aebf364
--- /dev/null
+++ b/components/calendar/locale/pt_PT.js
@@ -0,0 +1,2 @@
+import pt_PT from '../../date-picker/locale/pt_PT';
+export default pt_PT;
diff --git a/components/calendar/locale/ru_RU.js b/components/calendar/locale/ru_RU.js
new file mode 100644
index 000000000..c1feaedae
--- /dev/null
+++ b/components/calendar/locale/ru_RU.js
@@ -0,0 +1,2 @@
+import ru_RU from '../../date-picker/locale/ru_RU';
+export default ru_RU;
diff --git a/components/calendar/locale/sk_SK.js b/components/calendar/locale/sk_SK.js
new file mode 100644
index 000000000..3e9a32d8c
--- /dev/null
+++ b/components/calendar/locale/sk_SK.js
@@ -0,0 +1,2 @@
+import sk_SK from '../../date-picker/locale/sk_SK';
+export default sk_SK;
diff --git a/components/calendar/locale/sr_RS.js b/components/calendar/locale/sr_RS.js
new file mode 100644
index 000000000..ae46beb97
--- /dev/null
+++ b/components/calendar/locale/sr_RS.js
@@ -0,0 +1,2 @@
+import sr_RS from '../../date-picker/locale/sr_RS';
+export default sr_RS;
diff --git a/components/calendar/locale/sv_SE.js b/components/calendar/locale/sv_SE.js
new file mode 100644
index 000000000..b9e4c3e5d
--- /dev/null
+++ b/components/calendar/locale/sv_SE.js
@@ -0,0 +1,2 @@
+import sv_SE from '../../date-picker/locale/sv_SE';
+export default sv_SE;
diff --git a/components/calendar/locale/th_TH.js b/components/calendar/locale/th_TH.js
new file mode 100644
index 000000000..62bbf4776
--- /dev/null
+++ b/components/calendar/locale/th_TH.js
@@ -0,0 +1,2 @@
+import th_TH from '../../date-picker/locale/th_TH';
+export default th_TH;
diff --git a/components/calendar/locale/tr_TR.js b/components/calendar/locale/tr_TR.js
new file mode 100644
index 000000000..d5ba572d4
--- /dev/null
+++ b/components/calendar/locale/tr_TR.js
@@ -0,0 +1,2 @@
+import tr_TR from '../../date-picker/locale/tr_TR';
+export default tr_TR;
diff --git a/components/calendar/locale/uk_UA.js b/components/calendar/locale/uk_UA.js
new file mode 100644
index 000000000..b27523dd7
--- /dev/null
+++ b/components/calendar/locale/uk_UA.js
@@ -0,0 +1,2 @@
+import uk_UA from '../../date-picker/locale/uk_UA';
+export default uk_UA;
diff --git a/components/calendar/locale/vi_VN.js b/components/calendar/locale/vi_VN.js
new file mode 100644
index 000000000..0579ee2e6
--- /dev/null
+++ b/components/calendar/locale/vi_VN.js
@@ -0,0 +1,2 @@
+import vi_VN from '../../date-picker/locale/vi_VN';
+export default vi_VN;
diff --git a/components/calendar/locale/zh_CN.js b/components/calendar/locale/zh_CN.js
new file mode 100644
index 000000000..9c83ec845
--- /dev/null
+++ b/components/calendar/locale/zh_CN.js
@@ -0,0 +1,2 @@
+import zh_CN from '../../date-picker/locale/zh_CN';
+export default zh_CN;
diff --git a/components/calendar/locale/zh_TW.js b/components/calendar/locale/zh_TW.js
new file mode 100644
index 000000000..2fa73ae62
--- /dev/null
+++ b/components/calendar/locale/zh_TW.js
@@ -0,0 +1,2 @@
+import zh_TW from '../../date-picker/locale/zh_TW';
+export default zh_TW;
diff --git a/components/calendar/style/index.js b/components/calendar/style/index.js
new file mode 100644
index 000000000..c56bef1a1
--- /dev/null
+++ b/components/calendar/style/index.js
@@ -0,0 +1,6 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../select/style'
+import '../../radio/style'
diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less
new file mode 100644
index 000000000..32ca13dea
--- /dev/null
+++ b/components/calendar/style/index.less
@@ -0,0 +1,266 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar";
+
+.@{full-calendar-prefix-cls} {
+  .reset-component;
+  outline: none;
+  border-top: @border-width-base @border-style-base @border-color-base;
+
+  &-month-select {
+    margin-left: 5px;
+  }
+
+  &-header {
+    padding: 11px 16px 11px 0;
+    text-align: right;
+
+    .@{ant-prefix}-select-dropdown {
+      text-align: left;
+    }
+
+    .@{ant-prefix}-radio-group {
+      margin-left: 8px;
+      text-align: left;
+    }
+
+    label.@{ant-prefix}-radio-button {
+      height: 22px;
+      line-height: 20px;
+      padding: 0 10px;
+    }
+  }
+
+  &-date-panel {
+    position: relative;
+    outline: none;
+  }
+
+  &-calendar-body {
+    padding: 8px 12px;
+  }
+
+  table {
+    border-collapse: collapse;
+    max-width: 100%;
+    background-color: transparent;
+    width: 100%;
+    height: 256px;
+  }
+
+  table,
+  th,
+  td {
+    border: 0;
+  }
+
+  td {
+    position: relative;
+  }
+
+  &-calendar-table {
+    border-spacing: 0;
+    margin-bottom: 0;
+  }
+
+  &-column-header {
+    line-height: 18px;
+    padding: 0;
+    width: 33px;
+    text-align: center;
+    .@{full-calendar-prefix-cls}-column-header-inner {
+      display: block;
+      font-weight: normal;
+    }
+  }
+
+  &-week-number-header {
+    .@{full-calendar-prefix-cls}-column-header-inner {
+      display: none;
+    }
+  }
+
+  &-month,
+  &-date {
+    text-align: center;
+    transition: all .3s;
+  }
+
+  &-value {
+    display: block;
+    margin: 0 auto;
+    color: @text-color;
+    border-radius: @border-radius-sm;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    background: transparent;
+    line-height: 24px;
+    transition: all .3s;
+
+    &:hover {
+      background: @item-hover-bg;
+      cursor: pointer;
+    }
+
+    &:active {
+      background: @primary-color;
+      color: #fff;
+    }
+  }
+
+  &-month-panel-cell &-value {
+    width: 48px;
+  }
+
+  &-today &-value,
+  &-month-panel-current-cell &-value {
+    box-shadow: 0 0 0 1px @primary-color inset;
+  }
+
+  &-selected-day &-value,
+  &-month-panel-selected-cell &-value {
+    background: @primary-color;
+    color: #fff;
+  }
+
+  &-disabled-cell-first-of-row &-value {
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+
+  &-disabled-cell-last-of-row &-value {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
+
+  &-last-month-cell &-value,
+  &-next-month-btn-day &-value {
+    color: @disabled-color;
+  }
+
+  &-month-panel-table {
+    table-layout: fixed;
+    width: 100%;
+    border-collapse: separate;
+  }
+
+  &-content {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: -9px;
+  }
+
+  &-fullscreen {
+    border-top: 0;
+  }
+
+  &-fullscreen &-table {
+    table-layout: fixed;
+  }
+
+  &-fullscreen &-header {
+    .@{ant-prefix}-radio-group {
+      margin-left: 16px;
+    }
+    label.@{ant-prefix}-radio-button {
+      height: @input-height-base;
+      line-height: @input-height-base - 2px;
+    }
+  }
+
+  &-fullscreen &-month,
+  &-fullscreen &-date {
+    text-align: left;
+    margin: 0 4px;
+    display: block;
+    color: @text-color;
+    height: 116px;
+    padding: 4px 8px;
+    border-top: 2px solid @border-color-split;
+    transition: background .3s;
+
+    &:hover {
+      background: @item-hover-bg;
+      cursor: pointer;
+    }
+
+    &:active {
+      background: @primary-2;
+    }
+  }
+
+  &-fullscreen &-column-header {
+    text-align: right;
+    padding-right: 12px;
+    padding-bottom: 5px;
+  }
+
+  &-fullscreen &-value {
+    text-align: right;
+    background: transparent;
+    width: auto;
+  }
+
+  &-fullscreen &-today &-value {
+    color: @text-color;
+  }
+
+  &-fullscreen &-month-panel-current-cell &-month,
+  &-fullscreen &-today &-date {
+    border-top-color: @primary-color;
+    background: transparent;
+  }
+
+  &-fullscreen &-month-panel-current-cell &-value,
+  &-fullscreen &-today &-value {
+    box-shadow: none;
+  }
+
+  &-fullscreen &-month-panel-selected-cell &-month,
+  &-fullscreen &-selected-day &-date {
+    background: @primary-1;
+  }
+
+  &-fullscreen &-month-panel-selected-cell &-value,
+  &-fullscreen &-selected-day &-value {
+    color: @primary-color;
+  }
+
+  &-fullscreen &-last-month-cell &-date,
+  &-fullscreen &-next-month-btn-day &-date {
+    color: @disabled-color;
+  }
+
+  &-fullscreen &-content {
+    height: 90px;
+    overflow-y: auto;
+    position: static;
+    width: auto;
+    left: auto;
+    bottom: auto;
+  }
+
+  &-disabled-cell &-date {
+    &,
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  &-disabled-cell:not(&-today) &-date {
+    &,
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &-disabled-cell &-value {
+    color: @disabled-color;
+    border-radius: 0;
+    width: auto;
+    cursor: not-allowed;
+  }
+}