react 事项日历

效果图：

查看demo

gitee仓库：

https://gitee.com/chenxiaoyi27/rc-comp.git
demo代码路径/src/views/demo/matterCalendar.js

主要代码：

matterCalendar.js

import './matterCalendar.less';
import React from 'react';
import { Row, Col, Button, Table, Tooltip, message } from 'antd';
const WEEK = ['日', '一', '二', '三', '四', '五', '六'];

class MatterCalendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lines: 6,//日历有几行，默认最多6行
            now: new Date(),//现在的时间
            current: (new Date()).getMonth(),//初始化月份为今天所在月份
            month: (new Date()).getMonth(),//今天所在月份
            year: (new Date()).getFullYear(),//今年的年份
            date: (new Date()).getDate(),//今天的日期
        };
    }
    getMonthDays(year, month) { // 获取某个月的天数
        if (month === 3 || month === 5 || month === 8 || month === 10) {
            return 30;
        } else if ( month === 1) {
            if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {//闰年
                return 29;
            } else {
                return 28;
            }
        } else {
            return 31;
        }
    }
    changeMonth(num) { // 上个月/下个月按钮点击事件：-1为上个月，1为下个月
        let current = this.state.current + num;
        if (current < 0 || current > this.bssx.length - 1) {
            message.info('超过查询范围，请重新选择！');
        } else {
            this.setState({current});
        }
    }
    renderLines() { // 渲染每一行
        let arr = [],
            { year, current } = this.state,
            firstDay = (new Date(year, current, 1)).getDay(),//某个月第一天在周几
            dayCount = this.getMonthDays(year, current),//某个月有几天
            lines = Math.ceil((firstDay + dayCount) / 7);//日历有几行
        for(let i= 0; i < lines; i++){
            arr.push(i);
        }
        return arr.map((line) => {
            return <tr key={line}>{this.renderDates(line, firstDay, dayCount)}</tr>
        })
    }
    renderDates(line, firstDay, dayCount){ // 渲染日期
        let weekdays = [],
            { current, month, date } = this.state;
        for(let i= 0; i < 7; i++){
            if(line === 0){
                weekdays.push(i < firstDay ? '' : (i - firstDay + 1));
            }else{
                weekdays.push((line * 7 + i - firstDay + 1) > dayCount ? '' : (line * 7 + i - firstDay + 1));
            }
        }
        return weekdays.map((day, i) => {
            let today = (current === month && day === date) ? '今天' : '',
                 title = '', back = '';
            if(today){
                title = today;
                back = 'back-today';
            }
            return !title ?
                <td className={`b1 p12`} key={i}>{day}</td> :
                <Tooltip title={<div style={{maxWidth:'130px'}}>{title}</div>}><td className={`b1 p12 ${back}`} key={i}>{day}</td></Tooltip>
        });
    }
    render() {
        let { year, current } = this.state;
        return <div className="matter">
            <div className="matter-calendar">
                <Row className="txt-c mb10">
                    <Col span="6"><Button type="ghost" onClick={() => this.changeMonth(-1)}>上个月</Button></Col>
                    <Col span="12" className="title">{year}年{current + 1}月</Col>
                    <Col span="6"><Button type="ghost" onClick={() => this.changeMonth(1)}>下个月</Button></Col>
                </Row>
                <table className="txt-c mb20">
                    <thead>
                        <tr className="back-thead">
                            {WEEK.map((v, i) => {
                                return <td className="b1 p12" key={i}>{v}</td>
                            })}
                        </tr>
                    </thead>
                    <tbody>
                        {this.renderLines()}
                    </tbody>
                </table>
            </div>
        </div>
    }
}

export default MatterCalendar;