[JS] Array()생성자를 이용한 달력만들기.

youngseo·2022년 4월 2일

JS프로젝트

목록 보기

17/18

자바스크립트로 달력만들기

▶17분 안에 자바스크립트로 달력 만들기를 보며 부족한 개념을 정리한 내용입니다.

▶전체코드 보기

Array()생성자

Array()생성자는 새로운 Array객체를 생성합니다.

new Array의 constructor에 하나의 숫자만 넣으면 배열의 크기로 인식하지만, 두 개 이상의 숫자를 전달하면 전달받은 값으로 배열을 초기화합니다.

let arr1 = new Array('사과', '바나나') // [사과, 바나나]
arr1.length; //2
arr1[0] //사과

let arr2 = new Array(5) // [empty x 5]
arr2.length; //5
arr2[0] // undefined

Array()생성자를 이용해 달력만들기

1. 필요한 변수 설정

const date = new Date();

//지난 달의 마지막 날짜 ex) Sat Apr 30 2022 00:00:00 GMT+0900
const prevLast = new Date(viewYear, viewMonth +1 , 0);
const thisLast = new Date(viewYear, viewMonth + 1, 0);

//지난 달의 마지막 날짜의 일(숫자) ex)30
const PLDate = prevLast.getDate();
// 지난 달의 마지막 요일 ex) 4 : 목요일
const PLDay = prevLast.getDay();

const TLDate = thisLast.getDate();
const TLDay = thisLast.getDay();

const prevDates = [];
//해당 달의 일 배열로 출력
const thisDates = [...Array(TLDate + 1).keys()].slice(1);
/*(30) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 
19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30] */
const nextDates = [];

prevLast : 지난 달의 마지막 날짜 ex) Sat Apr 30 2022 00:00:00 GMT+0900

PLDate : 지난 달의 마지막 날짜의 일(숫자) ex)30

PLDay: 지난 달의 마지막 요일 ex) 4 : 목요일

prevDates : 지난 달력날짜의 칸 배열

2. 이번 달의 달력의 첫 주와 마지막 주에 들어갈 숫자 구하기

/* 이 시점의 prevDates는 [], nextDates도 [] 만약 PLDay가 4(목), PLDate가 31인 경우 */

if (PLDay !== 6) { 
  for (let i = 0; i < PLDay + 1; i++) {
    prevDates.unshift(PLDate - i); 
    console.log(prevDates) // ex) 지난 달의 마지막요일이 목요일(4)라면  [27, 28, 29, 30, 31] 가 남음
  }
}

for(let i = 1; i< 7 -TLDay; i++){
  nextDates.push(i)
}

/* 코드가 종료되고 난 후의  prevDates는 [27, 28, 29, 30, 31] , nextDates는 [] */

const dates = prevDates.concat(thisDates, nextDates)
/*console.log(dates) :(35)[27, 28, 29, 30, 31, 1, 2, 3, 4, 5, 6, 7, 8, 
9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30], 아래 사진과 같이 이번 달에 들어갈 35개의 숫자 배열이 만들어집니다. */

const firstDateIndex = dates.indexOf(1)
//console.log(firstDateIndex) : 5(금) 이번달 1일의 시작이 금요일임을 알 수 있습니다.

const lastDateIndex = dates.lastIndexOf(TLDate);
//console.log(lastDateIndex) : 34

dates : 이번 달력에 뿌려질 칸 배열

firstDateIndex : 이번 달 1일의 요일

lastDateIndex: 마지막 요일의 index

3. 달력에 들어갈 각각의 칸요소(date)삽입하기

dates.forEach((date, i) => {
  //지난 달과 이번달 숫자의 opacity차이를 주기 위해 this와 other 클래스를 각각 추가
  const condition = i >= firstDateIndex  ? 'this' : 'other';
  dates[i] =`<div class="date"><span class=${condition}>${date}</span></div>`;
})

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

위와 같이 각각의 클래스가 date인 요소가 추가된 배열을, join('') 함수를 통해 문자열로 변경해줍니다.

4. 오늘 날짜인 경우 today클래스 추가

const today = new Date();
if (viewMonth === today.getMonth() && viewYear === today.getFullYear()) {
  for (let date of document.querySelectorAll('.this')) {
    if (+date.innerText === today.getDate()) {
      date.classList.add('today');
      break;
    }
  }
}

5. renderCalender()

const date = new Date();

const renderCalender = () => {
  //코드 
}

renderCalender();

지금까지 작성한 코드를 renderCalender 함수로 감싼 후 함수를 호출해 즉시 실행될 수 있도록 만들어줍니다.

6. 마무리

const prevMonth = () => {
  date.setMonth(date.getMonth() + 1 );
  renderCalender();
}

const nextMonth = () => {
  date.setMonth(date.getMonth() + 1);
  renderCalender();
};

const goToday = () => {
  date = new Date();
  renderCalender();

<div class="nav">
  <button class="nav-btn go-prev" onclick="prevMonth()">&lt;</button>
  <button class="nav-btn go-today" onclick="goToday()">Today</button>
  <button class="nav-btn go-next" onclick="nextMonth()">&gt;</button>
</div>