캘린더

    const [getMoment,setMoment]=useState(moment())
    const today=getMoment
    const firstWeek=today.clone().startOf('month').week()
    const lastWeek=today.clone().endOf('month').week()===1?53:today.clone().endOf('month').week()
    
    //캘릭더 클릭시 className="bg-gray1"
    //데이터가 있는 날짜 <div>날짜<div> 밑에   <div className="calendar_mark"></div> 을 입력
    //<div className="c-red1">31</div> 일요일표시
    const click=(e)=>{

        let td=document.getElementsByName('td')
        for(let i=0; i<td.length; i++){
            td[i].className="c-text13"
        }

        e.currentTarget.className="bg-gray1"
    }
    const calendarArr=()=>{
        let result=[];
        let week=firstWeek
        
        for(week; week<=lastWeek; week++){
            result=result.concat(
                <tr className="days" key={week}>
                    {
                        Array(7).fill(0).map((data,index)=>{

                            let days=today.clone().startOf('year').week(week).startOf('week').add(index,'day')

                            if(moment().format('YYYYMMDD')=== days.format('YYYYMMDD')){
                                return(
                                    //오늘
                                    <td key={index} style={{backgroundColor:'#FFEE00'}} onClick={click} name="td">
                                        <div className="c-black">{days.format('D')}</div>
                                    </td>
                                );
                            }else if(days.format('MM')!==today.format('MM')){
                                return(
                                    //전월 혹은 다음월의 일자
                                    <td key={index} onClick={click} name="td">
                                         <div style={{color:'#6d6d6d'}}>{days.format('D')}</div>
                                    </td>
                                )
                            }else{
                                //주말표시
                                if(index===0||index===6){
                                    return(
                                        <td key={index} onClick={click} name="td">
                                            <div className="c-black"><p style={{color:'red'}}>{days.format('D')}</p></div>
                                        </td>
                                    )    
                                }
                                //일반 날짜
                                return(
                                    <td key={index} onClick={click} name="td">
                                        <div className="c-black">{days.format('D')}</div>
                                    </td>
                                )
                            }
                        })
                    }
                </tr>
            );
        }
        return result
    }