DEV-Web Planner 달력 구성 (1)

HTML /CSS 뼈대 잡기

달력을 직접 만들 예정이다 .. !!

(유튜버 만학도 프로젝트 with JS님의 코딩을 참고했다.)

레이아웃 확인을 위해 border 라인을 넣어주고

flex를 통해서 구간을 나누었다.

 

============================================================================================

left-container에 들어가는 달력 만들기

원래는 달력을 구현하는 부분에 있어서 너무 복잡해가주고 그냥 라이브러리를 가져다가 쓸려고 했는데 라이브러리가 더 복잡하고 기능을 추가하자니 내가 만든 게 아니다 보니까 쉽지 않았다. 

그래서 그냥 이참에 이해도도 높일 겸 달력을 직접 만들기로 했다.

 

Calendar.js

 

일단은 캘린더 위쪽 그리고 right-container의 header부분에 날짜를 표시해야하므로

오늘의 날짜를 가져와서 각각의 위치에 .innerHTML로 표시해준다

주의) .getMonth()의 명령어는 return값이 index이므로 그대로 숫자를 가져다가 쓸거면 +1을 해줘야함 !

 

그리고  right-container의 header부분에 날짜는 왼쪽의 캘린더를 클릭할때마다 계속 render해줘야 하므로 함수안에 집어 넣어주자! 바로 호출하는 이유는 default값을 today로 지정하기 위해서다

 

 

 

이전달과 다음달의 일수는 연한색으로 표시

다음은 달력에서 표시되는 이전달과 다음달을 구분하기 위해서 작성한 코드이다.

prevDates, thisDates, nextDates 이렇게 총 세개의 배열을 지정해준다음 dates라는 변수에 concat을 통해 합쳐서 달력에 넣을 예정이다.

 

먼저 저번달의 마지막 날짜는 몇일인지 무슨요일인지를 알아야하므로

PLDate, PLDay, TLDate, TLDay 이렇게 총 네 개의 변수를 지정해준다음 각각의 변수에 저번달 마지막날짜, 요일 / 이번달 마지막 날짜, 요일을 집어 넣어준다!

 

thisDates

가장 쉬운 thisDates를 먼저 만들어주자.

thisDates는 간단하다. 이번달이 몇일까지 있는지만 확인하고 1~n까지의 배열을 만들어서 집어넣어주기만 하면된다.

그러기 위해서는 이번달의 마지막날짜를 알려주는 TLDate를 활용하여 1~TLDate까지의 배열을 만들어주면 된다.

...Array(TLDate+1).keys()  (ex.TLDate가 31이라고 가정)

이 명령어를 통해 0 ~ 31까지의 키값들로 이루어진 배열을 구성해준다음

 

.slice(1)

의 명령어를 이용하면 1~31까지의 배열이 완성된다 !!

 

이렇게하면 thisDates의 배열값은 완성이 되었다.

 

 

prevDates

이 친구는 주의해야할 점이 지난달의 마지막 요일이 토요일인 경우일때다. 토요일이라면 현재 달력을 봤을때 지난달의 일수를 표기하지 않기 때문이다!

그래서 예외 조건문 처리를 통해 PLDay !== 6 를 걸어준다. ( day index 6 = 토요일)

그런다음 지난달의 마지막 요일까지 숫자를 채워서 배열에 넣어주면 되므로

for (let i = 0; i < PLDay + 1; i++){

          prevDates.unshift(PLDate-i);

      }

 

이전 날짜의 마지막 날짜부터 시작해서 거꾸로 채워주면된다.

물론 앞에서 부터 채운다음 slice 명령어를 통해 앞부분을 떼어내도 된다. 그냥 취향차이

 

이렇게 되면 prevDates의 배열값도 완성이 되었다.

 

nextDates

이것도 prevDates랑 마찬가지로 이번달의 마지막 요일을 기준으로 7에서 뺀 TLDay값을 for문으로 돌려 배열을 채워나가면 되는 방식이다.

for (let i = 1; i < 7 - TLDay; i++) {

      nextDates.push(i); 

    }

다음달은 1일부터 시작이므로 그대로 i값을 push해주면 된다. 간단하다

 

★ prevDates랑 nextDates 둘다 요일을 기준으로 잡아 for문을 돌렸음!!

 

마지막으로 const dates = prevDates.concat(thisDates, nextDates); dates값을 완성시켜주면 된다!

 이런식으로 출력이 되는 것을 볼 수 있을 것이다.

 

calender CSS 뼈대잡기

가독성이 너무 떨어지니까 이쯤에서 css를 건드려 달력처럼 한번 꾸며보자 ..!

위의 css에서 중요한 걸 짚어보자면, date, dates, day, days css에 들어가는

width:calc(100%/7);

flex-flow: row wrap; (wrap도 가능)

 

요 두 녀석이다.  먼저 상위 div태그(date, day)에서 width를 calc함수를 통해 7등분을 해주고 하위  div 태그들(dates, days)에게 flex wrap을 걸어주면 달력처럼 이쁘게 나타낼 수 있는 것 이다

 

지난달/ 다음달의 날짜 색상 연하게 표시 & 오늘 날짜 표시

 

색상 연하게 표시

위에서 dates를 foreach로 선회하면서 값을 지정해준 부분을 다시 지워서 새로운 클래스를 부여할 것이므로 위의 코드에 

dates.forEach((date, i) => { dates[i] = `<div class="date">${date}</div>`; })

document.querySelector('.dates').innerHTML = dates.join(''); }

부분을

dates.forEach((date, i) => {

    const condition = i >= firstDateIndex && i < lastDateIndex + 1                      

                      ? 'this'

                      : 'other';

  dates[i] = `<div class="date"><span class="${condition}">${date}</span></div>`;

    })

요렇게 수정하자.

 

색상을 연하게 표시할려면 지난달/다음달과 이번달을 구분해서 새로운 class를 부여해준 후 css로 다뤄주기만 하면된다. 그래서 먼저 js로 넘어가서 코드를 작성하기만 하면 되는데 알고리즘부터 살펴보자면 이러하다.

1. 이번달의 첫째날(firstDateIndex)과 마지막날(lastDateIndex)을 변수로 지정

2. dates 클래스에는 지난달과 다음달의 숫자들도 포함되어 있으니 dates 배열의 key값들을 선회하면서 firstDateIndexd 이상이고 lastDateIndex보다 작은 키값들만 걸러낸다.

3. 삼항 조건 연산자를 이용해 조건에 만족하면 this라는 클래스를, 만족하지 않으면 other라는 클래스를 부여해준다.

 

dates[i] = `<div class="date"><span class="${condition}">${date}</span></div>`;

    })

마지막으로 이렇게 3번을 적용시켜주면 된다.

 

오늘 날짜 표시

 today라는 변수를 지정해 오늘 날짜에 맞는 date를 불러온다.

그런다음 현재 보고있는 달력이 이번달인지 년도인지 확인을 해준 다음에 this라는 클래스들 사이에서 today와 같은 날짜를 찾아 today라는 클래스를 추가해주자 !

 

this, other, today class  with CSS 

 

이렇게 css를 마지막으로 건드려주면

짠!

달력같아 보인다.

 

이제 마지막으로 클릭 기능을 구현해 right container의 header부분에 날짜를 표시해주는 것 까지하면 달력은 이쯤 마무리가 될 것 같다.