Rabu, 30 Oktober 2013

Cara Membuat Kalender Sederhana Pada Html

Pada Kesempatan ini admin blog akan memberikan ilmu yang didapatnya bagaimana cara membuat kalender pada web atau pada html tepatnya. langsung saja anda lihat sendiri skrip dari pembuatan kalender tersebut :

buatlah file calender.js
monthnames = new Array(
                        "Januari",
                        "Februari",
                        "Maret",
                        "April",
                        "Mei",
                        "Juni",
                        "Juli",
                        "Agustus",
                        "September",
                        "Oktober",
                        "Nopember",
                        "Desember");
var linkcount=0;

function addlink(month, day, href) {
        var entry = new Array(3);
        entry[0] = month;
        entry[1] = day;
        entry[2] = href;
        this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
linkdays.addlink(3, 1, "03-01");
linkdays.addlink(3, 2, "03-02");
linkdays.addlink(3, 3, "03-03");
linkdays.addlink(3, 4, "03-04");
linkdays.addlink(3, 5, "03-05");
linkdays.addlink(3, 6, "03-06");
linkdays.addlink(3, 7, "03-07");
linkdays.addlink(3, 8, "03-08");
linkdays.addlink(3, 9, "03-09");
linkdays.addlink(3, 10, "03-10");
linkdays.addlink(3, 11, "03-11");
linkdays.addlink(3, 12, "03-12");
linkdays.addlink(3, 13, "03-13");
linkdays.addlink(3, 14, "03-14");
linkdays.addlink(3, 15, "03-15");
linkdays.addlink(3, 16, "03-16");
linkdays.addlink(3, 17, "03-17");
linkdays.addlink(3, 18, "03-18");
linkdays.addlink(3, 19, "03-19");
linkdays.addlink(3, 20, "03-20");
linkdays.addlink(3, 21, "03-21");
linkdays.addlink(3, 22, "03-22");
linkdays.addlink(3, 23, "03-23");
linkdays.addlink(3, 24, "03-24");
linkdays.addlink(3, 25, "03-25");
linkdays.addlink(3, 26, "03-26");
linkdays.addlink(3, 27, "03-27");
linkdays.addlink(3, 28, "03-28");
linkdays.addlink(3, 29, "03-29");
linkdays.addlink(3, 30, "03-30");
linkdays.addlink(3, 31, "03-31");
linkdays.addlink(4, 1, "04-01");
linkdays.addlink(4, 2, "04-02");
linkdays.addlink(4, 3, "04-03");
linkdays.addlink(4, 4, "04-04");
linkdays.addlink(4, 5, "04-05");
linkdays.addlink(4, 6, "04-06");
linkdays.addlink(4, 7, "04-07");
linkdays.addlink(4, 8, "04-08");
linkdays.addlink(4, 9, "04-09");
linkdays.addlink(4, 10, "04-10");
linkdays.addlink(4, 11, "04-11");
linkdays.addlink(4, 12, "04-12");
linkdays.addlink(4, 13, "04-13");
linkdays.addlink(4, 14, "04-14");
linkdays.addlink(4, 15, "04-15");
linkdays.addlink(4, 16, "04-16");
linkdays.addlink(4, 17, "04-17");
linkdays.addlink(4, 18, "04-18");
linkdays.addlink(4, 19, "04-19");
linkdays.addlink(4, 20, "04-20");
linkdays.addlink(4, 21, "04-21");
linkdays.addlink(4, 22, "04-22");
linkdays.addlink(4, 23, "04-23");
linkdays.addlink(4, 24, "04-24");
linkdays.addlink(4, 25, "04-25");
linkdays.addlink(4, 26, "04-26");
linkdays.addlink(4, 27, "04-27");
linkdays.addlink(4, 28, "04-28");
linkdays.addlink(4, 29, "04-29");
linkdays.addlink(4, 30, "04-30");
linkdays.addlink(5, 1, "05-01");
linkdays.addlink(5, 2, "05-02");
linkdays.addlink(5, 3, "05-03");
linkdays.addlink(5, 4, "05-04");
linkdays.addlink(5, 5, "05-05");
linkdays.addlink(5, 6, "05-06");
linkdays.addlink(5, 7, "05-07");
linkdays.addlink(5, 8, "05-08");
linkdays.addlink(5, 9, "05-09");
linkdays.addlink(5, 10, "05-10");
linkdays.addlink(5, 11, "05-11");
linkdays.addlink(5, 12, "05-12");
linkdays.addlink(5, 13, "05-13");
linkdays.addlink(5, 14, "05-14");
linkdays.addlink(5, 15, "05-15");
linkdays.addlink(5, 16, "05-16");
linkdays.addlink(5, 17, "05-17");
linkdays.addlink(5, 18, "05-18");
linkdays.addlink(5, 19, "05-19");
linkdays.addlink(5, 20, "05-20");
linkdays.addlink(5, 21, "05-21");
linkdays.addlink(5, 22, "05-22");
linkdays.addlink(5, 23, "05-23");
linkdays.addlink(5, 24, "05-24");
linkdays.addlink(5, 25, "05-25");
linkdays.addlink(5, 26, "05-26");
linkdays.addlink(5, 27, "05-27");
linkdays.addlink(5, 28, "05-28");
linkdays.addlink(5, 29, "05-29");
linkdays.addlink(5, 30, "05-30");
linkdays.addlink(5, 31, "05-31");
linkdays.addlink(6, 1, "06-01");
linkdays.addlink(6, 2, "06-02");
linkdays.addlink(6, 3, "06-03");
linkdays.addlink(6, 4, "06-04");
linkdays.addlink(6, 5, "06-05");
linkdays.addlink(6, 6, "06-06");
linkdays.addlink(6, 7, "06-07");
linkdays.addlink(6, 8, "06-08");
linkdays.addlink(6, 9, "06-09");
linkdays.addlink(6, 10, "06-10");
linkdays.addlink(6, 11, "06-11");
linkdays.addlink(6, 12, "06-12");
linkdays.addlink(6, 13, "06-13");
linkdays.addlink(6, 14, "06-14");
linkdays.addlink(6, 15, "06-15");
linkdays.addlink(6, 16, "06-16");
linkdays.addlink(6, 17, "06-17");
linkdays.addlink(6, 18, "06-18");
linkdays.addlink(6, 19, "06-19");
linkdays.addlink(6, 20, "06-20");
linkdays.addlink(6, 21, "06-21");
linkdays.addlink(6, 22, "06-22");
linkdays.addlink(6, 23, "06-23");
linkdays.addlink(6, 24, "06-24");
linkdays.addlink(6, 25, "06-25");
linkdays.addlink(6, 26, "06-26");
linkdays.addlink(6, 27, "06-27");
linkdays.addlink(6, 28, "06-28");
linkdays.addlink(6, 29, "06-29");
linkdays.addlink(6, 30, "06-30");

monthdays = new Array(12);
    monthdays[0]=31;
    monthdays[1]=28;
    monthdays[2]=31;
    monthdays[3]=30;
    monthdays[4]=31;
    monthdays[5]=30;
    monthdays[6]=31;
    monthdays[7]=31;
    monthdays[8]=30;
    monthdays[9]=31;
    monthdays[10]=30;
    monthdays[11]=31;

var todayDate = new Date();

thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) monthdays[1]++; startspaces=thisdate; while (startspaces > 7) startspaces-=7;

startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;

document.write("</pre>
");
document.write("
");document.write("");document.write("");document.write("");document.write("");document.write("");document.write("");document.write("");document.write("");document.write("");document.write("");for (s=0;s document.write("");}count=1;while (count for (b = startspaces;b linktrue=false; document.write(""); count++; } document.write(""); document.write(""); startspaces=0;}document.write("
<table width="100%" border="0" cellspacing="1" cellpadding="0&quot;);">
<tbody>
<tr>
<td colspan="7" height="20"><center><strong><span style="color: black; font-size: small;">"
+ monthnames[thismonth] + " " + thisyear
+ "</span></strong></center></td>
</tr>
<tr>
<td align="center" bgcolor="#FF0000"><span style="color: red; font-size: xx-small;">M</span></td>
<td align="center" bgcolor="#0000FF"><span style="color: white; font-size: xx-small;">S</span></td>
<td align="center" bgcolor="#0000FF"><span style="color: white; font-size: xx-small;">S</span></td>
<td align="center" bgcolor="#0000FF"><span style="color: white; font-size: xx-small;">R</span></td>
<td align="center" bgcolor="#0000FF"><span style="color: white; font-size: xx-small;">K</span></td>
<td align="center" bgcolor="GREEN"><span style="color: green; font-size: xx-small;">J</span></td>
<td align="center" bgcolor="#0000FF"><span style="color: white; font-size: xx-small;">S</span></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF"><span style="color: black; font-size: xx-small;"><span style="color: black; font-size: xx-small;">");
 for (c=0;c if (linkdays[c] != null) {
 if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
 //document.write("<a href="\&quot;kalender.php?op=sman1&tanggal=2007-&quot;">");
 linktrue=true;
 }
 }
 }
 if (count if (b==0) {
 document.write("<span style="color: red;">");}
 if (b==5) {
 document.write("<span style="color: green;">");}
 if (count==thisdate) {
 document.write("
</span></span></a></span></span>
<table width="89%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr bgcolor="blue">
<td>
<span style="color: white; font-size: xx-small;">");}

 document.write(count);

 if (count==thisdate) {
 document.write("</span></td>
</tr>
</tbody>
</table>
<span style="color: black; font-size: xx-small;"><a href="\&quot;kalender.php?op=sman1&tanggal=2007-&quot;"><span style="color: red;"><span style="color: green;">
");}
 if (b==0){
 document.write("</span>");}
 if (b==5){
 document.write("</span>");}

 }
 else {
 document.write(" ");
 }
 if (linktrue)
 document.write("</a>");
 document.write("</span></td>
</tr>
</tbody>
</table>
<pre>
");
-------------------------------
buatlah file index.html

Untitled Document

</pre>
<table width="23%" border="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<pre>
-------------------------------
<script type="text/javascript" src="calender.js">// <![CDATA[
 // ]]></script>

inilah perintah untuk memanggil file calender.js yang merupakan file javascript.

Tidak ada komentar:

Posting Komentar