06/05-2[오후]

현재 찾은 2개 패키지 : react-big-calendar / react-calendar

둘에서 공통적으로 쓰이는 패키지 : moment.js

react-calendar

1. 장점
   1. 년단위로도 넘길 수 있는 표시가 있음
2. 단점
   1. 크기 조절이 불가능함-확인필요

react-big-calendar

1. 장점
   1. 상세 표시가 가능함
2. 단점
   1. 달력 크기를 줄이게 되면 장점1번의 기능이 사라짐

공통적인 문제점

1. 달력의 해당 날에 색을 칠하는 조건으로 정했는데 어떻게 색을 칠하게 할지 함수로 짜야함-해결
2. 1번과 반대로 되는 상대방에게 보여질 캘린더도 짜야함-해결
   1. 더 나아가서 반대의 경우 칠한 색이 아닌 칸은 클릭 이벤트를 비활성화 해야 한다
3. 1번의 경우 같은 모임의 날이 여러개를 지정한 경우 find나 map으로 배열마다 값을 내보내야함

한 모임에서 여러 날짜에 약속을 잡은 경우 어떻게 해결해야 하는가?

https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/props–day-prop-getter

https://github.com/jquense/react-big-calendar/issues/1581

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/48de15f5ed1bf35b6936f4336e49b44ebbca22ec/types/react-big-calendar/react-big-calendar-tests.tsx#L243

위 3개의 사이트를 참고하였다.

첫번째 사이트의 함수의 경우 작동하는 식을 이렇게 바꾸어 보았다

const X = useCallback((date)=>({...(moment(date).date()===moment(event[1].day).date()&&{style:{backgroundColor:"darkgreen"},}),}),[])

useCallback 함수를 사용해 만든 모양이다. 정상적으로 작동은 했지만 한 모임에서 날짜를 들고왔을 때 여러개인 경우 어떻게 분배해야 하는지 잘 몰라서 킵했다

두번째 사이트의 함수의 경우 작동하는 식을 바꾸어 보았지만 작동하지 않아서 적지 않는다.

세번째 사이트의 함수의 경우 작동하는 식을 바꾸어 보았다

const X2=(date)=>{for(let i=0;i<event.length;i++){if(date.getMonth()===moment(event[i].day).month())
return{style:{backgroundColor:"Blue"},};}};

식을 뜯어고친 결과 날짜가 여러개여도 작동을 한다. 초기에 실수를 한 것이 for 문 안에 else return {}이 있었는데 지우지 않아서 맨 처음 값을 제외한 나머지 값들은 다 else로 가서 작동을 마저 하지 않았다