JavaScriptでのカレンダー
このセクションではカレンダーを実装します。 簡略化のため、カレンダーは現在の月について 表示されるようにします。ただし、後で月と年を 変更できるように改良できることを見越して います。以下は完成形のサンプルです:
以下はタスクを解く際に使用できる マークアップです:
<div id="parent">
<div id="calendar">
<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>
</div>
#parent {
text-align: center;
}
#calendar {
display: inline-block;
}
#calendar td, #calendar th {
padding: 5px 12px;
border: 1px solid black;
text-align: center;
}
まず、必要なすべてのタグへの参照を変数に取得し、 現在の月と年も記録しましょう:
let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
私が用意したコードの雛形をコピーしてください。