原生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();
    }
}