Tuesday, March 28, 2023
Kalender
// Membuat variabel untuk menyimpan tanggal saat ini
let today = new Date();
// Membuat variabel untuk menyimpan bulan saat ini
let currentMonth = today.getMonth();
// Membuat variabel untuk menyimpan tahun saat ini
let currentYear = today.getFullYear();
// Membuat array untuk menyimpan nama-nama bulan
let months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
// Membuat fungsi untuk menampilkan kalender
function showCalendar(month, year) {
// Membuat variabel untuk menemukan elemen HTML dengan ID "calendar"
let calendar = document.getElementById("calendar");
// Membersihkan elemen HTML "calendar" sebelum menampilkan kalender
calendar.innerHTML = "";
// Membuat elemen HTML untuk menampilkan bulan dan tahun
let header = document.createElement("h2");
header.innerHTML = months[month] + " " + year;
calendar.appendChild(header);
// Membuat tabel HTML untuk menampilkan kalender
let table = document.createElement("table");
// Membuat baris pertama tabel untuk menampilkan hari-hari dalam seminggu
let headerRow = document.createElement("tr");
let days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
for (let i = 0; i < 7; i++) {
let headerCell = document.createElement("th");
headerCell.innerHTML = days[i];
headerRow.appendChild(headerCell);
}
table.appendChild(headerRow);
// Membuat variabel untuk menyimpan tanggal pertama dalam bulan yang diberikan
let firstDay = new Date(year, month, 1);
// Membuat variabel untuk menyimpan tanggal terakhir dalam bulan yang diberikan
let lastDay = new Date(year, month + 1, 0);
// Membuat variabel untuk menyimpan tanggal saat ini
let today = new Date();
// Membuat variabel untuk menyimpan tanggal yang akan ditampilkan dalam kalender
let date = 1;
// Membuat loop untuk membuat baris-baris dalam tabel
for (let i = 0; i < 6; i++) {
let row = document.createElement("tr");
// Membuat loop untuk membuat sel-sel dalam baris
for (let j = 0; j < 7; j++) {
let cell = document.createElement("td");
// Menandai sel-sel yang tidak termasuk dalam bulan yang diberikan dengan kelas CSS "gray"
if (date > lastDay.getDate() || (i === 0 && j < firstDay.getDay())) {
cell.className = "gray";
}
// Menandai sel yang menunjukkan tanggal saat ini dengan kelas CSS "today"
else if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.className = "today";
}
// Menampilkan tanggal dalam sel
else {
cell.innerHTML = date;
date++;
}
row.appendChild(cell);
}
table.appendChild(row);
}
calendar.appendChild(table);
}
// Memanggil fungsi untuk menampilkan kalender dengan bulan