<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
caption{
font-weight: bold;
font-size: larger;
}
tr{
width: 100%;
}
th{
background-color: rgb(207, 203, 203);
border: 1px solid black;
}
td{
border: 1px solid black;
text-align: center;
}
td:first-child{
background-color: red;
font-weight: bold;
color: aliceblue;
}
td:last-child{
background-color: blue;
font-weight: bold;
color: aliceblue;
}
</style>
</head>
<body>
<div id="calendar"></div>
<script>
function createCalendar(elem,year,month){
const day1= new Date(year,month-1);
console.log(day1);
const day30=new Date(year,month,0);
const firstDay=day1.getDay();
const lastDay = day30.getDate();
// let table= document.body.getElementsById(elem);
let th=[
'MO','TU','WE','TH','FR','SA','SU'
];
let days;
let num=0;
let count=-7;
let str='';
console.log(firstDay,year,month);
str+='<table><caption>'+year+'년'+month+'월'+'</caption>'
for(let i=0;i<7;i++){
str+="<tr>";
for(let j=0;j<7;j++) {
if(i==0){
days=th[j]
str+="<th>"+ days +"</th>";
} else {
num+=(count<firstDay)? +0: +1;
i+=(lastDay+firstDay<count&&num==0)?1:0;
str+=(count>=lastDay+firstDay||num==0)?"<td>"+ " " +"</td>":"<td>"+ num +"</td>";
}
count++;
console.log(count,num,lastDay,firstDay,i)
}
i+=(num>lastDay)?1:0;
str+="</tr>";
}
str+="</table>"
elem.innerHTML=str;
}
createCalendar(calendar,2010,8);
</script>
</body>
</html>
Rss Feed