Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Thursday, January 25, 2018

Calendar Using JavaScript

<html>
<head>

    <style type="text/css">
        span.label {
            color: black;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 13px Arial
        }
        span.c1 {
            cursor: hand;
            color: black;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 13px Arial
        }
        span.c2 {
            cursor: hand;
            color: red;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 13px Arial
        }
        span.c3 {
            cursor: hand;
            color: #b0b0b0;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 12px Arial
        }
    </style>

    <script type="text/javascript">

        function maxDays(mm, yyyy) {
            var mDay;
            if ((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)) {
                mDay = 30;
            }
            else {
                mDay = 31
                if (mm == 1) {
                    if (yyyy / 4 - parseInt(yyyy / 4) != 0) {
                        mDay = 28
                    }
                    else {
                        mDay = 29
                    }
                }
            }
            return mDay;
        }

        function changeBg(id) {
            if (eval(id).style.backgroundColor != "yellow") {
                eval(id).style.backgroundColor = "yellow"
            }
            else {
                eval(id).style.backgroundColor = "#ffffff"
            }
        }

        function writeCalendar() {
            var now = new Date
            var dd = now.getDate()
            var mm = now.getMonth()
            var dow = now.getDay()
            var yyyy = now.getFullYear()

            var arrM = new Array("January", "February", "March",
                "April", "May", "June", "July", "August",
                "September", "October", "November", "December")

            var arrY = new Array()
            for (ii = 0; ii <= 4; ii++) {
                arrY[ii] = yyyy - 2 + ii
            }
            var arrD = new Array("Sun", "Mon", "Tue",
                "Wed", "Thu", "Fri", "Sat")

            var text = ""
            text = "<form name=calForm>"
            text += "<table border=1>"
            text += "<tr><td>"
            text += "<table width=100%><tr>"
            text += "<td align=left>"
            text += "<select name=selMonth onChange='changeCal()'>"
            for (ii = 0; ii <= 11; ii++) {
                if (ii == mm) {
                    text += "<option value= " + ii + " Selected>"
                        + arrM[ii] + "</option>"
                }
                else {
                    text += "<option value= " + ii + ">"
                        + arrM[ii] + "</option>"
                }
            }
            text += "</select>"
            text += "</td>"
            text += "<td align=right>"
            text += "<select name=selYear onChange='changeCal()'>"
            
            for (ii = 0; ii <= 4; ii++) {
                if (ii == 2) {
                    text += "<option value= " + arrY[ii] + " Selected>"
                        + arrY[ii] + "</option>"
                }
                else {
                    text += "<option value= " + arrY[ii] + ">"
                        + arrY[ii] + "</option>"
                }
            }
            text += "</select>"
            text += "</td>"
            text += "</tr></table>"
            text += "</td></tr>"
            text += "<tr><td>"
            text += "<table border=1>"
            text += "<tr>"
            for (ii = 0; ii <= 6; ii++) {
                text += "<td align=center><span class=label>" + 
                   arrD[ii] +
                    "</span></td>"
            }
            text += "</tr>"
            aa = 0
            for (kk = 0; kk <= 5; kk++) {
                text += "<tr>"
                for (ii = 0; ii <= 6; ii++) {
                    text += "<td align=center><span id=sp" + aa +
                        " onClick='changeBg(this.id)'>1</span></td>"
                    aa += 1
                }
                text += "</tr>"
            }
            text += "</table>"
            text += "</td></tr>"
            text += "</table>"
            text += "</form>"
            document.write(text)
            changeCal()
        }
        function changeCal() {
            var now = new Date
            var dd = now.getDate()
            var mm = now.getMonth()
            var dow = now.getDay()
            var yyyy = now.getFullYear()
            var currM = parseInt(document.calForm.selMonth.value)
            var prevM
            if (currM != 0) {
                prevM = currM - 1
            }
            else {
                prevM = 11
            }
            var currY = parseInt(document.calForm.selYear.value)
            var mmyyyy = new Date()
            mmyyyy.setFullYear(currY)
            mmyyyy.setMonth(currM)
            mmyyyy.setDate(1)
            var day1 = mmyyyy.getDay()
            if (day1 == 0) {
                day1 = 7
            }
            var arrN = new Array(41)
            var aa
            for (ii = 0; ii < day1; ii++) {
                arrN[ii] = maxDays((prevM), currY) - day1 + ii + 1
            }
            aa = 1
            for (ii = day1; ii <= day1 + maxDays(currM, currY) - 1; ii++) 
           {
                arrN[ii] = aa
                aa += 1
            }
            aa = 1
            for (ii = day1 + maxDays(currM, currY); ii <= 41; ii++) {
                arrN[ii] = aa
                aa += 1
            }
            for (ii = 0; ii <= 41; ii++) {
                eval("sp" + ii).style.backgroundColor = "#FFFFFF"
            }
            var dCount = 0
            for (ii = 0; ii <= 41; ii++) {
                if (((ii < 7) && (arrN[ii] > 20)) || ((ii > 27) &&
                     (arrN[ii] < 20))) {
                    eval("sp" + ii).innerHTML = arrN[ii]
                    eval("sp" + ii).className = "c3"
                }
                else {
                    eval("sp" + ii).innerHTML = arrN[ii]
                    if ((dCount == 0) || (dCount == 6)) {
                        eval("sp" + ii).className = "c2"
                    }
                    else {
                        eval("sp" + ii).className = "c1"
                    }
                    if ((arrN[ii] == dd) && (mm == currM) &&
                        (yyyy == currY)) {
                    eval("sp" + ii).style.backgroundColor = "#90EE90"
                    }
                }
                dCount += 1
                if (dCount > 6) {
                    dCount = 0
                }
            }
        }
    </script>
</head>

<body>
<script type="text/javascript">writeCalendar()</script>
</body>

</html>
Result:

5 comments:

  1. Proper documentation: The presentation of a flow chart, sometimes help in proper documentation of your assignment. The different steps or processes, written in an elaborated way often gets messed up due to confusion. However, the flowchart can help you in arranging your documents properly in a synchronized way.
    Java Assignment help
    Law assignment help

    ReplyDelete
  2. Assignmentservicerating is best reviews site.We at Top Quality Assignment believe that there is no shortcut to success and to attain success, hard work, dedication, and commitment must be present.AllAssignmentHelp reviews  best reviews site.
    All Assignment Help reviews 

    ReplyDelete
  3. It is one of the finest websites I have stumbled upon. It is not only well developed, but has good content as well. It could prove to be an inspiration for many other entrepreneurs. Our company is into assignment writing service sector and helps pupils in completing their academic tasks. Students can use our service for the same purpose. make my assignment

    ReplyDelete
  4. Nice post.. Assignment help  is not a big deal now because our experts of Ireland have deep knowledge of every subject and they are available at affordable price. The students of ireland are now free, because the burden of completing the assignment on time has fallen from their head and now they enjoying their higher grades in college.

    ReplyDelete

More Posts

FOLLOW