Calender using JavaScript

Css :

 <style type="text/css">

        .Current

        {

            border: 1px solid #cccccc;

            background-color: #7FFFD4;

            color: GrayText;

        }

        .weekDays

        {

            color: Gray;

            text-decoration: none;

            font-weight: normal;

        }

        .weekend

        {

            background-color: #FFDEAD;

        }

    </style>

  

JavaScript :

<script type="text/javascript">

        var CurrentYear = 0;

        var CurrentMonth = 0;

        var CurrentDay = 0;

        var selectedYear = 0;

        var selectedMonth = 0;

        var selectedDay = 0;

        var elem = null;

        var month = ["January", "February", "March", "April", "May", "june",
                             "July", "August", "September", "October", "November", "December"];

        function DaysInMonth(year, month) {

            return [31, (!(year % 4) && ((year % 100) || !(year % 400))) ? 29 : 28, 31,
                       30, 31, 30, 31, 31, 30, 31, 30, 31][month];

        }

        function CurrYear() {                 // Get Current Year

            var year = new Date().getYear();

            if (year < 1900) {

                return 1900 + year;

            }

            else

                return year;

        }

        function CurrMonth() {             // Get Current Month

            return new Date().getMonth();

        }

        function CurrDay() {                // Get Current week Day (0-6)

            return new Date().getDay();

        }

        function StartDayOfMonth(year, month, day) {    // Get start day of month (0-6)

            var day = new Date(year, month, day);

            return day.getDay();

        }

        function DrawTable() {              // Draw table for calender

            var daysOfMonth = 1;

            var ValidDay = 0

            var startDay = StartDayOfMonth(CurrentYear, CurrentMonth, daysOfMonth);

            var daysInMonth = DaysInMonth(CurrentYear, CurrentMonth);

            var css;

            var HTMLStr = "<table cellspacing = '0' cellpadding = '0' style='width:200px;
                                      height:200px;'>";

            HTMLStr += "<tr><td><table width='100%'>
                                <tr><td><a href='javascript:ChangeYear(-1);'><<</a></td>
                                        <td align='center' style='color:gray; font-family:arial;'>" +

                                               CurrentYear + "</td>
                                        <td align='right'><a href='javascript:ChangeYear(1);'>>></a>
                                        </td>
                                </tr></table></td></tr>";

            HTMLStr += "<tr><td><table width='100%'><tr>
                                        <td ><a href='javascript:ChangeMonth(-1);'><<</a>
                                        </td>
                                        <td align='center' style='color:gray; font-family:arial;'>"
                                               + month[CurrentMonth] + "</td>
                                        <td align='right'>
                                             <a href='javascript:ChangeMonth(1);'>>></a>
                                         </td>
                                 </tr></table></td></tr>";

         HTMLStr += "<tr><td><table width='100%' style='color:gray; font-family:arial;'>           <tr><td>S</td><td>M</td>
<td>T</td><td>W</td><td>T</td>
<td>F</td><td>S</td></tr>
</table></td></tr>";

            HTMLStr += "<tr><td><table width='100%'>";

          
           for (var Week = 0; Week <= 5; Week++) {

                HTMLStr += "<tr>";

                for (var Days = 0; Days <= 6; Days++) {

                    if (Week == 0 && Days == startDay) {

                        ValidDay = 1;

                    }

                    if (ValidDay == 1 && daysOfMonth > daysInMonth) {

                        ValidDay = 0;

                    }

                    if (ValidDay == 1) {

                        if (Days == 0 || Days == 6) {

                            css = "weekend"

                         }

                        else if (daysOfMonth == selectedDay &&
                                   CurrentMonth == selectedMonth &&
                                   CurrentYear == selectedYear) {

                            css = "Current"

                        }

                        else {

                            css = "weekDays";

                        }

                        HTMLStr += "<td align='center' class=" + css + ">" +

                                            "<a href='javascript:SetDate(" + daysOfMonth + "," +
                                                                                           (parseInt(CurrentMonth) + 1) + "," +
                                                                                               CurrentYear + ");'>" + daysOfMonth
                                                 + "</a></td>";

                        daysOfMonth++;

                    }

                    else {

                        HTMLStr += "<td>&nbsp;</td>"

                    }

                }

                HTMLStr += "</tr>";

            }

            HTMLStr += "</table></td><tr></table>";

            return HTMLStr;

        }

        function Show(ID) {               // Show calender in click event  

            var obj = document.getElementById(ID);

            elem = obj;

            if (obj != null && obj.value != "") {

                var DatePart = obj.value.split("-");

                selectedDay = DatePart[0];

                selectedMonth = parseInt(DatePart[1] - 1);

                selectedYear = DatePart[2];

            }

            if (selectedDay != 0 && selectedMonth != 0 && selectedYear != 0) {

                CurrentDay = selectedDay;

                CurrentMonth = selectedMonth;

                CurrentYear = selectedYear;

            }

            else {

                CurrentDay = CurrDay();

                CurrentMonth = CurrMonth();

                CurrentYear = CurrYear();

            }

            var div = document.getElementById("calender");

            div.innerHTML = DrawTable();

            div.style.display = "block";

        }

        function ChangeYear(int) {      // Change current Year

            CurrentYear = parseInt(CurrentYear) + parseInt(int);

            var div = document.getElementById("calender");

            div.innerHTML = DrawTable();

        }

        function ChangeMonth(int) {      // Change  current month

            CurrentMonth = parseInt(CurrentMonth) + parseInt(int);

            if (CurrentMonth > 11) {

                CurrentMonth = 0;

                CurrentYear++;

            }

            else if (CurrentMonth < 0) {

                CurrentMonth = 11;

                CurrentYear--;

            }

            var div = document.getElementById("calender");

            div.innerHTML = DrawTable();

        }

        function SetDate(day, Month, year) {      // Set date in Textbox

            if (elem) {

                if (day != 0 && Month != 0 && year != 0) {

                    elem.value = day + "-" + Month + "-" + year;

                    document.getElementById("calender").style.display = "none";

                }

            }

        }

    </script>

HTML :

<div>

        <div id='calender' style='width: 250px; height: 250px; display: none;'>

        </div>

        <input id="me" type="text" onclick="Show(this.id)" />

    </div>

Result : 

          

If you like then please leave comment for me,