自己動手—-寫JavaScript日歷(1)

最近要用到一個js日歷,是那種顯示在頁面上的,而不是彈出窗口的,網上搜索,大多是彈出窗口的.
    有一些博客,像blogjava用的日歷就是我想要的類型,粗看一下,都和html高耦合,用起來不方便,所以決定自己寫一個簡單的日歷. 

說簡單,但至少要實現以下幾點:

1.與html代碼解耦
// 這種方式使用,與html代碼解耦
var calendar = new Calendar();

window.onload = function(){
   calendar.show("test"); // 元素的id,或DOM對象
};

2.可配置的外觀,俗稱皮膚
@charset "utf-8";
/* calendar 默認皮膚 */

.calendar{border:solid 1px gray;margin:0 auto;width:294px;position:relative;}
.calendar *{margin:0;padding:0}
.calendar .today{text-align:center;}
.calendar .today a{text-decoration:none;}
.calendar .body{height:inherit;margin: 5px 0 9px;}
.calendar .body .table .col{width:42px;float:left;padding:2px 0 2px 0;position:relative;} /* 列 */
…

3.可自定義渲染器
function _defaultTodayRenderer(today,cal){// 默認的TodayRenderer
        return "今天" + DateUtil.format(cal.today,'yyyy-MM-dd');
    }
    function _defaultHeadRenderer(week,cal){
        var arr = ['日','一','二','三','四','五','六'];
        return arr[week];
    }
    function _defaultDayRenderer(week,day,cal,isToday){ // day = -1 時,表示空格
        if(day == -1){
            return " ";   
        }else{
            if(isToday){
                return "<span style='color:red'>" + day + "</span>";   
            }
            return day + "";   
        }
    }
到目前為止,以上基本實現,正在完善,並考慮添加新功能.這篇先不上完整代碼,上幾張圖.

 

本文出自“pcenshao”