JavaScript로 캘린더 월 변경 화살표 구현

이제 캘린더 아래에 월 변경을 위한 화살표를 만들어 봅시다. HTML 코드를 수정해 보겠습니다:

html<div id="parent">
  <div id="calendar">
    <div class="info">1월 2020</div>
    <table>
      <thead>
        <tr>
          <th>월</th>
          <th>화</th>
          <th>수</th>
          <th>목</th>
          <th>금</th>
          <th>토</th>
          <th>일</th>
        </tr>
      </thead>
      <tbody class="body"></tbody>
    </table>
    <div class="nav">
      <a href="#" class="prev">←</a>
      <a href="#" class="next">→</a>
    </div>
  </div>
</div>

CSS 코드도 수정해 보겠습니다:

css#parent {
  text-align: center;
}
#calendar {
  display: inline-block;
}
#calendar td, #calendar th {
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

#calendar .nav, #calendar .info {
  text-align: center;
}
#calendar a {
  color: blue;
  font-size: 25px;
  text-decoration: none;
}
#calendar a:hover {
  color: red;
}

#calendar .active {
  color: red;
}

화살표 링크를 변수에 할당하겠습니다:

javascriptlet prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

토론

이제 문제를 어떻게 해결할지 논의해 봅시다. 사실 우리의 캘린더 코드는 확장성이 좋게 작성되어 있습니다: 주어진 월의 캘린더를 그리는 draw 함수가 있습니다. 따라서 화살표를 클릭할 때 다른 월(및 연도) 번호로 캘린더를 다시 그릴 수 있습니다.

다음 월 화살표 클릭 시 우리가 할 수 있는 작업의 예시입니다:

javascriptnext.addEventListener('click', function() {
  draw(body, getNextYear(year, month), getNextMonth(month));
});

여기서는 getNextYear와 getNextMonth 함수가 사용됩니다. 이 함수들이 무엇을 해야 하는지 논의해 보겠습니다.

함수 이름에서 알 수 있듯이, getNextYear 함수는 다음 연도를 가져옵니다. 여기서 의미하는 바는, 현재가 12월인 경우 다음 월로 전환할 때 연도가 1 증가해야 한다는 것입니다. 현재가 12월이 아닌 경우, 함수는 단순히 현재 연도를 반환해야 합니다.

getNextMonth 함수는 다음 월을 가져와야 합니다. 이 함수는 12월을 제외한 모든 월에 대해 월 번호에 1을 더할 것입니다. 12월의 경우 다음 월은 번호 0인 1월이 될 것입니다.

이전 월 버튼을 클릭할 때도 유사한 작업을 수행해야 합니다:

javascriptprev.addEventListener('click', function() {
  draw(body, getPrevYear(year, month), getPrevMonth(month));
});