- (1) : 몇초만에 MIT에서 만든 dyCalendar로 달력 만들기
- (1-2) : (1)의 튜토리얼 영상 (Youtube : Online Tutorials)
- 쩨리쩨리님의 달력 만들기
[JavaScript]달력 만들기, Date 객체
* Date - 날짜와 관련된 작업을 지원한다. - 객체 생성 방법 1. var object = new Date(); 2. var object = new Date(년,월,일,시,분,초,밀리초); * Date 메소드 - 중요 메소드 1. getYear() : 1970년 이후의 연..
jerryjerryjerry.tistory.com
이 포스팅은 쩨리쩨리님의 포스팅을 기반으로 작성하였습니다.
원리 파악을 위해 CSS는 최소로 하였으며, 쩨리쩨리님의 코드를 기능별로 함수로 분리하여 묶었을 뿐입니다.
일단 먼저 이해 후에 제 스타일로 구현하는거도 나중에 포스팅할게요.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="ko">
<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>달력 만들기</title>
<link href="calendar.css" rel="stylesheet" type="text/css"/>
<script src="./make_calendar.js" defer></script>
</head>
<body>
<!-- https://jerryjerryjerry.tistory.com/26 -->
<section id="sect">
<table id="calendar">
<thead>
<tr>
<td>
<label onclick="prevCalendar()"><</label>
</td>
<td id="calendar_YM" colspan="5">
yyyy년 m월
</td>
<td>
<label onclick="nextCalendar()">></label>
</td>
</tr>
<tr>
<td>일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td>토</td>
</tr>
</thead>
<tbody>
</tbody>
</table><!-- calendar -->
</section><!-- sect -->
</body>
</html>
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
const calendar = document.getElementById('calendar');
const calendar_YM = document.getElementById('calendar_YM');
const calendar_body = calendar.getElementsByTagName('TBODY')[0];
let today = new Date();
let date = new Date();
let row,cell;
let cnt = 0;
function prevCalendar(){
today = new Date(today.getFullYear(), today.getMonth()-1, today.getDate());
buildCalendar();
}//prevCalendar
function nextCalendar(){
today = new Date(today.getFullYear(), today.getMonth()+1, today.getDate());
buildCalendar();
}//nextCalendar
function buildCalendar(){
let doMonth = new Date(today.getFullYear(),today.getMonth(),1);
let lastDate = new Date(today.getFullYear(),today.getMonth()+1,0);
display_YM(); //연도,월 출력
reset_calendar(doMonth); // 달력 리셋
display_calendar(lastDate); //일 생성
}//buildCalendar
function display_YM(){
calendar_YM.innerHTML = `
${today.getFullYear()}년 ${today.getMonth()+1}월
`;
}//display_YM
function reset_calendar(doMonth){
calendar_body.innerHTML = '';
row = null;
row = calendar_body.insertRow();
cnt = 0
for(let i=0; i<doMonth.getDay(); i++){
cell = row.insertCell();
cnt++;
}
}//reset_calendar
function display_calendar(lastDate){
for(let i=1; i<=lastDate.getDate(); i++){
cell = row.insertCell();
cell.innerHTML = i;
cnt++;
if(cnt % 7 == 1){cell.classList.add('sunday');}
if(cnt % 7 == 0){
cell.classList.add('saturday');
row = calendar_body.insertRow();
}//if
display_today(i);
}//for
}//display_calendar
function display_today(i){
const is_today_true = is_today(i);
if(is_today_true){ cell.classList.add('today'); }
}//display_today
function is_today(i){
if (today.getFullYear() == date.getFullYear() &&
today.getMonth() == date.getMonth() &&
i == date.getDate()){
return true;
}
}//is_todaay
/* ✨ 실행 */
buildCalendar();
|
cs |
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| vanilla js Challenge - nomade coders (0) | 2021.08.27 |
|---|---|
| 달력 만들기(2) (0) | 2021.08.20 |
| reduce는 왜 필요할까? (feat: rest parameters) (0) | 2021.08.17 |
| [vanilla JS] html 파일 jQuery없이 include 하는 법 (0) | 2021.08.03 |
| 삼항연산자 (ternary operator)는 간단한 if문을 더 간단하게 줄일 수있다. (0) | 2021.06.25 |