[js] javascript로 달력만들기

java에서 달력만들기:[java]출생년도, 12간지 , 날짜 출력하기,DateTimeFormater

[java]출생년도, 12간지 , 날짜 출력하기,DateTimeFormater

html에서 간단하게 달력 출력하기

<input type="date" />

<input type="time" />

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

getLastDate(year, month):

주어진 연도와 월의 마지막 날짜를 반환한다. 윤년에 따라 2월의 날짜를 조정한다.

[month-1]:month가 1부터 시작하기때문에 배열의 0번째를 지정하기위해 1을 빼준다.

그레고리력의 정확한 윤년 규칙은 다음과 같다.

1. 서력 기원 연수가 4로 나누어 떨어지는 해는 윤년으로 한다. (1988년, 1992년, 1996년, 2000년, 2004년, 2008년, 2012년, 2016년, 2020년, 2024년, 2028년, 2032년, 2036년, 2040년, 2044년 ...)
2. 서력 기원 연수가 4, 100으로 나누어 떨어지는 해는 평년으로 한다. (1700년, 1800년, 1900년, 2100년, 2200년, 2300년...)
3. 서력 기원 연수가 4, 100, 400으로 나누어 떨어지는 해는 윤년으로 둔다. (1600년, 2000년, 2400년...

출처:https://ko.wikipedia.org/wiki/%EC%9C%A4%EB%85%84

윤년 - 위키백과, 우리 모두의 백과사전

getFirstDate(year, month):

주어진 연도와 월의 첫 번째 날짜의 요일을 반환한다.

new Date(year, monthIndex, day)는 JavaScript의 내장 객체인 Date를 생성하는 함수.
year: 연도.
monthIndex: 월을 나타내며, 0부터 시작. 즉, 0은 1월, 1은 2월, ..., 11은 12월을 의미.
day: (선택적) 날짜를 나타내는 숫자.
예를 들어, new Date(2024, 0, 1)은 2024년 1월 1일을 나타내는 Date 객체를 생성한다.

getDay()
getDay()는 Date 객체의 메서드로, 해당 날짜의 요일을 반환한다.
반환값은 0부터 6까지의 숫자로, 0은 일요일, 1은 월요일, 2는 화요일, ..., 6은 토요일을 의미.
예를 들어, new Date(2024, 0, 1).getDay()의 결과는 1월 1일이 월요일이므로 1이 된다.

 function createCalendar(year, month, date) {}

        const lastDate = getLastDate(year, month);
        const firstDate = getFirstDate(year, month);

getLastDate와 getFirstDate 함수를 호출하여 마지막 날짜와 첫 요일을 가져온다.

const header1=`<tr><th colspan="7">${year}년</th></tr>`;
        const header2=`<tr><th colspan="7">${month}월</th></tr>`;
        const header3 = 
        `<tr>
            <th>일</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
            <th>토</th>
        </tr>`;

 

달력의 헤더와 요일 제목을 포함한 HTML 문자열을 생성한다.

for (let i = 0; i < firstDate; i++) {
            days += '<td></td>';
        }

 

첫 날 이전의 공백을 처리하기 위해 firstDate 만큼 빈 <td>를 추가한다.

for (let day = 1; day <= lastDate; day++) {
        	let isSelected = '';
        	if (day == date) {
        	    isSelected = 'selected';
        	}
                days += `<td class="${isSelected}" onclick="selectDate(${day})">${day}</td>`;
                if ((day + firstDate) % 7 == 0) {
                    days += '</tr><tr>';
                }
            }

 

날짜를 <td>로 추가하고, 클릭 시 selectDate 함수를 호출하여 날짜를 선택할 수 있도록 한다.

 calendarEl.innerHTML = header1+header2+header3+ days;

 

마지막으로, 생성된 HTML을 달력 테이블에 삽입한다.

function selectDate(day) {}

사용자가 일자를 선택했을 때 호출되는 함수

const allTd = document.querySelectorAll('#calendar td');
        for (let i = 0; i < allTd.length; i++) {
            allTd[i].classList.remove('selected');
        }

        for (let i = 0; i < allTd.length; i++) {
            if (allTd[i].innerText == day) {
            	allTd[i].classList.add('selected');
            	break;
            }
        }

 

모든 날짜 셀에서 selected 클래스를 제거한 후, 선택한 날짜 셀에 selected 클래스를 추가하여 강조한다.

const year = document.querySelector('#year').value;
const month = document.querySelector('#selmonth').value;
const div1El = document.querySelector('#div1');

		let date = `<div>`;
		date += `</div>`;
		date += `<b>${year}년 ${month}월 ${day}일을 선택하였습니다.</b>`;
			div1El.innerHTML = date;
			div1.innerHTML += `<b>${year}년 ${month}월을 선택하였습니다</b>`;

 

선택한 날짜 정보를 div1에 표시한다.

window.onload = function() {}

let optmonth = '<option>선택</option>';//월
for (let i = 1; i <= 12; i++) {
			optmonth += `<option>${i}</option>`;
		}
		selmonthEl.innerHTML = optmonth;

월 선택 옵션에 1부터 12까지의 옵션을 추가한다.

selmonthEl.onchange = function(event) {}

선택된 월에 따라 해당 월의 마지막 날짜를 기반으로 날짜 옵션을 생성한다.

			let year = yearEl.value;//년
			let month = selmonthEl.value;
			let date=seldateEl.value;

이떄, 이벤트핸들러가 호출될 때마다 위와 같이 변수를 업데이트한다.(onchange함수를 사용했기 때문에 전역변수와는 별개로 따로 변수를 업데이트해야함.)

btn1.addEventListener('click',function() {createCalendar(year, month, date);});

버튼 클릭 시 createCalendar 함수를 호출하여 선택된 연도와 월, 일에 따라 달력을 생성한다.