Month Calendar (2) : Calendar « GUI Components « JavaScript DHTML





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(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    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>



           
         
  










Related examples in the same category

1.HTML Calendar based on DynAPI
2.JavaScript Date Picker based on ComboBox
3.Calendar Control - Single-Select Implementation
4.Calendar Control - 2-Up Implementation
5.Calendar Control - Handling onSelect / onDeselect
6.Calendar Control - Mix/Max Implementation
7.Calendar Control - Multi-Select Implementation
8.Calendar Control - Multi-Select 2-up Implementation
9.Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
10.Calendar Control - Date Restriction Example (Date Restriction Implementation)
11.Calendar Control - Row Highlight Example (Row Highlight Implementation)
12.Popup calendar
13.Month Calendar
14.Popup Calendar for a textfield
15.Multiselection Calendar
16.Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
17.HTML Date Picker
18.Date Picker in new window
19.All browser Calendar
20.DHTML Calendar for the impatient
21.Calendar: special day
22.Calendar: day info
23.Calendar: Multiple day selection
24.Calendar with different theme
25.Calendar with image for each month
26.Fancy Calendar
27.Another Calendar
28.Date Time Picker
29.Building a Calculator
30.A Dynamic Calendar Table
31.Dynamic HTML Calendar
32. A Static Calendar by JavaScript
33.Displaying the Calendar
34.Calendar (IE only)
35.Calendar in slide tab
36.Another DHTML Calendar
37.Event Calendar
38.Open calendar
39.swazz calendar 1.0
40.jquery calendar