原生javascript-日历插件编写

在线实例：http://lgy.1zwq.com/calendar/

按照我们常用的日历格式，是7*6的格子，所以生成格子的总数就确定为42

例子：（如：2013年8月，这个时间为例子）

/*----------生成日历格子：

-----------------------------------------------------*/

       （1）获取本月的第一天是星期几--（为第三步做铺垫）

/*--注意：传递的月份是7，而不是8
------------------------------------*/
var first_day = new Date(2013,7,1).getDay();

　　（2）获取本月的最后一天是几号

var final_date = new Date(2013,8,0).getDate(); //下个月的0号，就是返回本月份最后一天的date

 　　（3）上个月，在本月份显示的天数

             这里我是用循环判断输出的，判断的依据就是 first_day（值为4），上个月的最后一天是几号，就是 new Date(2013,7,0).getDate()（值为31），然后就可以循环输出

for(){.........}

　　（4）下个月，在本月份后面显示的天数

var surplus = 42 - first_day - final_date;  // 42-4-31 = 7;
//剩下的和第三步一样，也是循环输出

/*-------填充日历总代码：

-----------------------------------------------------------*/

复制代码
/*这里，写成传参数，为切换事件铺垫
-------------------*/
fillDate:function(year,month){
　　　　 //本月份第一天是星期几 -为上个月的显示天数做铺垫
        var first_day = new Date(year,month,1).getDay(),
        //本月份最后一天是几号
            final_date = new Date(year,month+1,0).getDate(),
        //上个月的最后一天是几号
            last_date = new Date(year,month,0).getDate(),
        //剩余的格子数--即排在后面的格子数
            surplus = 42 - first_day - final_date;
        /*填充日历执行
        ---------------------------*/   
        var html = '';
        //上个月的显示天数
        for(var i=0;i<first_day;i++){
            html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
        }
        //本月的显示天数
        for(var j=0;j<final_date;j++){       
            html+='<span>'+(j+1)+'</span>';
        }
        //下个月的显示天数
        for(var k=0;k<surplus;k++){
            html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
        }
        //fill
        this.oBody.innerHTML = html;
    }

复制代码

 /*------------全部源代码--------------

----------------------------------------------------*/

复制代码
function LGY_calendar(option){
    this.oWrap = this.getId(option.wrapId);
    this.oHead = this.getByClassName('g-calendar-hd',this.oWrap)[0];
    this.oBody = this.getByClassName('g-calendar-bd',this.oWrap)[0];
    this.oTit = this.getByClassName('g-calendar-tit',this.oWrap)[0];
    this.oPRev = this.getByClassName('g-calendar-prev',this.oWrap)[0];
    this.oNext = this.getByClassName('g-calendar-next',this.oWrap)[0];
    this.init();
}
LGY_calendar.prototype = {
    ///////////获取ID元素
    getId:function(id){
        return document.getElementById(id);
    },
    ////////获取CSS类名元素
    getByClassName:function(className,parent){
        var elem = [],
            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
            p = new RegExp("(^|//s)"+className+"(//s|$)");
        for(var n=0,i=node.length;n<i;n++){
            if(p.test(node[n].className)){
                elem.push(node[n]);
            }
        }
        return elem;
    },
    //填充日历
    fillDate:function(year,month){
        //本月份第一天是星期几-为显示上个月的天数做铺垫
        var first_day = new Date(year,month,1).getDay(),
        //如果刚好是星期天，则空出一行（显示上个月的天数）
            first_day = first_day == 0?first_day=7:first_day;
        //本月份最后一天是几号
            final_date = new Date(year,month+1,0).getDate(),
        //上个月的最后一天是几号
            last_date = new Date(year,month,0).getDate(),
        //剩余的格子数--即排在末尾的格子数
            surplus = 42 - first_day - final_date;
        /*设置表头的日历
        ---------------------------*/
        this.oHead.innerHTML = year+'年'+(month+1)+'月';
        /*填充日历执行
        ---------------------------*/   
        var html = '';
        //上个月的显示天数
        for(var i=0;i<first_day;i++){
            html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
        }
        //本月的显示天数
        for(var j=0;j<final_date;j++){       
            html+='<span>'+(j+1)+'</span>';
        }
        //下个月的显示天数
        for(var k=0;k<surplus;k++){
            html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
        }
        //fill
        this.oBody.innerHTML = html;
        // 当前状态
        if(year==this.c_year&&this.c_month==month){
            this.oBody.getElementsByTagName('span')[first_day+this.date-1].className='g-calendar-on';
        }
    },
    // next切换
    next:function(){
        var _that = this;
        this.oNext.onclick = function(){
            _that.month++;
            if(_that.month>11){
                _that.month = 0;
                _that.year++;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        }
       
    },
    // prev切换
    prev:function(){
        var _that = this;
        this.oPrev.onclick = function(){
            _that.month--;
            if(_that.month<0){
                _that.month = 11;
                _that.year--;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        }
       
    },
    init:function(){
        this.oTit.innerHTML = '<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>';
        // 获取今天的日历时间
        var now = new Date();
        this.c_year = this.year = now.getFullYear();
        this.c_month = this.month = now.getMonth();
        this.date = now.getDate();
        // 初始化--填充日历
        this.fillDate(this.year,this.month);
        //next切换
        this.next();
        //prev切换
        this.prev();
    }
}