万年历的相关组件及其代码,仅供新人参考

依赖文件：jQuery.js、wannianli.css

html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{padding:0;margin:0}
a{text-decoration:none;color:#333}
li{list-style:none}
#wannianli{width:320px;margin:10px auto}
</style>
</head>
<body>

calender.init();

</script>
</body>
</html>

css

/*万年历*/
.minicalc .kcalcr .minicln-controls{position:relative;font-size:0.8em;text-align:center;}
.minicalc .kcalcr .month{padding:16px 0 0 0;text-align:center;font-size:18px;}
.minicalc .mini_calc_next{position:absolute;right:24px;top:12px;width:30px;height:43px;background:url(../images/arrows.png) no-repeat -30px 0px;cursor:pointer;}
.minicalc .mini_calc_prev{position:absolute;left:24px;top:12px;width:30px;height:43px;background:url(../images/arrows.png) no-repeat -1px 0px;cursor:pointer;}
.minicalc .kcalcr .minicalc_box{margin-top:24px}
.minicalc .kcalcr .minicln-table{table-layout:fixed;width:100%;height:300px;margin:0 auto;border-collapse:collapse}
.minicalc .kcalcr .minicln-table .header-days{font-size:0.85em;font-weight:600;}
.minicalc .kcalcr .minicln-table .header-days .header-day{vertical-align:middle;text-align:center;font-size:14px;}
.minicalc .kcalcr .minicln-table tr{height:36px;}

.minicalc .kcalcr .minicln-table tr td{vertical-align:top;border:1px solid #ccc;transition:all 0.3s;cursor:pointer;}
.minicalc .kcalcr .minicln-table tr td:hover{background:#e7fff0;}
.minicalc .kcalcr .minicln-table tr .day.today:hover{background:#e7fff0;}
.minicalc .kcalcr .minicln-table tr .day{width:100%;height:inherit;vertical-align:middle;font-weight: 600;font-size: 16px;color:#686666}
.minicalc .kcalcr .minicln-table tr .day.today{text-decoration:none;background:#e7fff0;}

.red {color:#f84949}
.green {color:green}

function weekends() {
for(var i = 0; i < 7; i++) {
var tr = $('.minicalc').eq(0).find('tr').eq(i);
if(!tr) break;
tr.find('td').eq(0).css('color', '#f84949');
tr.find('td').eq(6).css('color', '#f84949');
}
}

function dom(id) {
return document.getElementById(id);
};

/*通过className获取dom元素进行过滤*/
function domClass(pidDom, sClass) {
var aEle = typeof pidDom == "string" ? dom(pidDom) : pidDom.getElementsByTagName('*');
var arrs = [];
for(var i = 0; i < aEle.length; i++) {
if(aEle[i].className.indexOf(sClass) != -1) {
arrs.push(aEle[i]);
}
}
return arrs;
};

//简单混入
function mixin(obj, obj2) {
for(var k in obj2) {
if(obj2.hasOwnProperty(k)) {
obj[k] = obj2[k];
}
}
return obj;
};

//多对象混入
function mix(target, source) {
var arr = [];
var args = arr.slice.call(arguments);

var i = 1;
if(args.length == 1) {
return target;
};

while((source = args[i++])) {
for(var miniy in source) {
if(source.hasOwnProperty(miniy)) {
target[miniy] = source[miniy];
}
}
}
return target;
};

//构造函数
var miniCalender = function(opts) {
this.id = opts.id;
this.defaults = {
width: 500,
height: 500,
background: "#fff",
color: "#999",
format: "yyyy-MM-dd",
start : 2015 ,
end : 2100
},
this.options = mix(this.defaults, opts); //jquery extend原理
this.yrange = this.options.yrange || miniCalender.YEARS;
this.monthTag = this.options.monthTag || miniCalender.MONTHS;
this.weekTag = this.options.weekTag || miniCalender.WEEKS;
this.dbclick = this.options.dbclick;
this.click = this.options.click;
};

//静态常量
miniCalender.WEEKS = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
miniCalender.MONTHS = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
miniCalender.YEARS = [2015, 2100];

//对miniCalender 函数进行扩展
miniCalender.prototype = {
consturctor: miniCalender,

//初始化
init: function() {
var args = arguments;
var year = "",
month = "";

//如果传进来两个参数，就给year和month赋值，否则采用当前时间
if(args.length == 2) {
year = args[0];
month = args[1];
} else {
var date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
};
//初始化模板
var domObj = this.template(year, month);

var json = {};
domClass(domObj, "mini_calcd").forEach(function(obj) {
json[obj.getAttribute("ymd")] = obj;
});
if(this.success) this.success.call(json);
},

//模板函数
template: function(year, month) {
var $calc = this;
var boxDom = dom($calc.id);
var html = "<div class='minicalc'>" +
"<div class='kcalcr'>" +
" <div class='minicln-controls'>" +
" <div class='minicln-control-button'>" +
" <p class='mini_calc_prev mini_prev'></p>" +
" </div>" +
" <div class='month'>" + year + " 年 " + $calc.monthTag[month - 1] + "</div>" +
" <div class='minicln-control-button rightalign'>" +
" <p class='mini_calc_next mini_next'></p>" +
" </div>" +
" <div class='minicalc_box' id='mini_cacle_" + $calc.id + "'></div>" +
" </div>" +
"</div>" +
"</div>";
boxDom.innerHTML = html;
//给盒子添加样式，比如说宽度，高度，背景色，
$calc.css(boxDom, $calc.options);
//绑定事件,上一年，下一年
$calc.prevEvent(boxDom, year, month);
$calc.nextEvent(boxDom, year, month);

//创建一个表格
var tableDom = $calc.element("table");
$calc.css(tableDom, {
height: $calc.options.height - 65
});
$calc.addClass(tableDom, "minicln-table");
//创建表头
var theadDom = $calc.element("thead");
//创建一个tr
var trDom = $calc.element("tr");
$calc.addClass(trDom, "header-days");
for(var i = 0, len = $calc.weekTag.length; i < len; i++) {
var tdDom = $calc.element("td");
$calc.addClass(tdDom, "header-day");
tdDom.innerHTML = $calc.weekTag[i];
trDom.appendChild(tdDom);
};
//将行添加到表头中
$calc.append(theadDom, trDom);

//创建表体
var tbodyDom = $calc.element("tbody");

//获取当月的天数
var days = $calc.getMonthDay(year, month);
//拿到上一个月的总天数，补齐前面的空格
var pdays = $calc.getMonthDay(year, month - 1);
//创建每个月的第一天的日期对象
var date = new Date(year, month - 1, 1);
var currentDate = new Date();
var cdate = currentDate.getDate();
//获取每个月的第一天是星期几
var week = date.getDay();
var j = 0; //记录天数
var tdHtml = "";
var cmark = false;
var nindex = 1;
var pwdays = pdays - week + 1;
while(true) {
tdHtml += "<tr>";
//拿到一个月有多少天
//拿到这个月第一天是星期几
for(var i = 0; i < 7; i++) {
var mark = "day";
if(j == 0 && i == week) { //就去是寻找每个月第一天是星期几
j++;
if(j == cdate) mark = "day today";
tdHtml += "<td ymd='" + year + "/" + month + "/" + j + "' class='mini_calcd " + mark + "'>1</td>";
cmark = true;
} else if(j > 0 && j < days) {
j++;
if(j == cdate) mark = "day today";
tdHtml += "<td ymd='" + year + "/" + month + "/" + j + "' class='mini_calcd " + mark + "'>" + j + "</td>";
} else {
//td填空格
if(!cmark) {
var oy = year;
if(month == 1) {
oy = year - 1;
}
tdHtml += "<td ymd='" + oy + "/" + (month - 1 == 0 ? 12 : month - 1) + "/" + pwdays + "' class='mini_calcd day empt'>" + pwdays + "</td>";
pwdays++;
} else {
var oy = year;
if(month == 12) oy = year + 1;
tdHtml += "<td ymd='" + oy + "/" + (month + 1) + "/" + nindex + "' class='mini_calcd day empt'>" + nindex + "</td>";
nindex++;
}
}
}
tdHtml += "</tr>";
if(j >= days) break;
};

//追加拼接的日期文本
tbodyDom.innerHTML = tdHtml;
//追加元素
$calc.append(tableDom, theadDom);
$calc.append(tableDom, tbodyDom);
$calc.append(dom("mini_cacle_" + $calc.id), tableDom);

//给所有的td元素绑定点击事件
domClass(tbodyDom, "mini_calcd").forEach(function(obj) {
obj.ondblclick = function() {
var ymd = this.getAttribute("ymd");
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var dataStr = ymd + " " + hour + ":" + min + ":" + sec;
var rdate = new Date(dataStr);
if($calc.dbclick) $calc.dbclick.call(rdate, rdate.format($calc.options.format));
}

obj.onclick = function() {

var ymd = this.getAttribute("ymd");
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var dataStr = ymd + " " + hour + ":" + min + ":" + sec;
var rdate = new Date(dataStr);
if($calc.click) $calc.click.call(rdate, rdate.format($calc.options.format));
}
});
weekends();
return boxDom;
},

nextEvent: function(dom, year, month) { //下一年
var $calc = this;
domClass(dom, "mini_next")[0].onclick = function() {
var m = month + 1;
var y = year;
if(year == $calc.yrange[1] && m > 12) {
alert("你已经到最大年限了...");
return;
}
if(m > 12) {
y = year + 1;
m = 1;
}

$calc.template(y, m);
};
},
prevEvent: function(dom, year, month) { //上一年
var $calc = this;
domClass(dom, "mini_prev")[0].onclick = function() {
var m = month - 1;
var y = year;
if(year == $calc.yrange[0] && m == 0) {
alert("你已经到最小年限了...");
return;
}
if(m == 0) {
y = year - 1;
m = 12;
}
$calc.template(y, m);
};
},
getMonthDay: function(year, month) { //拿到一个月有多少天，getDate()拿到今天是几号
return new Date(year, month, 0).getDate(); //拿到上个月最后一天
},
addClass: function(dom, className) { //添加样式
dom.className = className;
},
append: function(dom, subdom) { //追加元素
dom.appendChild(subdom);
},
element: function(ele) { //创建元素
return document.createElement(ele);
},
css: function(dom, opts) {
for(var miniy in opts) {
var v = opts[miniy];
dom.style[miniy] = (typeof v === "number" ? v + "px" : v);
}
}
};
return miniCalender;
})();

万年历的相关组件及其代码,仅供新人参考

推荐阅读