[15] js로 캘린더 만들기 (this 사용해서 캘린더에 자동으로 값 추가하기)
이번엔 간단한 캘린더를 두가지 방법으로 만들어보았다.
공통 기능은 다음과 같다.
- 날짜를 클릭하면 날짜 input에 자동으로 값 채워지기
- 내용 입력 후 작성 버튼 클릭 시 캘린더 날짜 아래에 내용 추가하기
- 작성 버튼 누르면 input은 자동으로 초기화되기
🔎 캘린더를 table로 구현한 방법
이 방법은 공통기능 이외에는 table로 구현하였다.
jQuery를 사용하므로 <head>에
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> 작성해야하는 걸 잊지말자!
날짜와 내용은 <input>으로 받되, 날짜는 readonly를 사용해서 값을 받아오는 걸로만 기능을 구현하였다.
그런 다음, 캘린더는 <tr> 과 <td> 등을 사용해서 일일히 table로 구현했다..!
➡️ css는 주말만 색을 정하고, cursor를 변경해서 클릭할 수 있다는 것 정도만 추가하였다.
js에선, 날짜만 가져오기 위한 함수와, 내용에 ~~내용을 작성하면 캘린더에 추가되는 함수를 구현하였다.
실행 결과
📌 캘린더를 js로 구현한 방법(css 일부 포함)
table로 구현하지 않고 js로 구현해서 html이 조금 더 간단하다.
<input>과 <lable>을 사용해서 text창을 만들었다.
작성과 초기화 버튼을 구현했고, 맨 마지막에 append할 div도 추가했다.
css는 폰트를 추가했고, 모양도 다르게 구현해보았다.
날짜도 입력될때 숫자만 입력되는 것이 아니라 2024-1-00형식으로 입력된다.
실행 결과
추가 설명
- for문을 사용해서 row를 만드는 방법에 대해 좀 더 자세히 설명해보고자 한다.
for (let day = 1; day <= 31; day++) {
//한주의 마지막 날인지 확인
//1주일의 첫날인 경우(7로 나누어 떨어지지 않는 경우) div요소를 row라는 이름으로 생성
if (day % 7 === 1) {
row = $('<div>').addClass('row');
}
//id 속성은 "년-월-일" 형식으로 설정, text를 사용하여 날짜를 표시
let dayDiv = $('<div>')
.addClass('day')
.attr('id', year + '-' + (month + 1) + '-' + day)
.text(day);
row.append(dayDiv);
if (day % 7 === 0 || day === 31) {
body.append(row);
}
}
➡️ dayDiv 는 각 날짜에 대해 day라는 클래스를 가진 <div>를 생성하고, 그 요소의 id를 해당 날짜로 설정한다. 그리고 그 날짜의 숫자를 텍스트로 추가한다.
➡️ 생성한 day <div>요소를 row <div> 요소에 append 한다.
➡️ 만약 해당하는 날짜가 7로 나누어 떨어지는 경우(즉, 1주일의 마지막 날인 경우) 또는 그 날짜가 31일인 경우, row <div> 요소를 body에 추가한다.
📌 각 row <div> 요소는 한 주(7일)을 나타내고, 각 day <div> 요소는 그 주의 특정 날짜를 나타내는 구조의 달력을 생성하게 된다.
마무리
이번엔this를 많이 사용했다.
this는 toggleclass에서도 class를 변화시켜 유용하게 사용할 수 있을 것 같다. 이 뿐만 아니라 굉장히 자주 쓰일 기능일 것 같다.
이번 실습은 그동안 배웠던 기능들의 총 집합인 것 같다. 이런 저런 기능을 더 추가해서 달을 더 추가하거나, 달을 지정할 수 있는 기능들도 만들어보고 싶다.
