-
210929_calendarJavaScript 2021. 9. 29. 15:13
css
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
.seldate select,#calview{
font-family: 'Single Day';
font-size: 1.4em;
width: 110px;
}
.seldate{
margin-left: 300px;
}
#calview{
margin-left: 250px;
margin-top: 30px;
}
#calview table{
border-collapse: collapse;
width: 800px;
}
#calview table tr{
height: 60px;
}
#calview table th{
border: 1px solid gray;
background-color: #afeeee;
color: black;
font-family: 'Single Day';
font-size: 13pt;
}
#calview table td{
border: 1px solid gray;
font-family: 'Single Day';
text-align: center;
line-height: 60px;
font-size: 13pt;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../css/calstyle.css">
<script type="text/javascript">
window.onload=function(){
//캘린더메서드 호출
calendarView(year,month);
//버튼이벤트
document.getElementById("btnview").onclick=function(){
var myyear=document.getElementById("selyear").value;
var mymonth=document.getElementById("selmonth").value;
console.log(myyear,mymonth);
//캘린더메서드 호출
calendarView(myyear, mymonth);
}
}
//캘린더메서드 생성
function calendarView(year,month) {
alert(new Date(year,month-1,1));
//전달받은 년도와 월의 1일의 요일을 구해야 한다
var currDate=new Date(year,month-1,1); //전달받을 때 +1이 된 month를 받아서 -1해야함
var week=currDate.getDay(); //요일
console.log(week); //요일숫자: 일0 ~ 토6
var s="";
s+="<table>";
s+="<caption><b>"+year+"년 "+month+"월 달력</b></caption>";
s+="<tr>";
s+="<th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>"
s+="</tr>";
//요일숫자만큼 빈칸(td) 생성
s+="<tr>";
for(var i=1;i<=week;i++)
{
s+="<td></td>";
}
//해당월이 몇일까지 있는지 endday를 구한다
//그다음 1일부터 endday까지 출력하는데 토요일출력후 tr 닫고 다시 tr 열기
var endday=0;
//그냥 month 쓰면 문자로 인식하기에 parseInt 캐스팅
switch(parseInt(month)) {
case 2:
//2월..윤달,윤년
if(year%4==0 && year%100!=0 || year%400==0) //윤년 공식
endday=29;
else
endday28;
break;
case 4: case 6: case 9: case 11:
endday=30;
break;
default:
endday=31;
}
console.log(endday);
//몇주일인지
for(var i=1;i<=endday;i++)
{
week++;
//주말 토,일은 글자색 빨강으로
if(week%7==1 || week%7==0)
{
s+="<td style='color:red;'>"+i+"</td>";
} else {
s+="<td>"+i+"</td>";
}
if(week%7==0)
{
s+="</tr><tr>";
}
}
//토요일에서 끝난 경우는 바로 tr 닫고 토요일에서 끝나지 않을 경우 나머지 빈칸 그리기
if(week%7==0)
{
s+="</tr>";
} else {
while(true){
week++;
s+="<td></td>";
if(week%7==0)
{
s+="</tr>";
break;
}
}
}
s+="</table>";
document.getElementById("calview").innerHTML=s;
}
</script>
</head>
<body>
<script type="text/javascript">
//현재날짜구하기
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
console.log(year,month);
</script>
<div class="select">
<select id="selyear">
<script type="text/javascript">
var s=""; //초기값
for(var y=year;y>=1950;y--)
{
s+="<option>"+y+"</option>"; //초기값 준 s에 누적
}
document.write(s);
</script>
</select>
<b>년</b>
<select id="selmonth">
<script type="text/javascript">
var s="";
for(var m=1;m<=12;m++)
{
if(m==month)
{
s+="<option selected>"+m+"</option>";
} else
s+="<option>"+m+"</option>";
}
document.write(s);
</script>
</select>
<b>월</b>
<button type="button" id="btnview">달력확인</button>
</div>
<div id="calview"></div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
210929_jquery,canvas(그림판) (0) 2021.09.29 210929_canvas (0) 2021.09.29 210929_form,setInterval (0) 2021.09.29 210928_image,onkeyup(위치변경) (0) 2021.09.28 210928_time,setInterval,setTimeout,image (0) 2021.09.28