简易日历

代码演示

2009.11

日

一

二

三

四

五

六

 

程序源码

    var $ = function(id) { return document.getElementById(id); };



    var Calendar = function(cID) {

        this.calendar = $(cID);

        var D = new Date();

        this.year = D.getFullYear();

        this.month = D.getMonth() + 1;

        this.date = D.getDate();

        this.$getD = new Date(this.year, this.month, 0).getDate();

        this.onEnd = function(){};

        this.init();

    };

    Calendar.prototype = {

        constructor: Calendar,

        // 程序初始化

        init: function() {

            var _this = this;

            this.drawC( new Date(this.year, this.month, 0).getDate(), new Date(this.year, this.month - 1, 1).getDay(), new Date().getDate());

            $('prevM').onclick = function() { _this.prevM(); };

            $('nextM').onclick = function() { _this.nextM(); };

            $('prevY').onclick = function() { _this.prevY(); };

            $('nextY').onclick = function() { _this.nextY(); };

        },

        // 获得当前年月的日期数

        getDate: function() {

            return new Date(this.year, this.month, 0).getDate();

        },

        // 获取当月的第一天是星期几

        getDay: function() {

            return new Date(this.year, this.month - 1, 1).getDay();

        },

        // 画日历

        drawC: function(max, start, now){

            var html = '', j = 0, d = new Date(), y = d.getFullYear(), m = d.getMonth() + 1;

            html += '<table id="LBody" width="212"><tbody><tr>';

            while(j++ < start) {

                html += '<td></td>';

            }

            for(var i = 0 ; i < max; i++) {

                if((i + 6 + j) % 7 == 0)  html += '<tr>';

                html += '<td><a class=' + ((y == this.year && m == this.month && (i + 1)  == now)  ? 'now' : 'normal') + ' href="javascript:void(0);">' + (i + 1) + '</a></td>';

                if(!((i + j + 1) * 7) / 7) html += '</tr>';

            }

            html += '</tbody><table>';

            this.calendar.innerHTML = html;

            $('showDate').innerHTML = this.year + '.' + this.month;

            this.onEnd();

        },

        // 前一月

        prevM: function() {

            this.month--;

            if(this.month < 1) { this.month = 12;this.year -= 1; }

            this.drawC(this.getDate(), this.getDay(), new Date().getDate());

        },

        // 后一月

        nextM: function() {

            this.month++;

            if(this.month > 12) { this.month = 1;this.year += 1; }

            this.drawC(this.getDate(), this.getDay(), new Date().getDate());

        },

        // 前一年

        prevY: function() {

            this.year--;

            this.drawC(this.getDate(), this.getDay(), new Date().getDate());

        },

        // 后一年

        nextY: function() {

            this.year++;

            this.drawC(this.getDate(), this.getDay(), new Date().getDate());

        }

    }

 

使用说明

直接实例化即可

var c = new Calendar('CContainer');

 

代码示例下载