JavaScriptで月を切り替えるカレンダーの矢印

では、カレンダーの下に月を切り替えるための矢印を作りましょう。 HTMLコードを変更します：

html<div id="parent">
  <div id="calendar">
    <div class="info">Jan 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));
});