html插入签到日历,js签到日历

效果图

日历效果图

html

calendar

$(function(){

Calendar.init("2016/09/21 10:14:11");//

$("#box").html(Calendar.getCalendar([1,5]));

});

js

var Calendar = {

_today : new Date(),

_date : new Date().getDate(),

_day : new Date().getDay(),

_month : new Date().getMonth() + 1,

_year : new Date().getFullYear(),

setDate:function(){

this._date = new Date(this._today).getDate();

},

setDay:function(){

this._day = new Date(this._today).getDay();

},

setMonth:function(){

this._month = new Date(this._today).getMonth() + 1;

},

setYear:function(){

this._year = new Date(this._today).getFullYear();

},

init:function(curDate){

this._today = new Date(curDate);

this.setDate();

this.setDay();

this.setMonth();

this.setYear();

},

isLeap : function() {

var year = this._year;

if (year % 4 == 0 && year % 100 > 0) {

return true;

}

if (year % 400 == 0 && year % 3200 > 0) {

return true;

}

return false;

},

getLen : function() {

if (this._month == 2) {

if (this.isLeap()) {

return 29;

}

return 28;

}

if (this._month < 8) {

if (this._month % 2 > 0) {

return 31;

}

return 30;

}

if (this._month % 2 > 0) {

return 30;

}

return 31;

},

getCalendar : function(events) {

var len = this.getLen();

var d = new Date(this._year, this._month - 1, 1);

var dfw = d.getDay();

var arr = new Array();

var tem = 0;

var str = "";

for (var i = 0; i < 6; i++) {

arr[i] = new Array();

for (var j = 0; j < 7; j++) {

tem++;

if (tem - dfw > 0 && tem - dfw <= len) {

arr[i][j] = tem - dfw;

} else {

arr[i][j] = "";

}

}

}

str += '

'+this._year + '年' + this._month + '月'+ this._date + '日

';//标题

str += '

str += '日一二三四五六';

str += '

';

for (var k = 0; k < 6; k++) {

if (k == 5 && arr[k][0] == "")

continue;

str += '

';

for (var m = 0; m < arr[k].length; m++) {

if(events.contains(arr[k][m])){

str += '

' + arr[k][m] + '';

}else{

//判断是否是当日

if(arr[k][m] == this._date){

str += '

' + arr[k][m] + '';

continue;

}

if(arr[k][m] == ""){

str += '

' + arr[k][m] + '';

continue;

}

str += '

' + arr[k][m] + '';

}

}

str += '

';

}

str += '

';

str += '

';

return str;

},

nextMonth : function() {

if (this._month == 12) {

this._year++;

this._month = 0;

}

this._month++;

},

nextYear : function() {

this._year++;

},

previousMonth : function() {

if (this._month == 1) {

this._year--;

this._month = 13;

}

this._month--;

},

previousYear : function() {

this._year--;

}

};

Array.prototype.contains = function(element) {

for (var i = 0; i < this.length; i++) {

if (this[i] == element) {

return true;

}

}

return false;

};

css

.calendar{width:680px;margin:10px 0px 20px 0px;color:#555;}

.calendar h4 {border-bottom: 2px solid #5bd999;text-align: center;font-size: 22px;font-weight: 700;margin-top: 10px;margin-bottom:0px;padding: 10px 0;}

.calendar .sign_tab{width: 100%;border-collapse: collapse;border: 1px solid #e5e5e5;border-top: 0;table-layout: fixed;}

.calendar .sign_tab th{text-align: center;height: 60px;font-weight: 700;}

.calendar .sign_tab td{border: 1px solid #e5e5e5;height: 60px;text-align: center;font-size: 20px;font-family: arial;}

.calendar .sign_tab td.over{background-color: #f3f3f3;border-left: 0;border-right: 0;}

.calendar .sign_tab td.red_tbg{background-color: #f61a48;color: #FFF;}

.calendar .sign_tab td.cur_day{background-color: #FFD2D2;color: #FFF;}