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