newICSS/src/common/components/Calendar/Content/index.jsx

import React from 'react'
import styles from './index.less'
import PropTypes from 'prop-types'
import Item from '../ContentItem'

class Content extends React.Component {
    constructor() {
        super();
        this.state= {
            now: new Date().getTime()
        }
    }

    genItems(){
      let is_now_month=this.props.selectTime.year===this.props.year && this.props.selectTime.month===this.props.month;
        const Items=[];
        const first_day=new Date(this.props.year,this.props.month-1,1).getDay();
        let key=0;
        if(first_day!==7){
            let pre_day=new Date(this.props.year,this.props.month-1,0).getDate()-first_day+1;
            for(let i=0;i<first_day;i++){
                Items.push(<Item value={pre_day++} key={key++} clazzKey={'gray'} handleClick={this.props.handleClick}/>);
            }
        }
        const last_date=new Date(this.props.year,this.props.month,0);
        const day = last_date.getDate();
        for(let i=1,len=day;i<=len;i++){
            const currentTime = new Date(this.props.year,this.props.month-1,i);
            const exceed = +currentTime > this.state.now&&!this.props.canSelectFuture;
            let itemClassName = "";
            if(exceed) {
                itemClassName = "gray";
            }else{
                itemClassName = (is_now_month && i===this.props.selectTime.day)?'select':'';
            }
            Items.push(<Item value={i} key={key++} handleClick={this.props.handleClick} clazzKey={itemClassName}/>);
        }
        if(last_date.getDay()!==6){
            let next_month_first_day=new Date(this.props.year,this.props.month,1).getDay();
            for(let i=1,len=7-next_month_first_day;i<=len;i++){
                Items.push(<Item value={i} key={key++} clazzKey={'gray'} handleClick={this.props.handleClick}/>);
            }
        }
        return Items;
    }

    render() {
        return (
            <div className={styles.wrapper}>
                <ol className={styles.week}>
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                </ol>
                <ol className={styles.day}>
                    {this.genItems()}
                </ol>
            </div>
        )
    }
}

export default Content;

Content.propTypes={
    year:PropTypes.number,
    month:PropTypes.number,
    selectTime:PropTypes.object,
    handleClick:PropTypes.func,
    canSelectFuture:PropTypes.bool
};