<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CalendarRendering</title>
<link rel="stylesheet" href="calendar.css">
</head>
<body>
<div id="calendar"></div>
<script src="calendar.js"></script>
</body>
</html>
const calendar = document.getElementById('calendar');
function renderingCalendar(year, month) {
const firstDay = new Date(year, month, 1).getDay();
const lastDay = new Date(year, month + 1, 0).getDate();
calendar.innerText = '';
for (let i = 0; i < firstDay; i++) {
const emptyCell = document.createElement('div');
emptyCell.classList.add('cell');
calendar.appendChild(emptyCell);
}
for (let i = 1; i <= lastDay; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.textContent = i;
calendar.appendChild(cell);
}
}
const currentDate = new Date();
renderingCalendar(currentDate.getFullYear(), currentDate.getMonth());
1.
HTML 에서 id가 'calendar' 인 요소를 선택 해서, calendar 이라는 변수에 저장.
2.
renderingCalendar 함수는 인자로 2개를 받는다.
매개변수명을 연도를 뜻하는 year과,
월을 뜻하는 month로 작성.
3.
Date 클래스를 사용.
주어진 year과 month로 새 Date 객체를 생성 한다.
세번째 인자인 1은 아래와 같다.
"첫번째 날짜" 그 자체를 의미 한다.
getDay() 메서드를 사용 하면, 해당 날짜의 요일을 숫자로 반환 한다.
그러니까, 위의 기준으로는, 세번째 인자가 1 이니까, 첫번째 날짜 이고,
첫번째 날짜의 요일을 숫자로 반환 한다.
getDay() 메서드는 반환값이 숫자 타입 이고,
0은 일요일,
1은 월,
2는 화,
3은 수,
4는 목,
5는 금,
6은 토 를 의미 한다.
로그를 찍어보면,
firstDay가 2가 나오는 것을 볼 수 있는데, 이는, 화요일을 의미 하고,
글 작성 기준으로 달력을 확인 하면, 정상적으로 나오는 것을 볼 수 있다.
1 == 첫번째 날 == 화요일 == 2
new Date(year, month + 1, 0) 은 다음과 같다.
우선, month + 1 이니까, 다음달을 의미 하고,
0은 "0번째 날짜" 를 의미하므로, 0번째 날짜는 없으니까,
다음달 첫째날 - 1 이라고 생각 하면 된다.
즉, 이번달의 마지막 날짜를 의미 한다.
getDate() 메서드는, 해당 월의 마지막 날짜 == 일 을 반환 한다.
그래서 로그를 찍어보면, 31이 나오는것을 확인 할 수 있다.
(작성 날짜 기준으로, 8월달의 마지막 일은 31일 이다)
4.
calendar.innerText = ' ';
calendar 요소의 내용을 비우기.
이전에 내용을 모두 지워 새로운 달력을 생성 하기 위함 이다.
만약에, 요소의 내용을 지우지 않으면,
이전 달력의 날짜가 그려져 있다고 가정 했을 때,
이번달 달력의 날짜를 그려야 한다면,
두 달력의 날짜가 함께 보이게 되서, 작성해 주는 것이다.
5.
firstDay는 위에서, 2가 나왔었다.
첫 번째 날짜가 시작하는 요일 까지 빈 셀을 생성 해서 추가 한다.
그렇게 해야지만, 첫 주의 시작이 요일에 맞게 빈 칸을 보여 주게 된다.
달력의 칸 (셀) 이 각각의 셀로 구분 되어 있어야 하기 때문에, <div> 태그 영역 이고,
<div> 태그 영역을 새로 만들고, emptyCell 이라고 변수명을 지어줬다.
classList 를 사용 해서, cell 이라는 class 명으로 동적으로 추가 한다.
classList는 DOM 요소의 클래스 관련 기능을 다루는 속성 이다.
emptyCell.classList.add()
emptyCell.classList.remove()
등과 같이 사용 할 수 있다.
calendar.appendChild() 도 역시 동적으로 추가 하기 위한 역할을 한다.
calendar 이라는 요소에 달력을 나타내는 <div> 요소를 의미 하는데,
여기에 달력 한 칸을 나타내는 셀을 추가 하는 역할을 수행 한다.
6.
이런식으로 결과가 나오며,
큰 <div> 태그 영역 내부에,
각각의 날짜 구역을 나타내는 <div> 태그들로 이루어져 있게 된다.
'자바스크립트 (JavaScript) > 예제' 카테고리의 다른 글
| [ 함수 ] 콜백 (Callback) 예제 (1) | 2023.12.10 |
|---|---|
| 로그인 폼 (0) | 2023.08.27 |
