Daftar Isi:
Pada artikel ini sudah disediakan sebuah kalender sederhana yang terbuat dari HTML, CSS dan Javascript saja.
Silahkan simak bagaimana kalender ini terbuat, mulai dari tampilannya yang sederhana dan logika dari kalendernya itu sendiri.
Baca Juga:
Pendahuluan
Sesuai dengan penjelesan di awal, tampilan dari kalender ini masih sangat sederhana karena hanya menggunakan sintaks HTML dan CSS saja.
Maka dari itu silahkan perindah jika menurut kalian masih terlalu sederhana, tentu saja dengan selera masing-masing.
Sintaks Javascript pada program kalender ini merupakan vanilla Javascript, jadi tidak mengambil dari framework atau library tertentu.
Baca Juga:
Dan kalender ini masih bersifat statis, karena hanya akan menampilkan tanggal-tanggal pada bulan dan tahun saat ini saja.
Berikut ini adalah cuplikan gambar dari hasil yang sudah jadi.
Baca Juga:
Bisa kalian lihat, tampilannya masih sangat sederhana karena memang hanya fokus ke logika dari sintaks Javascript-nya saja.
Sekarang kita lanjut ke bagaimana kalender ini bisa terbentuk dengan sendirinya hanya menggunakan Javascript dan HTML saja.
Baca Juga:
Sintaks Program
Itu tadi sekiranya sedikit pendahuluan dari projek kecil pada artikel kali ini.
Kalau kalian ingin mengetahui sintaks kodenya, silahkan kunjungi alamat berikut, hanpalla/Simple-Calendar (github.com).
Di sana ada 3 buah file yang terdiri dari file HTML, CSS dan Javascript.
Baca Juga:
Silahkan pelajari, salin ataupun mungkin ubah hal yang ingin kalian ubah.
Kalau masih belum paham dengan sintaks kode tersebut, silahkan lanjut ke bagian penjelasan konsep.
Baca Juga:
Penjelasan Konsep
Penjelasan kali ini lebih mengutamakan konsep dari kalender yang akan kita buat.
Untuk penjelasan tentang sintaksnya, silahkan pelajari sendiri dan mungkin saja kalian bisa kembangkan menjadi lebih baik lagi.
Penjelasan pada kali ini sudah terbagi menjadi beberapa bagian, dan langsung saja kita ke bagian pertama.
Baca Juga:
Mencari Waktu Terkini
Pertama, kita cari terlebih dahulu waktu terkini, mulai dari tahun sampai ke detik.
Namun yang akan tampil di kalender hanyalah bulan dan tahunnya saja.
Baca Juga:
Caranya dengan menggunakan fungsi bawaan Javascript, yaitu “new Date ()” dan masukkan nilainya ke sebuah variabel.
Mencari Hari Pertama Pada Bulan Ini
Setelah mendapatkan waktu terkini, kita bisa memperoleh hari pertama pada bulan ini dengan sebuah trik.
Baca Juga:
Kalau kalian tampilkan nilai yang merupakan hasil dari fungsi dari “new Date()”, maka contoh hasilnya adalah seperti berikut.
Jadi nilainya berupa string yang cukup panjang, mulai dari tahun sampai waktu sesuai zona waktu perangkat kita.
Baca Juga:
Kalau kalian perhatikan pada bagian depan, khususnya tiga karakter awal, itu merupakan string yang menandakan hari.
Maka sekarang kita cari nilai pada tanggal pertama di bulan dan tahun ini menggunakan fungsi yang sama.
Setelah itu ubah tipe dari nilainya menjadi bentuk string.
Baca Juga:
Jika sudah menjadi bentuk string, kita ambil 3 karakter terdepan untuk masuk ke dalam sebuah percabangan.
Percabangan ini akan mengembalikan nilai berupa angka yang akan menjadi acuan bahwa tanggal 1 terletak di hari apa.
Baca Juga:
Mencari Umur Bulan Ini
Untuk mencari jumlah hari dalam satu bulan ini cukup membingungkan.
Jadi kita melibatkan fungsi “getDate()” atau fungsi yang akan mengembalikan nilai yang merupakan tanggal.
Cara kita mencari umur dari bulan ini adalah dengan mencari nilai indeks ke-0 menggunakan fungsi “getDate()” pada bulan setelah bulan ini.
Baca Juga:
Karena nilai dari indeks ke-1 setiap bulannya pasti satu.
Namun jika kita tulis indeks ke-0, maka nilainya adalah tanggal terakhir bulan sebelumnya.
Jadi memang cukup tricky dan keren jika diperhatikan.
Baca Juga:
Menambah Tanggal Pada Kalender
Setelah mendapatkan ketiga hal tadi, barulah kita dapat menambahkan setiap tanggal di posisinya yang tepat.
Akan ada sebuah perulangan yang akan mencetak sebuah elemen div sebanyak 35 kali.
Baca Juga:
Namun di setiap increment akan ada sebuah percabangan yang memiliki tugas khusus.
Tugasnya untuk menentukan apakah elemen div tersebut akan bertuliskan angka yang merupakan tanggal atau bertuliskan karakter spasi saja.
Di dalamnya juga ada percabangan lain yang akan menentukan apakah sebuah elemen div memiliki tanggal yang merupakan hari ini.
Baca Juga:
Jika iya, maka elemen div tersebut akan mendapatkan kelas yang nantinya akan berhubungan dengan sintaks CSS.
Elemen div yang mendapatkan kelas khusus tersebut akan memiliki warna background yang berbeda dengan elemen div lainnya.
Kalau kalian lihat pada gambar pertama, elemen div dengan tanggal 11 adalah elemen div yang berbeda sendiri.
Baca Juga:
Karena memang tanggal diambilnya gambar tersebut adalah tanggal 11 Februari tahun 2022.
Rangkuman
Mungkin itu tadi sedikit tutorial tentang pembuatan kalender sederhana menggunakan bahasa pemrograman javascript.
Baca Juga:
Untuk tampilan yang sederhana, silahkan percantik dan buatlah semakin indah.
Namun untuk konsepnya silahkan dipahami, mulailah dari mencari waktu terkini.
Jika sudah dapat, selanjutnya kita bisa menentukan hari pertama pada bulan ini serta mencari jumlah hari pada bulan ini.
Baca Juga:
Dengan diperoleh ketiga poin penting itu, maka penambahan tanggal ke dalam kalender bisa dilakukan.
Intinya kalau gagal, silahkan dicoba lagi.
Sekian dan terima kasih.
