Calendar 日历

按照日历形式展示数据的容器。

何时使用#

当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。

API#

<Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
/>

参数	说明	类型	默认值
value	展示日期	Date	当前日期
defaultValue	默认展示日期	Date	当前日期
mode	初始模式，`month/year`	string	month
fullscreen	是否全屏显示	bool	true
dateCellRender	自定义渲染日期单元格	function(GregorianCalendar)	无
monthCellRender	自定义渲染月单元格	function(GregorianCalendar)	无
locale	国际化配置	object	默认配置
onPanelChange	日期面板变化回调	function(date, mode)	无

代码演示

import { Calendar } from 'antd';

function onPanelChange(value, mode) {
  console.log(value, mode);
}

ReactDOM.render(
  <Calendar onPanelChange={onPanelChange} />
, mountNode);

基本

一个通用的日历面板，支持年/月切换。

import { Calendar } from 'antd';

function dateCellRender(value) {
  return <div>自定义日数据 {value.getDayOfMonth()}</div>;
}

function monthCellRender(value) {
  return <div>自定义月数据 {value.getMonth()}</div>;
}

ReactDOM.render(
  <Calendar defaultValue={new Date('2010-10-10')}
  dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
, mountNode);

自定义渲染

用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据。

import { Calendar } from 'antd';

function getListData(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: '这里是错误事项.' },
      { type: 'error', content: '这里是错误事项.' },
      { type: 'error', content: '这里是错误事项.' }
    ]; break;
  default:
  }
  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} />
, mountNode);

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

通知事项日历演示

一个复杂的应用实例。

import { Calendar } from 'antd';
import enUS from 'antd/lib/calendar/locale/en_US';

function onPanelChange(value, mode) {
  console.log(value, mode);
}

ReactDOM.render(
  <Calendar onPanelChange={onPanelChange} locale={enUS}/>
, mountNode);

国际化

通过 locale 配置时区、语言等, 默认支持 en_US, zh_CN

import { Calendar } from 'antd';

function onPanelChange(value, mode) {
  console.log(value, mode);
}

ReactDOM.render(
  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
  </div>
, mountNode);

卡片模式

用于嵌套在空间有限的容器中。