React Calendar 참고

Github URL : https://github.com/hanhyung6376/Calendar

Calendar

작은 result - 한주간의 달력 내용 제공
큰 result - 한달 달력 내용 제공

//* 이전달의 내용인지 이번달의 내용인지 다음달의 내용인지 확인 하는 함수
const returnIdx = (order ,year, month, day) => {

    if (order == 'PREV'){
        if (month == 0) {
            return transString(year-1, 12, day)
        }
        else {
            return transString(year, month, day)
        }
    }
     else if (order == 'NEXT') {
         if (month == 11) {
             return transString(year+1, 1, day)
         }
         else {
             return transString(year, month + 2, day)
         }
    }

    return transString(year, month+1, day)
}



const MakeCalendar = ({year, month ,firstDay, lastDate, changeVisible, todo, }) => {
    const result = []

    const makeDay = (week) => {
        const result = []
        // 첫 주 
        if (week == 1) {
            const prevLastDate = parseInt(new Date(year, month,0).getDate());
            //* firstDay :  첫째날에 무슨날인지
            //* now : 지금 몇일인지
            //* week 지금 몇째주인지
            //* lastDate : 이달의 lastDate가 몇일인지
            //* startDate : 이달의 startDate가 몇일인지
            for (let i = 1; i<=7; i++ ){
                // 저번 달 날짜 
                if (i <= firstDay) {
                    const now = prevLastDate - firstDay + i
                    const idx = returnIdx('PREV', year, month, now)

                    result.push(
                        <td className="diff" onClick={() => changeVisible(idx)} key={idx}>
                            {now}
                    <div className="todo">
                        {Schedule(idx, todo)}
                    </div>
                    </td>)
                }
                // 현재 달 날짜
                else {
                    const now = i - firstDay
                    const idx = returnIdx('', year, month, now)

                    result.push(
                        <td onClick={() => changeVisible(idx)} key={idx}>
                            {now}
                        <div className="todo">
                            {Schedule(idx, todo)}
                        </div>
                        </td>)
                }
            }
        }
        else {
            const startDate = ((week-1) * 7)
            for (let i = startDate; i <= week*7 - 1; i ++) {
                // 현재 달 날짜
                if (i - firstDay  < lastDate) {
                    const now = i - firstDay + 1
                    const idx = returnIdx('', year, month, now)

                    result.push(
                        <td onClick={() => changeVisible(idx)} key={idx} >
                            {now}
                        <div className="todo">
                            {Schedule(idx, todo)}
                        </div>
                    </td>)
                }
                // 다음 달 날짜
                else {
                    const now = i - lastDate - firstDay + 1
                    const idx = returnIdx('NEXT', year, month, now)
					
                    result.push(
                        <td className="diff" onClick={() => changeVisible(idx)} key={idx}>
                            {now}
                        <div className="todo">
                            {Schedule(idx, todo)
                            }</div>
                    </td>)
                }
            }
        }
        return result
    }

    //* 주 계산 한주마다 makeDay를 하게해준다.
    const week = Math.ceil((firstDay + lastDate) / 7)
    for(let i = 1; i <= week; i++) {
        result.push(<tr key={week+i}>{makeDay(i)}</tr>);
    }
    return result;


};

export default MakeCalendar

느꼇던것

간단하게 DOM을 조작하거나, 그냥 데이터만 변경할수있는건
React, Redux로 하기 어렵다면, Jquery로 간단하게 변경시켜주자^^