思路:
1、获取当月第一天是周几
2、获取当月共几天
通过获取下月的第0天,即是当月最后一天日期
3、通过二维数组构造当月日历
4、将获取到的日期第一天在日历中展示..
知识点:
1、js获取当月的天数
getDate() 方法可返回月份的某一天,返回值是 1 ~ 31 之间的一个整数。
var d = new Date()
document.write(d.getDate())
输出:17
getDay() 方法可返回表示星期的某一天的数字,返回值是 0(周日) 到 6(周六) 之间的一个整数。
var d=new Date()
document.write(d.getDay())
输出:3
var d = new Date();
//d.getMonth()+1代表下个月,月份索引从0开始,即当前月为6月时,getMonth()返回值为5,创建日期时同理
//此处构造的日期为下个月的第0天,天数索引从1开始,第0天即代表上个月的最后一天
var curMonthDays = new Date(d.getFullYear(), (d.getMonth()+1), 0).getDate();
alert("本月共有 "+ curMonthDays +" 天");
2、构造当月日历二维数组
bulidCal : function(iYear, iMonth) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth - 1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
var iVarDate = 1;
var d, w;
aMonth[0][0] = "日";
aMonth[0][1] = "一";
aMonth[0][2] = "二";
aMonth[0][3] = "三";
aMonth[0][4] = "四";
aMonth[0][5] = "五";
aMonth[0][6] = "六";
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
}
获取当月第一天是周几:
var dCalDate = new Date(iYear, iMonth - 1, 1);
var iDayOfFirst = dCalDate.getDay();
获取当月共几天:
getDaysInmonth : function(iMonth, iYear){
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
3、构造当月日历HTML
drawCal : function(iYear, iMonth ,signList) {
var myMonth = calUtil.bulidCal(iYear, iMonth);
var htmls = new Array();
htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
");htmls.push("
" + myMonth[0][0] + "");htmls.push("
" + myMonth[0][1] + "");htmls.push("
" + myMonth[0][2] + "");htmls.push("
" + myMonth[0][3] + "");htmls.push("
" + myMonth[0][4] + "");htmls.push("
" + myMonth[0][5] + "");htmls.push("
" + myMonth[0][6] + "");htmls.push("
");var d, w;
for (w = 1; w < 6; w++) {
htmls.push("
");for (d = 0; d < 7; d++) {
var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
console.log(ifHasSigned);
if(ifHasSigned){
htmls.push("
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "");} else {
htmls.push("
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "");}
}
htmls.push("
");}
htmls.push("
");htmls.push("
htmls.push("
return htmls.join('');
}
4、控件的事件处理机制
指定一个默认的eventName:"load",不同的事件定义不同的eventName
默认时:
setMonthAndDay:function(){
switch(calUtil.eventName)
{
case "load":
var current = new Date();
calUtil.showYear=current.getFullYear();
calUtil.showMonth=current.getMonth() + 1;
break;
case "prev":
var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
calUtil.showMonth=parseInt(nowMonth)-1;
if(calUtil.showMonth==0)
{
calUtil.showMonth=12;
calUtil.showYear-=1;
}
break;
case "next":
var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
calUtil.showMonth=parseInt(nowMonth)+1;
if(calUtil.showMonth==13)
{
calUtil.showMonth=1;
calUtil.showYear+=1;
}
break;
}
},
不同的事件触发:
bindEnvent:function(){
//绑定上个月事件
$(".calendar_month_prev").click(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.eventName="prev";
calUtil.init(signList);
});
//绑定下个月事件
$(".calendar_month_next").click(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.eventName="next";
calUtil.init(signList);
});
}
效果图:
页面引用:
签到效果实现$(function(){
//ajax获取日历json数据
var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.init(signList);
});
JS:
var calUtil = {
//当前日历显示的年份
showYear:2015,
//当前日历显示的月份
showMonth:1,
//当前日历显示的天数
showDays:1,
eventName:"load",
//初始化日历
init:function(signList){
calUtil.setMonthAndDay();
calUtil.draw(signList);
calUtil.bindEnvent();
},
draw:function(signList){
//绑定日历
var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);
$("#calendar").html(str);
//绑定日历表头
var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";
$(".calendar_month_span").html(calendarName);
},
//绑定事件
bindEnvent:function(){
//绑定上个月事件
$(".calendar_month_prev").click(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.eventName="prev";
calUtil.init(signList);
});
//绑定下个月事件
$(".calendar_month_next").click(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.eventName="next";
calUtil.init(signList);
});
},
//获取当前选择的年月
setMonthAndDay:function(){
switch(calUtil.eventName)
{
case "load":
var current = new Date();
calUtil.showYear=current.getFullYear();
calUtil.showMonth=current.getMonth() + 1;
break;
case "prev":
var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
calUtil.showMonth=parseInt(nowMonth)-1;
if(calUtil.showMonth==0)
{
calUtil.showMonth=12;
calUtil.showYear-=1;
}
break;
case "next":
var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
calUtil.showMonth=parseInt(nowMonth)+1;
if(calUtil.showMonth==13)
{
calUtil.showMonth=1;
calUtil.showYear+=1;
}
break;
}
},
getDaysInmonth : function(iMonth, iYear){
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
},
bulidCal : function(iYear, iMonth) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth - 1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
var iVarDate = 1;
var d, w;
aMonth[0][0] = "日";
aMonth[0][1] = "一";
aMonth[0][2] = "二";
aMonth[0][3] = "三";
aMonth[0][4] = "四";
aMonth[0][5] = "五";
aMonth[0][6] = "六";
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
},
ifHasSigned : function(signList,day){
var signed = false;
$.each(signList,function(index,item){
if(item.signDay == day) {
signed = true;
return false;
}
});
return signed ;
},
drawCal : function(iYear, iMonth ,signList) {
var myMonth = calUtil.bulidCal(iYear, iMonth);
var htmls = new Array();
htmls.push("
htmls.push("
// htmls.push("
//htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
htmls.push("
");htmls.push("
" + myMonth[0][0] + "");htmls.push("
" + myMonth[0][1] + "");htmls.push("
" + myMonth[0][2] + "");htmls.push("
" + myMonth[0][3] + "");htmls.push("
" + myMonth[0][4] + "");htmls.push("
" + myMonth[0][5] + "");htmls.push("
" + myMonth[0][6] + "");htmls.push("
");var d, w;
for (w = 1; w < 6; w++) {
htmls.push("
");for (d = 0; d < 7; d++) {
var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
console.log(ifHasSigned);
if(ifHasSigned){
htmls.push("
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "");} else {
htmls.push("
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "");}
}
htmls.push("
");}
htmls.push("
");htmls.push("
htmls.push("
return htmls.join('');
}
};