출처 : https://gurtn.tistory.com/54
설계(HTML, CSS, JS)
HTML(index.html)
1.크게 header와 main으로 나뉜다.
2.header에서는 지난달, 다음달 이동 버튼과 현재 월을 출력하는 텍스트로 구성되어 있다. header는 flex container를 사용하였다.
3.main에서는 달력의 기본요소인 요일과 일수를 출력하고 일정이 있으면 같이 출력된다. main은 grid container를 사용하였다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Simple Calendar</title>
</head>
<body>
<div class='container'>
<div class="header">
<button class="date-last" id="btn"><</button>
<h2 class='date-now'></h2>
<button class="date-next" id="btn">></button>
</div>
<div class="main">
<div class="calendar">
<div class="grid date-title">
<!-- 그리드 각 블록을 div로 정의한다. -->
<div>일</div>
<div>월</div>
<div>화</div>
<div>수</div>
<div>목</div>
<div>금</div>
<div>토</div>
</div>
<div class="grid date-board"></div>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
</html>CSS(style.css)
1.grid 클래스에서 grid를 지정하고 grid-template-columns에서는 7개의 열을 지정해 달력의 형태를 만들었다.
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
font-family: Pretendard;
background-color:rgb(242, 217, 184);
}
}
#btn{
border:0;
}
.header{
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 30px;
}
.main{
display: flex;
flex-direction: row;
justify-content: center;
}
.grid {
display: grid;
grid-template-columns: repeat(7,1fr); /*열(세로) 7개 생성*/
grid-gap: 5px;
padding: 20px;
}
/* 그리드 각 블록을 div로 정의한다. */
.grid div {
padding: .6rem;
font-size: .9rem;
cursor: pointer;
}
.date-board div{
color: #222;
font-weight: bold;
width: 100px;
height: 100px;
padding: 10px 5px;
border-radius: 5px;
border: 1px solid #eee;
}
JS(index.js)
renderCal(date)
1.new Date() 클래스를 사용하여 현재 연, 월, 일을 저장한다.
2.달력 구성은 해당 월의 시작일을 기준으로 빈블록을 앞 뒤로 생성하여 만든다.
3.htmlDummy에 data 일정에 관한 태그를 생성하여 html에 추가한다.
const data = [
{ date: '2023-10-15', content: '테스트1' },
{ date: '2023-10-03', content: '테스트2' },
{ date: '2023-9-15', content: '테스트3' },
{ date: '2023-11-26', content: '테스트4' },
{ date: '2023-12-21', content: '테스트5' },
];
//데이터 가공
const calendarList = data.reduce(
(acc, v) =>
({ ...acc, [v.date]: [...(acc[v.date] || []), v.content] })
, {}
);
//pad method
Number.prototype.pad = function() {
return this > 9 ? this : '0' + this;
}
const renderCal=(date)=>{
const viewYear=date.getFullYear()
const viewMonth=date.getMonth() //월은 0부터 시작하므로 +1해야됨.
const viewDay=date.getDay() //요일은 일요일~토요일까지 0~6까지 표현된다.
document.querySelector('.date-now').textContent=`${viewYear}년 ${viewMonth+1}월`
const firstDay = new Date(date.setDate(1)).getDay();
const lastDay = new Date(date.getFullYear(), date.getDay(), 0).getDate();
const limitDay = firstDay + lastDay;
const nextDay = Math.ceil(limitDay / 7) * 7;
let htmlDummy = '';
//날짜 아이템 생성
for (let i = 0; i < firstDay; i++) {
htmlDummy += `<div class="noColor"></div>`;
}
for (let i = 1; i <= lastDay; i++) {
let date = `${viewYear}-${viewMonth.pad()}-${i.pad()}`
htmlDummy += `
<div>${i}
<p>${calendarList[date]?.join('</p><p>') || ''}
</p>
</div>`
}
for (let i = limitDay; i < nextDay; i++) {
htmlDummy += `<div class="noColor"></div>`;
}
//HTML에 날짜 아이템 넣기
document.querySelector(`.date-board`).innerHTML = htmlDummy;
}
let date=new Date() //인스턴스 선언
//이번달 달력 생성
renderCal(date)
//저번달 달력 생성
document.querySelector(`.date-last`).onclick=()=>{
renderCal(new Date(date.setMonth(date.getMonth()-1)))
}
//다음달 달력 생성
document.querySelector(`.date-next`).onclick=()=>{
renderCal(new Date(date.setMonth(date.getMonth()+1)))
}'Node.js' 카테고리의 다른 글
| [Node.js] 자바스크립트와 Node.js의 공통점과 차이점 (1) | 2024.11.05 |
|---|
