Java Script的Calendar

来源：互联网发布：太原知达常青藤学校编辑：程序博客网时间：2024/04/29 11:26

1)文件构成

TestCalendar.html
css<div>
calendar.css
js <div>
calendar.js

2) css/calendar.css

    .calendar {
        border          : solid 1px black;
        background      : white;
    }

    .calendar td{
        border          : solid 1px #cccccc;
        text-align      : center;
    }

    .calendar .title{
        background      :#eeeeee;
    }

    .calendar .head{
        background      :#eeeeee;
        width           : 25px;
    }

    .calendar .sunday    a:link, a:visited {
        color           : red;
    }

    .calendar .saturday a:link, a:visited {
        color           : green;
    }

.calendar .normalday a:link, a:visited {

}

    .calendar a:link, a:visited {
        text-decoration : none;
    }

    .calendar a:hover {
        color           : red;
        text-decoration : none;
    }

3) js/calendar.js
/*
* System Name     : Java Script Componet
* Sub System      : Calendar
* Copy Right      : All rights reserved, Copyright(C), FreeWork.
* Date            : 2009-05-12 12:07:26
* Author          : FLYBIRD
* Revision        : 1.00
*/

var calendar;
var dayNames = ["Sun", "Mon", "Tue", "Wen", "Thi", "Fri", "Sat"];

function getDate(obj) {
calendar = new Calendar(obj);
calendar.show();
}

function Calendar(resultObj) {
    this.id         = "calendar";
    this.resultObj = resultObj;
    this.today = new Date(resultObj.value);
    if (isNaN(this.today)){
        this.today = new Date();
    }

    //show
    this.show = function() {
        //create treeview div
        var clDiv = document.getElementById(this.id);

        if (clDiv == null) {
            clDiv                = document.createElement("div");
            clDiv.id             = this.id;
            clDiv.className      = this.id;
            clDiv.style.position = "absolute";
            clDiv.style.top      = this.resultObj.offsetTop + this.resultObj.clientTop + this.resultObj.clientHeight;
            clDiv.style.left     = this.resultObj.offsetLeft;
            document.body.appendChild(clDiv);
        }
        clDiv.innerHTML = this.toHTML();
        clDiv.style.display = "block";
    }

    //change show month
    this.gotoMonth = function(addMonth) {
        this.today = new Date(this.today.getFullYear(),this.today.getMonth() + addMonth,1);
        this.show();
    }

    //set date to text field
    this.setDate = function(txtDate) {
        this.resultObj.value = txtDate;
        this.close();
    }

    //close calendar div
    this.close = function() {
        var clDiv = document.getElementById(this.id);
        clDiv.style.display = "none";
    }

    //toHTML
    this.toHTML = function() {
        var strHTML = "<table border='0'>";

        //title
        strHTML +=    "<tr>";
        strHTML +=    "<td class= 'title' colspan='2'><a href=/"javascript:calendar.gotoMonth(-1)/">previous</a></td>";
        strHTML +=    "<td class= 'title' colspan='2'>" + this.today.getFullYear() + "/" + (this.today.getMonth() + 1) + "</td>";
        strHTML +=    "<td class= 'title' colspan='2'><a href=/"javascript:calendar.gotoMonth(1)/">next</a></td>";
        strHTML +=    "<td class= 'title'><a href=/"javascript:calendar.close()/">X</a></td>";
        strHTML +=    "</tr>";

        //head day name
        strHTML +=    "<tr>";
        for (var i = 0; i < dayNames.length; i ++) {
            strHTML += ("<td class='head'>" + dayNames[i] + "</td>");
        }
        strHTML +=    ("</tr>");

        //begin blank cell
        var firstDay = (new Date(this.today.getFullYear(),this.today.getMonth(),1)).getDay();
        if (firstDay >0){
            strHTML +=    ("<tr>");
            for (var i = 0; i < firstDay; i ++) {
                strHTML +=    ("<td> </td>");
            }
        }

        //date cell
        var dateIdx = 1;
        var curDate = new Date(this.today.getFullYear(),this.today.getMonth(),dateIdx);
        while (curDate.getMonth() == this.today.getMonth()) {
            if (curDate.getDay() == 0) {
                strHTML +=    ("<tr>");
            }
            if (curDate.getDay() == 0) {
                strHTML +=    ("<td class='sunday'>")
            } else if (curDate.getDay() == 6) {
                strHTML +=    ("<td class='saturday'>")
            } else {
                strHTML +=    ("<td class='normalday'>")
            }

strHTML += "<a href=javascript:calendar.setDate('" + this.today.getFullYear() + "/"
+ (this.today.getMonth() + 1) + "/" + dateIdx + "');>" + dateIdx + "</a></td>";

            if (curDate.getDay() == 6) {
                strHTML +=    ("</tr>");
            }
            var curDate = new Date(this.today.getFullYear(),this.today.getMonth(),++dateIdx);
        }

        //end blank cell
        var lastDay = (new Date(this.today.getFullYear(),this.today.getMonth(), dateIdx - 1)).getDay();
        if (lastDay < 6) {
            for (var i = lastDay + 1; i <= 6; i++) {
                strHTML +=    ("<td> </td>");
            }
            strHTML +=    ("</tr>");
        }

        strHTML +=    ("</table>");
        return strHTML;
    }
}

4) TestCalendar.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Calendar Test</title>
    <script src="js/calendar.js"></script>
    <link rel="stylesheet" type="text/css" href="css/calendar.css"/>
</head>

<body>
<form name="frmMain">
    <h1>Calendar Test</h1>
    <input type="text" name="txtDate" />
    <input type="button" value=" ... " onclick="getDate(frmMain.txtDate);" />
</form>
</body>
</html>