Kalender dalam JavaScript

Dalam bagian ini, kita akan mengimplementasikan kalender. Untuk mempermudah, kita akan membuat kalender menampilkan bulan berjalan. Namun dengan pertimbangan agar nantinya dapat dikembangkan sehingga bulan dan tahun dapat diubah. Berikut contoh yang harus kita hasilkan:

Berikut markup yang dapat Anda gunakan dalam menyelesaikan tugas:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>Sen</th>
					<th>Sel</th>
					<th>Rab</th>
					<th>Kam</th>
					<th>Jum</th>
					<th>Sab</th>
					<th>Min</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;
}

Langsung saja, mari dapatkan referensi ke semua tag yang diperlukan ke dalam variabel, serta catat bulan dan tahun saat ini:

let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');

let date  = new Date();
let year  = date.getFullYear();
let month = date.getMonth();

Salinlah kode template yang telah saya sediakan untuk Anda.