달력

[kyung8721]

참고 블로그 : https://junesker.tistory.com/93

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
    , events : [
        {
            title : "수입 " + "415,454" + "원"
            , start : "2024-10-28"
            , backgroundColor : "#FFFFFF"
            , borderColor : "#FFFFFF"
            , textColor : "#01DF01"
        }
        , {
            title : "지출 " + "8,545,465" + "원"
            , start : "2024-10-28"
            , backgroundColor : "#FFFFFF"
            , borderColor : "#FFFFFF"
            , textColor : "#FF0000"
        }
        , {
            title : "my2"
                , start : "2024-10-28"
                , end : "2024-10-31"
            }
    ]
  });
calendar.render();

이런식으로 진행되므로 ajax로 map에 넣어서 수입, 지출을 가져오면 될 듯.

[kyung8721]

오류나서 이유 수집 중.. 참고 중 https://okky.kr/questions/1157886

[kyung8721]

• [x] 서비스에서 값 받아올 때 리스트 첫번째에 덮어쓰기 됨.... 수정 필요 -> map을 그대로 사용하니 주솟값이 같아 그런 것이었음. 새로 초기화해서 해결할 것
• [x] 반복문에서 수입/지출/이체 구별도 필요, 지금 코드로는 구별이 안되는 듯. -> ==을 써서 그런 것이었음. .equals() 사용해서 해결

[kyung8721]

해결해야 하는 것

• [x] 내역 저장할 때 날짜 별 map을 리스트에 저장하는 것(지금은 각 classification 별로 각각 마지막 map은 저장이 안됨)
• 반복 하나가 끝날 때마다 list에 저장함. (같은 주소를 가진 map은 list에 저장하면 같은 자리에 덮어쓰기 되므로)
• [x] 캘린더에 내역 표시

[kyung8721]

Uncaught TypeError: Cannot read properties of undefined (reading 'title') ajax로 데이터를 받아오는 것 까지는 됐는데 이런 오류가 뜨면서 for 문 바깥으로 빠져나가질 못했다.

원래 코드

$.ajax({
    type : "post"
    , url : "/budgetBook/money/calendar/dayList"
    , data : {}
    , success : function(data){
        var ajaxevent = [];
        for(let i = 0 ; data.length >= i ; i++){
            let title = data[i].title;
            let start = data[i].start;
            let backgroundColor = data[i].backgroundColor;
            let borderColor = data[i].borderColor;
            let textColor = data[i].textColor;
            ajaxevent.push({
                "title" : title
                , "start" : start
                , "backgroundColor" : backgroundColor
                , "borderColor" : borderColor
                , "textColor" : textColor
            });
        };
    }
    , error : function() {
        alert("달력 데이터 받아오기 에러!")
    }
});

해결 : 변수를 불러올 때 앞에 ?를 붙여준다.

let title = data[i]?.title;
let start = data[i]?.start;
let backgroundColor = data[i]?.backgroundColor;
let borderColor = data[i]?.borderColor;
let textColor = data[i]?.textColor;

참고 : https://velog.io/@songyy/Uncaught-TypeError-Cannot-read-properties-of-undefined-reading-title%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0

[kyung8721]

아직 고쳐야 할 건 많지만 데이터 불러오기는 됐다!!!!!!!!

[kyung8721]

같은 날짜에 겹쳐서 나오는 것 : list에 저장을 항상 하면 중복되는 게 있을 때마다 map에 또 값이 들어가서 생기는 현상이었음. 날짜 바뀔 때만 저장되게 변경함. 계산이 이상하게 되는 것 : 날짜 계산할 때 수입/지출/이체 모두 같은 날짜 변수를 사용해서 생기는 것이었음. 예를 들어 지출에서 5일에서 8일로 날짜가 바뀌고 수입의 그 전 내역 날짜가 5일, 다음 내역 날짜가 6일이면 5일에 그대로 값이 더해졌던 것이었음. 수입/지출/이체 모두 다른 날짜 변수를 써서 해결.

[kyung8721]

• [x] 다음달, 저번 달 구별해서 그 달 정보 가져오기

[kyung8721]

document.addEventListener('DOMContentLoaded', function() {}) 안에

$(".fc-next-button").on("click", function() {
    let date = calendar.getDate();
    alert(date);
  });

이런식으로 날짜를 얻는 이벤트를 추가하면 그 달의 첫째날 date를 가져와줌

[kyung8721]

버튼 클릭해서 달이 넘어가면 데이터를 새로 받아와서 캘린더에 표시하고 싶은데 어떻게 해야 되는지 잘 모르겠다... 달력 새로고침도 잘 안되고 삭제하고 다시 보여주는 것도 녹록지 않고...ㅜㅜ

[kyung8721]

데이터를 받아오긴 했으나 이걸 달력에 어떻게 넣어야 할지 고민 중. 이 데이터를 원래 넣은 데이터와 교체하고 싶다....

[kyung8721]

event에 function을 이용한 방법으로 원했던 걸 구현했다!!!!