DEV-Web Planner 달력 날짜 이동하기 / UI 구현 (2)

달력 날짜 이동하기 / UI 구현

이런느낌으로 날짜 클릭시 날짜 변경 및 right-container의 상단 UI를 구성할 예정이다.

 

목표

날짜 이동하기 기능 . JS

일단은 이런식으로 showMain 함수를 넣어주면 right-container의 상단에 오늘의 날짜가 표시 될 것이다.

 

여기서 이제 우리가 클릭을 할때마다 날짜를 갱신해줄려면

showMain 함수 안에 있는 date값을 공략해주면 된다. 그러면 showMain 함수를 호출할때마다 viewDate와 viewDay가 저절로 갱신이 되면서 오른쪽 상단의 UI가 저절로 바뀔 것이다.

 

다행히도 우리는 지금까지 calendar에서 현재 보고 있는 달력의 칸들에는 date라는 클래스가, 이번달에 해당하는 부분의 달력의 칸들에는 this라는 클래스가 부여되어있다. 이벤트리스너와 함께 이 클래스들을 활용해보자!!

 

먼저 this라는 클래스를 활용할려면 그 날짜에 맞는 숫자를 활용할 수 있어야하는데 자바스크립트 내에서는 활용할 수가 없다. 즉, 정체성이 없다. 그래서 arrayThisDate라는 변수에 document.querySelectorAll 명령어를 통해서 this 클래스를 "전부" 가져온 다음에 foreach함수를 이용해서 날짜에 맞는 id값을 부여해준다(정체성 부여). 

 

clickStart()라는 함수 내부에는 미리 정의해둔 tdGroup에 document.getElementById 명령어로 위에서 날짜에 맞는 id값을 보유한 html태그들을 전부 가져와서 넣은 후에 addEventListener 를 활용하여 날짜를 클릭할때마다 changeToday라는 함수를 실행하게 구성한다.

 

clickedDate라는 변수를 지정해준다음에 초기값으로 오늘을 가져온다.

그런다음 changeToday 이 함수 내부에서는 clickedDate 변수에 click됐을때의 target값을 넣어주면된다.

그리고 마지막으로 clickedDate.id 를 date값의 날짜에 갱신을 해주고 showMain()함수를 호출하면 끝이난다.

 

그리고 중간중간에 있는 active라는 클래스를 부여하는 이유는 날짜가 선택되었을 때 UI상에서 가독성을 높이기 위해 부여해주었다.

 

UI 구성 .CSS

항상 부모에게 relative자식에게 absolute잊지말자.

(other에게 금지커서까지 주면 완벽하다)