Tuesday, March 9, 2010

Tutorial script Javascript : Membuat kalender sederhana dengan Javascript

Di sini saya memilih javascript untuk membuat kalender.
Mengapa saya memilih menggunakan Javascript???? karena javascript menggunakan teknologi client-side. Artinya proses programnya terjadi di client, dan tidak membutuhkan server,.
Script Javascriptnya sebagai berikut :
Kalender.html


<html>
<head>
<title>Kalender</title>
</head>
<body>
<script type="Text/Javascript">
var months = new Array();
months[0] = "Januari";
months[1] = "Peburari";
months[2] = "Maret";
months[3] = "April";
months[4] = "Mei";
months[5] = "Juni";
months[6] = "Juli";
months[7] = "Agustus";
months[8] = "September";
months[9] = "Oktober";
months[10] = "Nopember";
months[11] = "Desember";

var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var hariini=currentDate.getDate();
currentDate.setDate(1);
document.write("<table align='center' border=1 cellpadding=3 cellspacing=0>");
document.write("<tr>");
document.write("<td colspan=7 align='center'><strong>"+ months[currentMonth] +"</strong></td>");
document.write("</tr>")
document.write("<tr bgcolor='#AAAAAA'>");
document.write("<td align='center'>Minggu</td>");
document.write("<td align='center'>Senin</td>");
document.write("<td align='center'>Selasa</td>");
document.write("<td align='center'>Rabu</td>");
document.write("<td align='center'>Kamis</td>");
document.write("<td align='center'>Jumat</td>");
document.write("<td align='center'>Sabtu</td>");
document.write("</tr>");

if (currentDate.getDay() != 0)
{
document.write("<tr>");
for (i = 0; i < currentDate.getDay(); i++)
{
document.write("<td>&nbsp;</td>");
}
}

while (currentDate.getMonth() == currentMonth)
{
if (currentDate.getDay == 0)
{
document.write("<tr>");
}

if (hariini==currentDate.getDate())
{
document.write("<td align='center' bgcolor='#00FF00′> <font color='#0000FF'><strong>" + currentDate.getDate() + "</strong></font></td>");
}

else
{
document.write("<td align='center'>" + currentDate.getDate() + "</td>");
}

if (currentDate.getDay() == 6)
{
document.write("</tr>");
}
currentDate.setDate(currentDate.getDate() + 1);
}

for (i = currentDate.getDay(); i <= 6; i++)
{
document.write("<td>&nbsp;</td>");
}

document.write("</table>");
</script>
</body>
</html>

[View Demo @ http://catment.co.cc/demo/kalender.html]