Calendar日历

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

何时使用

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

代码演示

Calendar 日历 - 图1

基本

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

  1. import { Calendar } from 'antd';
  2. function onPanelChange(value, mode) {
  3. console.log(value, mode);
  4. }
  5. ReactDOM.render(<Calendar onPanelChange={onPanelChange} />, mountNode);

Calendar 日历 - 图2

通知事项日历

一个复杂的应用示例,用 dateCellRendermonthCellRender 函数来自定义需要渲染的数据。

  1. import { Calendar, Badge } from 'antd';
  2. function getListData(value) {
  3. let listData;
  4. switch (value.date()) {
  5. case 8:
  6. listData = [
  7. { type: 'warning', content: 'This is warning event.' },
  8. { type: 'success', content: 'This is usual event.' },
  9. ];
  10. break;
  11. case 10:
  12. listData = [
  13. { type: 'warning', content: 'This is warning event.' },
  14. { type: 'success', content: 'This is usual event.' },
  15. { type: 'error', content: 'This is error event.' },
  16. ];
  17. break;
  18. case 15:
  19. listData = [
  20. { type: 'warning', content: 'This is warning event' },
  21. { type: 'success', content: 'This is very long usual event。。....' },
  22. { type: 'error', content: 'This is error event 1.' },
  23. { type: 'error', content: 'This is error event 2.' },
  24. { type: 'error', content: 'This is error event 3.' },
  25. { type: 'error', content: 'This is error event 4.' },
  26. ];
  27. break;
  28. default:
  29. }
  30. return listData || [];
  31. }
  32. function dateCellRender(value) {
  33. const listData = getListData(value);
  34. return (
  35. <ul className="events">
  36. {listData.map(item => (
  37. <li key={item.content}>
  38. <Badge status={item.type} text={item.content} />
  39. </li>
  40. ))}
  41. </ul>
  42. );
  43. }
  44. function getMonthData(value) {
  45. if (value.month() === 8) {
  46. return 1394;
  47. }
  48. }
  49. function monthCellRender(value) {
  50. const num = getMonthData(value);
  51. return num ? (
  52. <div className="notes-month">
  53. <section>{num}</section>
  54. <span>Backlog number</span>
  55. </div>
  56. ) : null;
  57. }
  58. ReactDOM.render(
  59. <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
  60. mountNode,
  61. );
  1. .events {
  2. list-style: none;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .events .ant-badge-status {
  7. overflow: hidden;
  8. white-space: nowrap;
  9. width: 100%;
  10. text-overflow: ellipsis;
  11. font-size: 12px;
  12. }
  13. .notes-month {
  14. text-align: center;
  15. font-size: 28px;
  16. }
  17. .notes-month section {
  18. font-size: 28px;
  19. }

Calendar 日历 - 图3

卡片模式

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

  1. import { Calendar } from 'antd';
  2. function onPanelChange(value, mode) {
  3. console.log(value, mode);
  4. }
  5. ReactDOM.render(
  6. <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
  7. <Calendar fullscreen={false} onPanelChange={onPanelChange} />
  8. </div>,
  9. mountNode,
  10. );

Calendar 日历 - 图4

选择功能

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

  1. import { Calendar, Alert } from 'antd';
  2. import moment from 'moment';
  3. class App extends React.Component {
  4. state = {
  5. value: moment('2017-01-25'),
  6. selectedValue: moment('2017-01-25'),
  7. };
  8. onSelect = value => {
  9. this.setState({
  10. value,
  11. selectedValue: value,
  12. });
  13. };
  14. onPanelChange = value => {
  15. this.setState({ value });
  16. };
  17. render() {
  18. const { value, selectedValue } = this.state;
  19. return (
  20. <div>
  21. <Alert
  22. message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
  23. />
  24. <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
  25. </div>
  26. );
  27. }
  28. }
  29. ReactDOM.render(<App />, mountNode);

API

注意:Calendar 部分 locale 是从 value 中读取,所以请先正确设置 moment 的 locale。

  1. // 默认语言为 en-US,所以如果需要使用其他语言,推荐在入口文件全局设置 locale
  2. // import moment from 'moment';
  3. // import 'moment/locale/zh-cn';
  4. // moment.locale('zh-cn');
  5. <Calendar
  6. dateCellRender={dateCellRender}
  7. monthCellRender={monthCellRender}
  8. onPanelChange={onPanelChange}
  9. onSelect={onSelect}
  10. />
参数说明类型默认值
dateCellRender自定义渲染日期单元格,返回内容会被追加到单元格function(date: moment): ReactNode
dateFullCellRender自定义渲染日期单元格,返回内容覆盖单元格function(date: moment): ReactNode
defaultValue默认展示的日期moment默认日期
disabledDate不可选择的日期(currentDate: moment) => boolean
fullscreen是否全屏显示booleantrue
locale国际化配置object默认配置
mode初始模式,month/yearstringmonth
monthCellRender自定义渲染月单元格,返回内容会被追加到单元格function(date: moment): ReactNode
monthFullCellRender自定义渲染月单元格,返回内容覆盖单元格function(date: moment): ReactNode
validRange设置可以显示的日期[moment, moment]
value展示日期moment当前日期
onPanelChange日期面板变化回调function(date: moment, mode: string)
onSelect点击选择日期回调function(date: moment)
onChange日期变化回调function(date: moment)