캘린더 여러 개 사용 시

£€€.T.$·2023년 8월 31일

onCellRender 컴포넌트 함수

  //달력에서 받아오는 값과 데이터에서 가져오는 값을 비교함.
  const onCellRender = (value) => {
    //날짜양식 yyyy-mm-dd로 맞추기
    const monthData = String(value.$M + 1).padStart(2, "0");
    const dayData = String(value.$D).padStart(2, "0");
    const valueData = value.$y + "-" + monthData + "-" + dayData;
    // console.log("쎌렌더 : ", valueData);
    
    //받아온 데이터(onData)와 달력에 랜더링 되는 날짜(valueData)를 비교하여 값을 만든다.
    //여러개 todo를 받을 배열
    const matchingTodos = [];
    //onData에는 전체 일정을 받아올 수 있다.
    for (let i in onData) {
      if (valueData === onData[i].todo_date) {
        //배열에 넣어준다.
        matchingTodos.push(
          <div className="todo">
            <div className="todoUserId">{onData[i].user_id}</div>
            <div className="todoMemo">{onData[i].todo_memo}</div>
          </div>
        );
      }
    }
    return <div>{matchingTodos}</div>;
  };

캘린더 참고 자료
https://tried.tistory.com/99

profile
Be {Nice} Be {Kind}

0개의 댓글