• Calendar 日历

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

    何时使用

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

    代码演示

    一个通用的日历面板,支持年/月切换。
    expand code expand code
    import { Calendar } from 'choerodon-ui';
    
    function onPanelChange(value, mode) {
      console.log(value, mode);
    }
    
    ReactDOM.render(
      <Calendar onPanelChange={onPanelChange} />,
      mountNode);
    
    一个复杂的应用示例,用 dateCellRendermonthCellRender 函数来自定义需要渲染的数据。
    expand code expand code
    import { Calendar, Badge } from 'choerodon-ui';
    
    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);
    
    用于嵌套在空间有限的容器中。
    expand code expand code
    import { Calendar } from 'choerodon-ui';
    
    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);
    
    一个通用的日历面板,支持年/月切换。
    expand code expand code
    import { Calendar, Alert } from 'choerodon-ui';
    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);
    

    API

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

    // 默认语言为 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默认日期
    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)