考勤管理：用ant design Calendar日历动态渲染

页面效果：

import React, { Component } from 'react';
// import { Card, Typography, Alert, Icon } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {Card, Checkbox, Input, Tabs, Button, Col, Row, Table, Calendar, Tag, Modal,Steps,Alert } from 'antd';
import styles from './style.less';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { Step } = Steps;
const { TabPane } = Tabs;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = [];// 默认选中值

class text extends Component {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: false,
    checkAll: false,
    attendanceDate:[
      {
        date:'2020-04-1',
        state:0,//正常 green
      },
      {
        date:'2020-04-2',
        state:1,//迟到 yellow
      },
    ],
    isAttendance:false,
    day:'',
  };

  componentDidMount() {
    var day=moment().format("YYYY-MM-DD HH:mm:ss");
    console.log(day);
    this.setState({
        day
      },
    )
  }

  handleTableChange = (pagination, filters, sorter) => {
    const pager = { ...this.state.pagination };
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  };

  fetch = (params = {}) => {
    console.log('params:', params);
    this.setState({ loading: true });
    reqwest({
      url: 'https://randomuser.me/api',
      method: 'get',
      data: {
        results: 10,
        ...params,
      },
      type: 'json',
    }).then(data => {
      const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
      pagination.total = 200;
      this.setState({
        loading: false,
        data: data.results,
        pagination,
      });
    });
  };
  onChange = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };


// const {attendanceDate}=this.props;
  onPanelChange=(value, mode) =>{
    console.log(moment(value).format('YYYY-MM-DD HH:mm:ss')+"&&&"+mode)
  };

  getListData=(value)=> {
  //对数据进行动态处理
    let listData=[];
    var selectDay=moment(this.state.day).format('YYYY-MM')
    if (moment(value).format('YYYY-MM')===selectDay) {
      for (let i = 0; i < this.state.attendanceDate.length; i++) {
        let date = this.state.attendanceDate[i].date.split("-");
        if (value.date().toString()===date[2]) {
          switch (this.state.attendanceDate[i].state) {
            case 0:
              listData = [
                {color: 'green', content: '正常'}
              ];
              break;
            case 1:
              listData = [
                {color: 'yellow', content: '迟到'}
              ];
              break;
            case 2:
              listData = [
                {color: 'red', content: '旷工'}
              ];
              break;
            case 3:
              listData = [
                {color: 'blue', content: '休假'}
              ];
              break;
            default:
          }

        }
      }
    }
    return listData || [];
  }

  dateCellRender=(value)=> {
    const listData = this.getListData(value);
    return (
      <ul className="events">
        {listData.map(item => (
          <li key={item.content}>
            <Tag color={item.color} >{item.content}</Tag>
          </li>
        ))}
      </ul>
    );
  };
  Calendar1_DayRender=(e)=>{
    if (e.Day.IsOtherMonth)
      e.Cell.Enabled = false;
  };
  attendanceBtn=()=>{
    this.setState({isAttendance:true})
  };attendanceCancel=()=>{
    this.setState({isAttendance:false})
  };
  attendanceOk=()=>{

  };
  monthCellRender=(value)=> {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  }
  render() {

    return (
      <div className={styles}>
      <PageHeaderWrapper >
        <Card bordered={false} >
          <Row>
            <Col span={2}>
              <Button type="primary" onClick={this.attendanceBtn}>考勤打卡</Button>
              <Modal
                title="考勤打卡"
                // onOk={this.attendanceOk}
                visible={this.state.isAttendance}
                // onCancel={this.attendanceCancel}>
                footer={
                  [
                    // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                    <Button key="back" type="primary" onClick={this.attendanceCancel}>关闭</Button>,
                  ]
                  }>
                <Alert message="Informational Notes"
                       type="info"
                       style={{marginTop:10,marginBottom:20}}
                       showIcon/>
                <Steps  current={0} style={{marginTop:10,marginBottom:20}}>
                  <Step title="Waiting" description="上班时间09:00" />
                  <Step title="Waiting" description="下班时间17:30" />
                </Steps>
                <Button
                  type="primary"
                  onClick={this.attendanceOk}
                  style={{marginTop:10,marginBottom:20,height:40,fontWeight:"bolder"}}
                  block>
                  打卡  {moment().format('HH:mm:ss')}</Button>
              </Modal>
            </Col>
            <Col span={2}>
              <Button  type="primary">请假申请</Button>
            </Col>
          </Row>
          <Tabs defaultActiveKey="1" >
            <TabPane tab="考勤打卡" key="1">
              <Calendar className="attendanceCal"
                        onPanelChange={this.onPanelChange}
                        dateCellRender={this.dateCellRender}
                        monthCellRender={this.monthCellRender} />
            </TabPane>
            <TabPane tab="请假信息" key="2">
              <div>
                <div style={{ borderBottom: '1px solid #E9E9E9' }}>
                  <Checkbox
                    indeterminate={this.state.indeterminate}
                    onChange={this.onCheckAllChange}
                    checked={this.state.checkAll}
                  >
                    Check all
                  </Checkbox>
                </div>
                <br />

              </div>
            </TabPane>
            <TabPane tab="加班信息" key="3">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
        </Card>
      </PageHeaderWrapper>
    </div>
    )
  }
}
export default text;

参考地址：https://www.cnblogs.com/Jayeblog/p/11427945.html