Month Calendar : Calendar : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  GUI Components   » [  Calendar  ]   
 



Month Calendar

Please note that some example is only working under IE or Firefox.


<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>



           
       
Related examples in the same category
1.  HTML Calendar based on DynAPIHas Download File
2.  JavaScript Date Picker based on ComboBoxHas Download File
3.  Calendar Control - Single-Select ImplementationHas Download File
4.  Calendar Control - 2-Up ImplementationHas Download File
5.  Calendar Control - Handling onSelect / onDeselectHas Download File
6.  Calendar Control - Mix/Max ImplementationHas Download File
7.  Calendar Control - Multi-Select ImplementationHas Download File
8.  Calendar Control - Multi-Select 2-up ImplementationHas Download File
9.  Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)Has Download File
10.  Calendar Control - Date Restriction Example (Date Restriction Implementation)Has Download File
11.  Calendar Control - Row Highlight Example (Row Highlight Implementation)Has Download File
12.  Popup calendarHas Download File
13.  Popup Calendar for a textfield
14.  Multiselection Calendar
15.  Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
16.  HTML Date Picker
17.  Date Picker in new windowHas Download File
18.  All browser CalendarHas Download File
19.  DHTML Calendar for the impatientHas Download File
20.  Calendar: special dayHas Download File
21.  Calendar: day infoHas Download File
22.  Calendar: Multiple day selectionHas Download File
23.  Calendar with different themeHas Download File
24.  Calendar with image for each monthHas Download File
25.  Fancy Calendar Has Download File
26.  Another Calendar Has Download File
27.  Date Time PickerHas Download File
28.  Building a Calculator
29.  A Dynamic Calendar Table
30.  Dynamic HTML Calendar
31.   A Static Calendar by JavaScript
32.  Displaying the Calendar
33.  Calendar (IE only)
34.  Calendar in slide tab
35.  Another DHTML Calendar
36.  Event CalendarHas Download File
37.  Open calendarHas Download File
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.