<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{box-sizing: border-box;}
.calendar{
float:left;
25%;
border: 1px solid #eee
}
.calendar .calendar_title{
padding:.5em 0 .5em 0;
text-align: center;
border-bottom: 1px solid #eee
}
.calendar .calendar_week{
padding:.5em 0 .5em 0;
}
.calendar .calendar_week span{
14.2857%;
text-align: center;
display: inline-block;
}
.calendar .calendar_dateCon span{
padding:.5em 0 .5em 0;
14.2857%;
text-align: center;
display: inline-block;
}
.calendar .red{
background: red
}
.calendar .green{
background: green
}
</style>
</head>
<body>
<div id="rili"></div>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var year="2019";
var month="05";
var strr=""
for(var c=1;c<=12;c++){
strr+=createRi(year,c);
}
document.getElementById("rili").innerHTML=strr
var paint=["2018-05-06","2018-05-07","2018-05-08","2018-05-09"]
var paint2=["2018-05-16","2018-05-17","2018-05-18","2018-05-19","2018-05-20","2018-05-21"]
painting(paint,"green")
painting(paint2,"red")
function painting(paint,cla){
for(var y=0;y<paint.length;y++){
var dem=paint[y].split("-");
if(y==0){
$(".calendar[value="+(+dem[1])+"] span[value="+(+dem[2])+"]").addClass(cla).css("border-top-left-radius","15px").css("border-bottom-left-radius","15px")
}else if(y==paint.length-1){
$(".calendar[value="+(+dem[1])+"] span[value="+(+dem[2])+"]").addClass(cla).css("border-top-right-radius","15px").css("border-bottom-right-radius","15px")
}else{
$(".calendar[value="+(+dem[1])+"] span[value="+(+dem[2])+"]").addClass(cla)
}
}
}
function createRi(year,month){
var str='<div class="calendar" value="{{month}}">
<div class="calendar_title">{{month}}月</div>
<div class="calendar_week">
<span>周日</span><span>周一</span><span>周二</span><span>周三</span><span>周四</span><span>周五</span><span>周六</span>
</div>
<div class="calendar_dateCon">{{days}}</div>
</div>'
var str=str.replace("{{month}}",month).replace("{{month}}",month);
var emptySpan=getMonthFirstDayWeek(year,month);
var days=getDay(year,month);
var spanStr=""
for(var k=0;k<emptySpan;k++){
spanStr+="<span></span>"
}
for(var n=0;n<days.length;n++){
spanStr+="<span value='"+days[n]+"'>"+days[n]+"</span>";
}
for(var m=0,len=42-emptySpan-days.length;m<len;m++){
spanStr+="<span style='opacity:0'>@</span>"
}
var str=str.replace("{{days}}",spanStr);
return str;
}
function isLeapYear(year) { return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0); }
function getMonthFirstDayWeek(year,month){
var month=+month-1;
var date=new Date();
date.setFullYear(year);
date.setMonth(month);
date.setDate(1);
return date.getDay();
}
function getDay(year,month){
var month=+month;
var day31=[];
var day30=[];
var day29=[];
for(var i=1;i<=31;i++){
day31.push(i);
if(i<=30){
day30.push(i);
}
if(i<=29){
day29.push(i);
}
}
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
return day31
}
if(month==4 || month==6 || month==9 || month==11){
return day30
}
if(month==2){
if(isLeapYear(year)){
return day29
}else{
return day30
}
}
}
</script></body></html>