Wednesday 23 May 2012

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,
 

No comments:

Post a Comment