Month Calendar (2) : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Calendar »

 

Month Calendar (2)




<html>
<head>
<title>A Calendar</title>

<script language="JavaScript">

    var now = new Date;
    var MyMonth = new Array("January""February""March""April""May"
                            "June""July""August""September""October"
                            "November""December");
    var MyYear = now.getFullYear();
    var Days = new Array(312831303130313130313031);
    var DaysinWeek = 7;
    var Today = now.getDate();
    var ThisMonth = now.getMonth();
    var MonthStart = now.setDate(1);
    var AddDays = now.getDate();
    var DayofWeek = now.getDay();
    var DaysinMonth = Days[now.getMonth()];

    function CreateCurrMonth(TableBG,CellBG){
        // Checks Leap Year
        if ((((MyYear % 4)==0&& ((MyYear % 100)!=0|| ((MyYear % 400)==0)) && (DaysinMonth == 28)) { 
            DaysinMonth = 29;
        }else{
            DaysinMonth = Days[now.getMonth()];
        }

        document.write ("<table cellspacing=0 cellpadding=2 bgcolor=" 
                        TableBG +"><tr><td colspan=7 align=center bgcolor=" 
                        CellBG + "><font face="verdana" size=1><b>" 
                        MyMonth[now.getMonth()] " " + now.getFullYear() 
                        "</b></font></td></tr>");
                        
        document.write ("<tr>");

        // Build rows in a month
        for (i = 0; AddDays < DaysinMonth + 1; i++){
            if (i < DayofWeek){
                document.write ("<td></td>");
            else {
                if ((AddDays == Today&& (now.getMonth() == ThisMonth)){
                  document.write ("<td align="center"><b><font face="verdana" size=1>" + AddDays + "</font></b></td>");
                    AddDays = AddDays + 1
                else {
                  if ((i % 7== 0){
                      document.write ("</tr>");
                      document.write ("<tr>");
                  }
                  document.write ("<td align="center"><font face="verdana" size=1>" + AddDays + "</font></td>");
                  AddDays = AddDays + 1
                }
            }
        }

        document.write ("</tr></table>");

    }

    function AddCalendar(addmonth,TableBG,CellBG){

        var NewMonth = ThisMonth + addmonth

        if (NewMonth > 11){
            NewMonth=(NewMonth-12);
            now.setYear(MyYear + 1);
        }

        now.setMonth(NewMonth);

        DayofWeek = now.getDay();
        AddDays = now.getDate();
        DaysinMonth = Days[now.getMonth()];

        CreateCurrMonth(TableBG,CellBG);

    }

    // Prints today's date

    function TodayDate(){
        document.write ("<p>Today: " + MyMonth[now.getMonth()] " ");
        document.write (Today + ", ");
        document.write (MyYear);

    }
</script>


</head>
<body>
<p>
<script>TodayDate();</script>
</p>

<table border="0" cellspacing="3" cellpadding="0"><tr>
<td valign="top">
<script>CreateCurrMonth("#ffffff","#eeeeee");</script>
</td>
<td valign="top">
<script>AddCalendar(1,"#ffffff","#eeeeee")</script>
</td>
<td valign="top">
<script>AddCalendar(2,"#ffffff","#eeeeee")</script>
</td>
<td valign="top">
<script>AddCalendar(3,"#ffffff","#eeeeee")</script>
</td>

</tr></table>

</body>
</html>



           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Calendar