Coup sebuah App Kalender Suai dengan Javascript dan Penyimpanan Lokal

Membina Grid

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

Tak ada yang dapat memperbarui tampilan bulan/tahun pada header:

Navigasi Navigasi Antara Bulan

Penyalinan cip click event pendengar pada tombol Terdahulu dan Next. Inccrement atau decrement , menyesuaikan tahun jika dibutuhkan (misalnya, setelah Desember datang ke Januari tahun depan).Setelah memperbarui variabel, sebut lagi.

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

Untuk ekstra kemampuan usabilitas , tambahkan sebuah Today tombol yang mengatur ulang tampilan ke bulan saat ini dan menyoroti hari saat ini.

Storing & Mengambil Peristiwa dengan Penyimpanan Lokal

[[OblesfT:0]]Local Storage menyediakan toko nilai kunci sederhana yang bertahan dari restart peramban. Gunakan pola kunci yang konsisten, misalnya, , menyimpan array JSON dari objek acara. Termasuk properti seperti , , , dan .

Menyelamatkan Sebuah Peristiwa Baru

Ketika pengguna klik tombol \"Simpan\", tangkap nilai masukan dan tanggal yang sedang dipilih. (Anda dapat menambahkan pemilih tanggal atau mendeteksi sel hari mana yang diklik.) Ambil semua peristiwa yang ada untuk tanggal tersebut dari Penyimpanan Lokal, tekan kejadian baru, kemudian simpan kembali.

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

Memuat Peristiwa ke Sel Hari

Di dalam , untuk setiap sel hari non ⁇ kosong, sebut fungsi yang mempertanyakan Penyimpanan Lokal untuk kunci tanggal tersebut. Jika peristiwa ada, loop melalui mereka dan tambahkan unsur ke sel.

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

Peristiwa Memasing dan Menyunting

Ke menghapus, melampirkan acara klik ke setiap elemen acara (atau gunakan delegasi acara). Ambil kembali array untuk tanggal tersebut, menyaring acara tersebut dengan , dan simpan array yang diperbarui kembali ke Penyimpanan Lokal. Penyuntingan dapat dilakukan dengan klik ganda ⁇ klik acara, meminta teks baru, dan memperbarui susunan.

Keunggulan Fitur - Fitur yang Berkemajuan untuk Meningkatkan Fungsi

Setelah kalender dasar bekerja, Anda dapat menambahkan fitur yang secara signifikan meningkatkan pengalaman pengguna.

Warna ⁇ Koding Peristiwa menurut Jenis

Kedai sebuah bidang di Local Storage. Dalam CSS, definisikan kelas seperti , dan terapkan secara dinamis.

And ⁇ Drop Penjadwalan Ulang

Use the HTML5 Drag and Drop API untuk memindahkan peristiwa di antara sel hari. Ketika suatu peristiwa dijatuhkan pada hari yang berbeda, perbarui kunci tanggal di Local Storage: hapus peristiwa dari susunan tanggal aslinya dan tekan ke susunan tanggal baru.

Peristiwa Berulang - Ulang (Minggu / Bulanan)

Tambahkan pilihan \"Ulangan\" ketika menyimpan suatu peristiwa. Dalam fungsi pemuatan, hitung apakah tanggal saat ini sesuai dengan aturan pengulangan (misalnya, setiap Senin) dan tampilkan acara sesuai dengan. Simpan aturan pengulangan dalam kunci Penyimpanan Lokal yang terpisah untuk menghindari duplikat.

Minggu Minggu Minggu Minggu Minggu Minggu Minggu Minggu Paparan dan Kalender Mini

Layar antara bulan dan minggu. Pandangan minggu hanya menunjukkan hari minggu saat ini dengan ruang yang lebih mendatar. sebulan ⁇ lihat kalender mini membantu pengguna untuk melompat ke tanggal manapun dengan cepat.

Kemurtadan Membuat Kalender Menanggapi dan Bisa Dicapai

Ælfford Uji kalender pada berbagai ukuran layar. Gunakan kueri untuk menumpuk sel hari secara vertikal pada layar yang sangat kecil atau untuk mengurangi pemadatan. Pastikan semua elemen interaktif adalah keyboard ⁇ accessible: melampirkan acara untuk Enter and Escape. Gunakan atribut pada tombol dan wilayah langsung untuk pembaca layar untuk mengumumkan perubahan bulan dan penambahan acara.

Tips Manajemen Data dan Prestasi untuk Prestasi dan Kinerja

• [Efron]]Btached Storage Writes: Daripada membaca/menulis Penyimpanan Lokal untuk setiap operasi acara, cache seluruh peristiwa bulan dalam sebuah objek JavaScript dan flush perubahan secara berkala.
• [[LOLT:0]]Limit Ukuran Peristiwa: Jaga objek peristiwa kecil. Hindari menyimpan string besar atau data biner.
• [[LANJUR:0]]Fallback for Storage Limits: Local Storage biasanya dicangkup pada 5 ⁇ MB. Peringatkan pengguna ketika penyimpanan hampir penuh.
• Gunakan IndexedDB untuk Datasets Besar: Jika kalender Anda akan mengadakan ribuan acara, pertimbangkan IndexedDB[ untuk performa dan kemampuan query yang lebih baik.

Kekecualian Kesimpulan

Mewujudkan aplikasi kalender suai dengan JavaScript dan Penyimpanan Lokal adalah proyek yang menguntungkan yang mempertajam kemampuan depan ⁇ end Anda. Anda belajar untuk memanipulasi DOM, bekerja dengan tanggal, mengelola keadaan tanpa server, dan menangani interaksi pengguna. Codebase dapat diperpanjang dengan server yang selaras, backup awan, atau integrasi dengan kalender eksternal melalui Google Calendar API. Mulai dengan grid dasar, tambahkan kegigihan, dan kemudian pada fitur lapisan seperti seret ⁇ dan ⁇ drop dan berulang-ulang peristiwa. Hasilnya adalah kalender penjahit yang berperilaku persis bagaimana Anda membutuhkannya.

Untuk pembacaan lebih lanjut, menjelajahi Pertamina API torage dan Drag and Drop API pada MDN. Happy coding!