Calendar 日历 - Ant Design

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

何时使用 #

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

API #

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

自定义渲染

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

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

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

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