달력 구성 요소

import React, { Component } from "react";
import * as _ from "lodash";

const l = console.log;
const weeks = [" ", " ", " ", " ", " ", " ", " "];
class Test extends Component {
  state = {};
  componentWillMount() {
    this.initState();
  }
  initState = ({ y, m } = {}) => {
    let date = new Date();
    let year = y || date.getFullYear(); //   
    let month = m || date.getMonth() + 1; //   
    l(`${year} ${month} .`);

    let date2 = new Date(year, month, 0);
    let days = date2.getDate(); //       
    l(`   ${days} .`);

    date2.setDate(1);
    let day = date2.getDay(); //          
    l(`        ${day}.`);

    let list = [];

    for (let i = 0; i < days + day; i++) {
      if (i < day) {
        list.push(0);
      } else {
        list.push(i - day + 1);
      }
    }
    let hlist = _.chunk(list, 7); //        
    let len = hlist.length;
    let to = 7 - hlist[len - 1].length;

    //        
    for (let i = 0; i < to; i++) {
      hlist[len - 1].push(0);
    }
    this.setState({
      date,
      year,
      month,
      days,
      day,
      hlist,
    });
  };

  //   
  handlePrevMonth = () => {
    let prevMonth = this.state.month + -1;
    let prevYear = this.state.year;
    if (prevMonth < 1) {
      prevMonth = 12;
      prevYear -= 1;
    }
    this.initState({
      y: prevYear,
      m: prevMonth,
    });
  };

  //   
  handleNextMonth = () => {
    let nextMonth = this.state.month + 1;
    let nextYear = this.state.year;
    if (nextMonth > 12) {
      nextMonth = 1;
      nextYear += 1;
    }
    this.initState({
      y: nextYear,
      m: nextMonth,
    });
  };

  render() {
    const { year, month } = this.state;
    return (
      <>
        

          {year} ,{month} 
        
        

            
            
        
        
              {weeks.map(el => (
                
              ))}
            
            {this.state.hlist.map((el, i) => {
              return (
                
                  {el.map((n, ii) => (
                    
                  ))}
                
              );
            })}
          

          

            
{el}
{n}
        
      >
    );
  }
}

export default Test;

import React, { Component } from "react";
import * as _ from "lodash";

class DateItem {
  /**
   *
   * @param  dayNum   ,     new Date().getDate()       
   * @param  isSignIn=false     
   * @param  isShowSignIn=false         ，                 
   */
  constructor({ dayNum, isSignIn = false, isShowSignIn = false }) {
    Object.assign(this, {
      dayNum,
      isSignIn,
      isShowSignIn,
    });
  }
}

const l = console.log;
const weeks = [" ", " ", " ", " ", " ", " ", " "];
class Test extends Component {
  state = {};
  componentWillMount() {
    this.initState();
  }
  initState = ({ y, m } = {}) => {
    const date = new Date();
    const year = y || date.getFullYear(); //   
    const month = m || date.getMonth() + 1; //   

    l(`${year} ${month} .`);

    let date2 = new Date(year, month, 0);
    let days = date2.getDate(); //       
    l(`   ${days} .`);

    date2.setDate(1);
    let day = date2.getDay(); //          
    l(`        ${day}.`);

    let list = [];
    const nowadays = date.getDate(); //   
    const thisMonth = date.getMonth() + 1; //   

    let isShowSignIn = false;
    const date2GtDate = date2 > date;
    const isThisMonth = month === thisMonth; //              

    for (let i = 0; i < days + day; i++) {
      const dayNum = i - day + 1;
      if (date2GtDate) {
        isShowSignIn = false;
      } else {
        if (isThisMonth && i >= day + nowadays) {
          isShowSignIn = false;
        } else {
          isShowSignIn = true;
        }
      }

      if (i < day) {
        list.push(new DateItem({ dayNum: 0, isShowSignIn }));
      } else {
        list.push(new DateItem({ dayNum, isShowSignIn }));
      }
    }
    let hlist = this.getHlist(list, isShowSignIn);
    this.setState({
      date,
      year,
      month,
      days,
      day,
      list,
      hlist,
      nowadays,
      thisMonth,
    });
  };

  //            
  getHlist = (list, isShowSignIn) => {
    let hlist = _.chunk(list, 7); //        
    let len = hlist.length;
    let to = 7 - hlist[len - 1].length;

    //        
    for (let i = 0; i < to; i++) {
      hlist[len - 1].push(new DateItem({ dayNum: 0, isShowSignIn }));
    }
    return hlist;
  };

  //   
  handlePrevMonth = () => {
    let prevMonth = this.state.month + -1;
    let prevYear = this.state.year;
    if (prevMonth < 1) {
      prevMonth = 12;
      prevYear -= 1;
    }
    this.initState({
      y: prevYear,
      m: prevMonth,
    });
  };

  //   
  handleNextMonth = () => {
    let nextMonth = this.state.month + 1;
    let nextYear = this.state.year;
    if (nextMonth > 12) {
      nextMonth = 1;
      nextYear += 1;
    }
    this.initState({
      y: nextYear,
      m: nextMonth,
    });
  };

  //       
  handleDateItemClick = (dateItem, i, j) => () => {
    const { year, month, date, nowadays } = this.state;
    const { isShowSignIn, isSignIn, dayNum } = dateItem;
    if (dayNum === 0) return;
    const selectDate = new Date(`${year}-${month}-${dayNum}`);
    if (nowadays === dayNum) {
      l("  ");
    } else if (selectDate < date) {
      l("  ");
    }

    if (!isShowSignIn || isSignIn)
      //                   
      return;

    this.setState(state => {
      const hlist = state.hlist.slice();
      hlist[i][j].isSignIn = true;
      return {
        hlist,
      };
    });
  };
  render() {
    const { year, month, nowadays, thisMonth } = this.state;
    return (
      <>
        

          {year} ,{month} 
        
        

            
            
           {
              this.initState();
            }}
          >
              
          
        
        
              {weeks.map(el => (
                
              ))}
            
            {this.state.hlist.map((el, i) => {
              return (
                
                  {el.map((dateItem, j) => {
                    const dayNum = dateItem.dayNum;
                    const isSignIn = dateItem.isSignIn;
                    const isShowSignIn = dateItem.isShowSignIn;
                    return (
                      
                    );
                  })}
                
              );
            })}
          

          

            
{el}

                        
{dayNum}
                        {!!isShowSignIn && (
                          

                            {!!isSignIn ? `   ` : `   `}
                          
                        )}
                      
        
      >
    );
  }
}

export default Test;