- CSS는 최소화 하였습니다.
- class 개념을 사용하여 HTML의 DOM은 id값만 있고, 이후 모듈이 되는 js에서 해당 함수로 생성만 하면, 해당하는 DOM에 달력이 자동으로 생성됩니다.
- 이전다음달 보기, 오늘 날짜 표시 같은 기능을 옵션으로 on/off 할 수 있게 해보았습니다.
이런식으로요
|
1
2
3
4
5
6
7
8
|
<section id="test">여기다 달력을 생성할 수 있게끔...</section>
let test = new ImCalendar();
test.startDraw({
target : 'test'
,prevNext : false
,HL_today : true
})
|
cs |
HTML : 이 영역에선 달력을 넣고 싶은 DOM에 id만 지정해줍니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!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>practice Class</title>
<link rel="stylesheet" type="text/css" href="./reset.css"/>
<link rel="stylesheet" type="text/css" href="./pratice_class.css"/>
<script src="practice_class.js" type="module"> </script>
</head>
<body>
<section id="defaultCal">여기다 달력을 생성할 수 있게끔...</section>
<section id="myCalendar">여기다 달력을 생성할 수 있게끔...</section>
<section id="test">여기다 달력을 생성할 수 있게끔...</section>
<section id="test2">여기다 달력을 생성할 수 있게끔...</section>
</body>
</html>
|
cs |
CSS
|
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
|
@charset "utf-8";
.sect_cal{
position:relative;
width:min(90%,600px);
margin:2rem auto;
border:1px solid #000;
}
.YM{
display:flex;
justify-content:center;
align-items:center;
position:relative;
width:100%;
margin:1rem 0;
}
.YM .title{
padding:0 1em;
font-size:1.5rem;}
[class ^= "btn_month"]{
padding:1em;
background:#eee;
border:none;
font-size:.8rem;
cursor:pointer;
}
.tbl_cal{
table-layout:fixed;
border-spacing:0;border-collapse:separate;
position:relative;
width:90%;
margin:1rem auto;
border:1px solid #d2d2d2; border-width:1px 0 0 1px;}
.tbl_cal th,
.tbl_cal td{
position:relative;
width:calc(100% / 7);
border:1px solid #d2d2d2; border-width:0 1px 1px 0;}
.tbl_cal td{padding:.5em 1em 2em;}
.tbl_cal tr *:first-child{color:red;}
.tbl_cal tr *:nth-child(7n){color:blue;}
.tbl_cal .today{background:yellow;}
|
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
|
import {ImCalendar} from './ImCalendar.js';
/* 실행 */
let defaultCal = new ImCalendar();
defaultCal.startDraw({
target : 'defaultCal'
});
let myCalendar = new ImCalendar();
myCalendar.startDraw({
target : 'myCalendar'
,HL_today : true
});
let test = new ImCalendar();
test.startDraw({
target : 'test'
,prevNext : false
,HL_today : true
});
let test2 = new ImCalendar();
test2.startDraw({
target : 'test2'
,prevNext : false
});
|
cs |
JS - class
|
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
export class ImCalendar{
constructor(){
this.today = new Date();
this.date = new Date();
this.cnt = 0;
this.row = undefined;
this.cell = undefined;
this.isPrevNext = undefined;
this.HL_today = false;
}
/* 🔰 */
startDraw(obj){
const targetName = obj.target;
const target = document.getElementById(targetName);
const btn_prevNext = obj.prevNext ?? true;
this.HL_today = obj.HL_today ?? false;
this.reset_sect(target);
this.makeYM(target,btn_prevNext);
this.make_calendar(target,obj);
}
reset_sect(target){
target.classList.add('sect_cal');
target.innerHTML = '';
}//reset_sect
/* 🔰 */
makeYM(target,btn_prevNext){
const article_YM = document.createElement('ARTICLE');
article_YM.classList.add('YM');
if(btn_prevNext){
article_YM.innerHTML = `
<button class="btn_month-prev" data-month="prev">이전달</button>
<div class="title">YYYY년 MM달</div>
<button class="btn_month-next" data-month="next">다음달</button>
`;
}else{
article_YM.innerHTML = `
<div class="title">YYYY년 MM달</div>
`;
}
target.appendChild(article_YM);
article_YM.addEventListener('click', e => {this.onClick(e)});
}//reset_sect
/* 🔰 */
make_calendar(target,obj){
const tbl = document.createElement('TABLE');
tbl.classList.add('tbl_cal');
target.appendChild(tbl);
this.make_thead(tbl);
this.display_calendar(tbl,obj);
}//make_calendar
make_thead(tbl){
const content = `
<thead>
<tr>
<th>SUN</th> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
`;
tbl.innerHTML = content;
}//make_thead
display_calendar(tbl){
const tbody = tbl.getElementsByTagName('TBODY')[0];
const doMonth = new Date(this.today.getFullYear(), this.today.getMonth(), 1);
const lastDate = new Date(this.today.getFullYear(), this.today.getMonth() + 1, 0);
this.setYM(tbl)
this.reset_tbody(tbody, doMonth);
this.draw_dates(tbody,lastDate);
}//display_calendar
setYM(tbl){
const title = tbl.previousElementSibling.getElementsByClassName('title')[0];
title.innerHTML = `${this.today.getFullYear()}년 ${this.today.getMonth()+1}월`;
}//setYM
reset_tbody(tbody, doMonth){
tbody.innerHTML = '';
this.row = null;
this.row = tbody.insertRow();
this.cnt = 0;
for(let i=0; i<doMonth.getDay(); i++){
this.cell = this.row.insertCell();
this.cnt++;
}
}//reset_tbody
draw_dates(tbody,lastDate){
for(let i=1; i<=lastDate.getDate(); i++){
this.cell = this.row.insertCell();
this.cell.innerHTML = i;
this.cnt++;
if(this.cnt % 7 == 1){this.cell.classList.add('sunday');}
if(this.cnt % 7 == 0){
this.cell.classList.add('saturday');
this.row = tbody.insertRow();
}//if
if(this.HL_today){this.draw_today(i);}
}//for
}//draw_dates
onClick(e){
e = e || window.event;
if(e.target.tagName != "BUTTON"){return;}
this.isPrevNext = e.target.dataset.month == "prev" ? -1 : 1;
this.today = new Date(this.today.getFullYear(),this.today.getMonth() + this.isPrevNext, this.today.getDate());
const tbl = e.currentTarget.nextElementSibling;
this.display_calendar(tbl);
}//onClick
draw_today(i){
const is_today_true = this.is_today_true(i);
if(is_today_true){this.cell.classList.add('today');}
}//draw_this.today
is_today_true(i){
if (this.today.getFullYear() == this.date.getFullYear() &&
this.today.getMonth() == this.date.getMonth() &&
i == this.date.getDate()){
return true;
}//if
}//is_this.today_true
}//[CLASS] : ImCalendar
|
cs |
소스코드
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| [vanilla JS] 유튜브 API 없이 타이틀(제목), 썸네일, 작성자 가져오는 방법 (0) | 2021.09.02 |
|---|---|
| vanilla js Challenge - nomade coders (0) | 2021.08.27 |
| 달력만들기 (0) | 2021.08.20 |
| reduce는 왜 필요할까? (feat: rest parameters) (0) | 2021.08.17 |
| [vanilla JS] html 파일 jQuery없이 include 하는 법 (0) | 2021.08.03 |