[Javascript] 년, 월 선택하면 달력(캘린더) 보여주는 프로그램

년과 월을 선택하면 달력을 보여주는 프로그램을 생성하자

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        const viewCalendar = function() {
            const year = document.frm.year.options[document.frm.year.options.selectedIndex].value;
            const month = document.frm.month.options[document.frm.month.options.selectedIndex].value;
 
            const startCalendar = new Date( 2024, month-1, 1 );
            const endCalendar = new Date( 2024, month, 1-1 );
 
            const startDayOfWeek = startCalendar.getDay() + 1; 
            const endDate = endCalendar.getDate();
            const endDayOfWeek = endCalendar.getDay() + 1; 
 
            let html = '<table border="1" width="800" height="600" cellspacing="0">';
            html += '<tr>';
            html += '<th>일요일</th>';
            html += '<th>월요일</th>';
            html += '<th>화요일</th>';
            html += '<th>수요일</th>';
            html += '<th>목요일</th>';
            html += '<th>금요일</th>';
            html += '<th>토요일</th>';
            html += '</tr>';
 
            html += '<tr>';
            for( let i=1 ; i<startDayOfWeek ; i++ ) {
                html += '<td></td>';
            }
 
            for( let i=1, n=startDayOfWeek ; i<=endDate ; i++, n++ ) {
                if( n % 7 == 1 ) {
                    html += '<tr>';
                }
 
                html += '<td>' + i + '</td>';
 
                if( n % 7 == 0 ) {
                    html += '</tr>';
                }
            }
 
            for( let i=endDayOfWeek ; i<=6 ; i++ ) {
                html += '<td></td>';
            }
 
            html += '</tr>';
            html += '</table>';
 
            const div = document.getElementById( 'result' );
            div.innerHTML = html;
        };
 
        // html 로딩되면 자동실행
        window.onload = function() {
            viewCalendar();
        };
    </script>
</head>
<body>
 
<table>
<tr>
    <td>
        <form name='frm'>
            <select name="year">
                <option value="2024">2024년</option>
                <option value="2025">2025년</option>
                <option value="2026">2026년</option>
            </select>&nbsp;년
            &nbsp;&nbsp;
            <select name="month">
                <option value="1">1월</option>
                <option value="2">2월</option>
                <option value="3">3월</option>
                <option value="4">4월</option>
                <option value="5">5월</option>
                <option value="6">6월</option>
                <option value="7">7월</option>
                <option value="8">8월</option>
                <option value="9">9월</option>
                <option value="10">10월</option>
                <option value="11">12월</option>
                <option value="12">12월</option>
            </select>&nbsp;월
            &nbsp;&nbsp;
            <input type='button' value='달력보기' onclick='viewCalendar()' />
        </form>
    </td>
</tr>
</table>
    
<br /><hr /><br />
 
<div id="result"></div>
 
</body>
</html>

위의 코드에서 추가적으로 화면을 띄우자마자 현재연월이 표시되도록 만들어보자

ex ) 현재 : 2024년 4월

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        const viewCalendar = function() {
            let year = parseInt(document.frm.year.value);
            let month = parseInt(document.frm.month.value) - 1;
 
            const startCalendar = new Date( 2024, month, 1 );
            const endCalendar = new Date( 2024, month+1, 1-1 );
 
            const startDayOfWeek = startCalendar.getDay() + 1; 
            const endDate = endCalendar.getDate();
            const endDayOfWeek = endCalendar.getDay() + 1; 
 
            let html = '<table border="1" width="800" height="600" cellspacing="0">';
            html += '<tr>';
            html += '<th>일요일</th>';
            html += '<th>월요일</th>';
            html += '<th>화요일</th>';
            html += '<th>수요일</th>';
            html += '<th>목요일</th>';
            html += '<th>금요일</th>';
            html += '<th>토요일</th>';
            html += '</tr>';
 
            html += '<tr>';
            for( let i=1 ; i<startDayOfWeek ; i++ ) {
                html += '<td></td>';
            }
 
            for( let i=1, n=startDayOfWeek ; i<=endDate ; i++, n++ ) {
                if( n % 7 == 1 ) {
                    html += '<tr>';
                }
 
                html += '<td>' + i + '</td>';
 
                if( n % 7 == 0 ) {
                    html += '</tr>';
                }
            }
 
            for( let i=endDayOfWeek ; i<=6 ; i++ ) {
                html += '<td></td>';
            }
 
            html += '</tr>';
            html += '</table>';
 
            const div = document.getElementById( 'result' );
            div.innerHTML = html;
        };
 
        // html 로딩되면 자동실행
        window.onload = function() {
 
            // select box 기본값 선택
            const todayCalendar = new Date();
            switch(todayCalendar.getFullYear()) {
                case 2024 :
                    document.frm.year.options.selectedIndex = 0;
                    break;
                case 2025 :
                    document.frm.year.options.selectedIndex = 1;
                    break;
                case 2026 :
                    document.frm.year.options.selectedIndex = 2;
                    break;
                    
            }
 
            document.frm.month.options.selectedIndex = todayCalendar.getMonth();
 
            viewCalendar();
 
        };
    </script>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <form name='frm'>
                    <select name="year">
                        <option value="2024">2024년</option>
                        <option value="2025">2025년</option>
                        <option value="2026">2026년</option>
                    </select>&nbsp;년
                    &nbsp;&nbsp;
                    <select name="month">
                        <option value="1">1월</option>
                        <option value="2">2월</option>
                        <option value="3">3월</option>
                        <option value="4">4월</option>
                        <option value="5">5월</option>
                        <option value="6">6월</option>
                        <option value="7">7월</option>
                        <option value="8">8월</option>
                        <option value="9">9월</option>
                        <option value="10">10월</option>
                        <option value="11">12월</option>
                        <option value="12">12월</option>
                    </select>&nbsp;월
                    &nbsp;&nbsp;
                    <input type='button' value='달력보기' onclick='viewCalendar()' />
                </form>
            </td>
        </tr>
        </table>
    
<br /><hr /><br />
 
<div id="result"></div>
 
</body>
</html>

'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글

[Javascript] 시작단과 끝단을 입력하면 구구단이 출력되는 프로그램 (0)	2024.04.26
[Javascript] 입력창에 검색어 입력 후 다음, 네이버, 구글에서 검색결과 보기 (0)	2024.04.26
[Javascript] 중복없는 로또번호 출력 (0)	2024.04.25
[Javascript] 국영수 총점과 평균 나타내는 표 만들기 (0)	2024.04.25
[Javascript] 구구단 테이블 만들기 (0)	2024.04.25

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[Javascript] 년, 월 선택하면 달력(캘린더) 보여주는 프로그램

'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글

'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
	const viewCalendar = function() {
	const year = document.frm.year.options[document.frm.year.options.selectedIndex].value;
	const month = document.frm.month.options[document.frm.month.options.selectedIndex].value;

	const startCalendar = new Date( 2024, month-1, 1 );
	const endCalendar = new Date( 2024, month, 1-1 );

	const startDayOfWeek = startCalendar.getDay() + 1;
	const endDate = endCalendar.getDate();
	const endDayOfWeek = endCalendar.getDay() + 1;

	let html = '<table border="1" width="800" height="600" cellspacing="0">';
	html += '<tr>';
	html += '<th>일요일</th>';
	html += '<th>월요일</th>';
	html += '<th>화요일</th>';
	html += '<th>수요일</th>';
	html += '<th>목요일</th>';
	html += '<th>금요일</th>';
	html += '<th>토요일</th>';
	html += '</tr>';

	html += '<tr>';
	for( let i=1 ; i<startDayOfWeek ; i++ ) {
	html += '<td></td>';
	}

	for( let i=1, n=startDayOfWeek ; i<=endDate ; i++, n++ ) {
	if( n % 7 == 1 ) {
	html += '<tr>';
	}

	html += '<td>' + i + '</td>';

	if( n % 7 == 0 ) {
	html += '</tr>';
	}
	}

	for( let i=endDayOfWeek ; i<=6 ; i++ ) {
	html += '<td></td>';
	}

	html += '</tr>';
	html += '</table>';

	const div = document.getElementById( 'result' );
	div.innerHTML = html;
	};

	// html 로딩되면 자동실행
	window.onload = function() {
	viewCalendar();
	};
	</script>
	</head>
	<body>

	<table>
	<tr>
	<td>
	<form name='frm'>
	<select name="year">
	<option value="2024">2024년</option>
	<option value="2025">2025년</option>
	<option value="2026">2026년</option>
	</select> 년

	<select name="month">
	<option value="1">1월</option>
	<option value="2">2월</option>
	<option value="3">3월</option>
	<option value="4">4월</option>
	<option value="5">5월</option>
	<option value="6">6월</option>
	<option value="7">7월</option>
	<option value="8">8월</option>
	<option value="9">9월</option>
	<option value="10">10월</option>
	<option value="11">12월</option>
	<option value="12">12월</option>
	</select> 월

	<input type='button' value='달력보기' onclick='viewCalendar()' />
	</form>
	</td>
	</tr>
	</table>

	<br /><hr /><br />

	<div id="result"></div>

	</body>
	</html>