[JavaScript]간단한 달력 만들기 1
HTML, CSS, 자바스크립트 조금씩 찍먹해보고 달력을 만들어 보았다.
뉴비가 공부하는 모습이니 그냥 재미로 봐주길 ㅎㅎ...
<script>
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
</script>자바스크립트의 Date 객체를 이용하여 날짜를 담은 새로운 객체를 생성하였다.
이때 getMonth()의 경우 1월부터 12월을 0~11로 표현하기 때문에 1을 더해준다.
<table id="calTable" border="1.5" align="center">
<tr id="calTop">
<td id="preMon" colspan="1" style="cursor: pointer;" >
<script>document.write('<');</script>
</td>
<td id="nowMon" colspan="5">
<script>document.write(year+'년 '+month+'월');</script>
</td>
<td id="nexMon" colspan="1" style="cursor: pointer;">
<script>document.write('>');</script>
</td>
</tr>
<tr align="center" id="weekDay">
<td style="color: red">일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td style="color: blue">토</td>
</tr>
</table>찾아보니 div로만 구현을 하는 사람들도 많던데, 나는 table이 먼저 떠올랐다.
이전 달, 다음 달로 넘기는 버튼과 현재 월을 표시하는 상단 영역과 요일을 나타내는 영역이다.
실행해보면 앞에서 선언한 year과 month가 잘 나타난다.
<style>
table{
border-collapse: collapse;
width:600px; height:500px;
}
td{
text-align: center;
vertical-align: top;
}
#weekDay{
height: 20px;
}
#calTop{
height: 65px;
}
#nowMon,#preMon,#nexMon{
font-size: 20px;
vertical-align: middle;
border-style: none;
}
</style>못나보이니까 CSS도 살짝 건드려준다
이제 날짜만 넣어주면 된다.insertRow 와 insertCell을 이용하였다.
<script>
let first = new Date(date.getFullYear(), date.getMonth(),1);
let last = new Date(date.getFullYear(), date.getMonth()+1,0);
let day = first.getDay();//일:0 ~ 토:6
let week = last.getDate()/7+1;
let cal = document.getElementById("calTable");
let cnt = 1;
for(i =1 ; i < week ; i++){
let row = cal.insertRow();
for(j = 0 ; j < 7 ; j++){
if(i == 1){
if(day != j){
row.insertCell().innerHTML='';
continue;
}else day++;
}
if(cnt > last.getDate()){
row.insertCell().innerHTML='';
continue;
}
row.insertCell().innerHTML = cnt;
cnt++;
}
}
</script>first는 월의 첫째날을 나타내는 변수이다. last는 반대로 마지막 날을 나타낸다.
day는 첫날의 요일을 나타낸다. week는 한달에 총 몇주가 있는지 나타내고, 행을 만들 때 사용하였다.
1일이 무조건 일요일부터 시작하는 것이 아니기 때문에 첫째주(i == 1)는 예외 처리해주었다.
day와 요일(0~6)이 일치하기 전까지는 빈칸을 생성하고, 그 이후에는 day를 늘려가면서 칸에 날짜를 포함해 생성하도록 하였다. day를 일일이 늘리는게 조금 지저분해 보이는데, 다른 방법이 생각나지 않았다 ㅎ_...
계속해서 생성해주다가, cnt가 마지막 날을 넘어가면 빈칸을 생성하게 하였다.
객체 끌어오고 행과열 새롭게 만들어내고...여기저기 참고했지만 날짜 생성과 예외 처리는 나름 내 방식대로 만들었다.
이전 달, 다음 달로 넘기는 구현도 천천히 해보는걸로 ㅎ_
끝. 그리고 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table{
border-collapse: collapse;
width:600px; height:500px;
}
td{
text-align: center;
vertical-align: top;
}
#weekDay{
height: 20px;
}
#calTop{
height: 65px;
}
#nowMon,#preMon,#nexMon{
font-size: 20px;
vertical-align: middle;
border-style: none;
}
</style>
</head>
<body>
<script>
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
</script>
<table id="calTable" border="1.5" align="center">
<tr id="calTop">
<td id="preMon" colspan="1" style="cursor: pointer;" >
<script>document.write('<');</script>
</td>
<td id="nowMon" colspan="5">
<script>document.write(year+'년 '+month+'월');</script>
</td>
<td id="nexMon" colspan="1" style="cursor: pointer; border-left: none;">
<script>document.write('>');</script>
</td>
</tr>
<tr align="center" id="weekDay">
<td style="color: red">일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td style="color: blue">토</td>
</tr>
</table>
<script>
let first = new Date(date.getFullYear(), date.getMonth(),1);
let last = new Date(date.getFullYear(), date.getMonth()+1,0);
let day = first.getDay();//일:0 ~ 토:6
let week = last.getDate()/7+1;
let cal = document.getElementById("calTable");
let cnt = 1;
for(i =1 ; i < week ; i++){
let row = cal.insertRow();
for(j = 0 ; j < 7 ; j++){
if(i == 1){
if(day != j){
row.insertCell().innerHTML='';
continue;
}else day++;
}
if(cnt > last.getDate()){
row.insertCell().innerHTML='';
continue;
}
row.insertCell().innerHTML = cnt;
cnt++;
}
}
</script>
</body>
</html>