Kalander adalah benda yang sangat penting. Dengan kalander kita dapat mengetahui tanggal, bulan dan tahun, sehingga apapun kegiatan kita, hal-hal yang kita rencanakan, bisa dengan baik. Begitu pentingnya fungsi kalaner ini, dapat dipastikan setiap rumah pasti memasang kalander, baik itu kalander cetak, ataupun virtual atau digital seperti kalander pada desktop pc atau notebook.
Bahkan di jam tangan, gadget, handphone, televisi dan perlatan elektronik bervisual pasti memiliki kalaner digital. Begitu juga pada halaman web dapat ditambahkan aplikasi penggunan kalander.
Pada kali ini akan dijelaskan bagaimana Membuat Kalender Dasar Dengan CSS Pada Halaman Web
Kalender Dasar merupakan kalender yang sederhana dan elegan dengan menampilkan hari-hari pada tiap bulannya. Dengan menggunakan CSS akan memungkinkan untuk memudahkan dalam merubah tampilan, mulai dari dimensi kalender, warna, sampai font yang digunakan.
Berikut ini Langkah-Langkah Membuat Kalender Dasar Dengan CSS sebagai berikut :
- Buka terlebih dahulu notepad atau sublime text atau bisa juga menggunakan yang lain.
- Selanjutnya Tinggal mengetikan kode seperti dibawah ini.
<html>
<title> Kalender Dasar </title>
<head>
<style type="text/css">
/* CSS untuk tabel kalender*/
.main {
width:200px;
border:1px solid black;
}
/* CSS untuk tabel bulan*/
.bulan {
background-color:black;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel minggu*/
.minggu{
background-color:gray;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel hari*/
.hari {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
/* CSS untuk tabel hari ini*/
.hari #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="kalenderdasar.js"></script>
</head>
<body>
<script type="text/javascript">
// mendeklarasikan tanggal dan hari
var tanggalhariini=new Date()
//untuk mendapatkan bulan(1-12)
var bulan1=tanggalhariini.getMonth()+1
//menunjukkan tahun
var tahun1=tanggalhariini.getFullYear()
document.write(membuatKalender(bulan1 ,tahun1, "main", "bulan", "minggu", "hari", 1));
</script>
</body>
</html>
<title> Kalender Dasar </title>
<head>
<style type="text/css">
/* CSS untuk tabel kalender*/
.main {
width:200px;
border:1px solid black;
}
/* CSS untuk tabel bulan*/
.bulan {
background-color:black;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel minggu*/
.minggu{
background-color:gray;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel hari*/
.hari {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
/* CSS untuk tabel hari ini*/
.hari #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="kalenderdasar.js"></script>
</head>
<body>
<script type="text/javascript">
// mendeklarasikan tanggal dan hari
var tanggalhariini=new Date()
//untuk mendapatkan bulan(1-12)
var bulan1=tanggalhariini.getMonth()+1
//menunjukkan tahun
var tahun1=tanggalhariini.getFullYear()
document.write(membuatKalender(bulan1 ,tahun1, "main", "bulan", "minggu", "hari", 1));
</script>
</body>
</html>
- Simpan dengan nama sebagai contoh "kalender_dasar" dan simpan pada directory xampp/htdocs/kalender buat terlebih dahulu folder "kalender" pada directory htdocs dan hasilnya seperti pada gambar dibawah ini seperti.
Langkah selanjutnya adalah membuat Javascript untuk kalenderdasar.js pada script diatas. Langsung saja buat File-New pada notepad dan ketikan kode javascript dibawah ini dan berikan nama "kalenderdasar.js"
function membuatKalender(bulan, tahun, bulan2, bulan1, hari1, hari, border){
var namabulan=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
var angkatanggal=[31,0,31,30,31,30,31,31,30,31,30,31];
var mengkonfigurasiKalender = new Date(tahun, bulan-1, 1);
mengkonfigurasiKalender.od=mengkonfigurasiKalender.getDay()+1;
var tanggalhariini=new Date()
var tanggal=(tahun==tanggalhariini.getFullYear() && bulan==tanggalhariini.getMonth()+1)? tanggalhariini.getDate() : 0
angkatanggal[1]=(((mengkonfigurasiKalender.getFullYear()%100!=0)&&(mengkonfigurasiKalender.getFullYear()%4==0))||(mengkonfigurasiKalender.getFullYear()%400==0))?29:28;
var t='<div class="'+bulan2+'"><table class="'+bulan2+'" cols="7" cellpadding="0" border="'+border+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+bulan1+'">'+namabulan[bulan-1]+' - '+tahun+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+hari1+'">'+"MSSRKJS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-mengkonfigurasiKalender.od>=0)&&(i-mengkonfigurasiKalender.od<angkatanggal[bulan-1]))? i-mengkonfigurasiKalender.od+1 : ' ';
if (x==tanggal)
x='<span id="today">'+x+'</span>'
t+='<td class="'+hari+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
var namabulan=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
var angkatanggal=[31,0,31,30,31,30,31,31,30,31,30,31];
var mengkonfigurasiKalender = new Date(tahun, bulan-1, 1);
mengkonfigurasiKalender.od=mengkonfigurasiKalender.getDay()+1;
var tanggalhariini=new Date()
var tanggal=(tahun==tanggalhariini.getFullYear() && bulan==tanggalhariini.getMonth()+1)? tanggalhariini.getDate() : 0
angkatanggal[1]=(((mengkonfigurasiKalender.getFullYear()%100!=0)&&(mengkonfigurasiKalender.getFullYear()%4==0))||(mengkonfigurasiKalender.getFullYear()%400==0))?29:28;
var t='<div class="'+bulan2+'"><table class="'+bulan2+'" cols="7" cellpadding="0" border="'+border+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+bulan1+'">'+namabulan[bulan-1]+' - '+tahun+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+hari1+'">'+"MSSRKJS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-mengkonfigurasiKalender.od>=0)&&(i-mengkonfigurasiKalender.od<angkatanggal[bulan-1]))? i-mengkonfigurasiKalender.od+1 : ' ';
if (x==tanggal)
x='<span id="today">'+x+'</span>'
t+='<td class="'+hari+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
Setelah itu jalankan perintah untuk memanggil program kalender_dasar.html yang barusan dibuat, dan hasilnya adalah sebagai berikut :
Untuk informasi lebih lanjut dapat dilihat pada bagian video dibawah ini :
Demikianlah sedikit informasi yang dapat saya bagikan tentang Membuat Kalender Dasar Dengan CSS Pada Halaman Web semoga informasi diatas dapat berguna dan bermanfaat bagi kita semua, sekian dan terimakasih.
