Calendar 日历

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

何时使用

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

代码演示

基本

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

Calendar日历 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Calendar } from 'choerodon-ui';
  4. function onPanelChange(value, mode) {
  5. console.log(value, mode);
  6. }
  7. ReactDOM.render(
  8. <Calendar onPanelChange={onPanelChange} />,
  9. document.getElementById('container'));

通知事项日历

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

Calendar日历 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Calendar, Badge } from 'choerodon-ui';
  4. function getListData(value) {
  5. let listData;
  6. switch (value.date()) {
  7. case 8:
  8. listData = [
  9. { type: 'warning', content: 'This is warning event.' },
  10. { type: 'success', content: 'This is usual event.' },
  11. ]; break;
  12. case 10:
  13. listData = [
  14. { type: 'warning', content: 'This is warning event.' },
  15. { type: 'success', content: 'This is usual event.' },
  16. { type: 'error', content: 'This is error event.' },
  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. ]; break;
  27. default:
  28. }
  29. return listData || [];
  30. }
  31. function dateCellRender(value) {
  32. const listData = getListData(value);
  33. return (
  34. <ul className="events">
  35. {
  36. listData.map(item => (
  37. <li key={item.content}>
  38. <Badge status={item.type} text={item.content} />
  39. </li>
  40. ))
  41. }
  42. </ul>
  43. );
  44. }
  45. function getMonthData(value) {
  46. if (value.month() === 8) {
  47. return 1394;
  48. }
  49. }
  50. function monthCellRender(value) {
  51. const num = getMonthData(value);
  52. return num ? (
  53. <div className="notes-month">
  54. <section>{num}</section>
  55. <span>Backlog number</span>
  56. </div>
  57. ) : null;
  58. }
  59. ReactDOM.render(
  60. <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
  61. document.getElementById('container'));

卡片模式

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

Calendar日历 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Calendar } from 'choerodon-ui';
  4. function onPanelChange(value, mode) {
  5. console.log(value, mode);
  6. }
  7. ReactDOM.render(
  8. <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
  9. <Calendar fullscreen={false} onPanelChange={onPanelChange} />
  10. </div>,
  11. document.getElementById('container'));

选择功能

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

Calendar日历 - 图4

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

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)