자바스크립트를 사용하여 달력을 만드는 방법

웹 애플리케이션이 점점 더 인기를 끌면서 많은 개발자는 사용자가 날짜를 선택할 수 있도록 웹 사이트나 애플리케이션에 달력을 구현해야 합니다. JavaScript를 사용하면 간단하면서도 강력한 달력을 쉽게 만들 수 있습니다. 이 기사에서는 JavaScript를 사용하여 달력을 구현하는 기본 단계를 다루고 샘플 코드를 제공합니다.

1. HTML Skeleton

먼저 달력을 호스팅하려면 HTML 프레임워크가 필요합니다. 두 개의 입력 상자와 하나의 버튼이 포함된 <div> 元素，并指定一个唯一的ID，以便我们可以通过JavaScript操作它。我们需要在这个 <code><div> 요소를 만들어야 합니다. 하나의 입력 상자는 선택한 날짜를 표시하는 데 사용되고 다른 하나는 새 날짜의 입력을 받는 데 사용됩니다. <ol start="2"><li>현재 날짜 가져오기</li></ol> <p>JavaScript에서는 Date 개체를 사용하여 현재 날짜를 가져옵니다. getDate() 메소드를 사용하여 이번 달의 날짜를 가져오고 getFullYear() 메소드를 사용하여 현재 연도를 가져올 수 있습니다. </p> <ol start="3"><li>캘린더 만들기</li></ol> <p>다음으로 달력을 만들어야 합니다. 테이블 요소를 사용하여 간단한 달력을 만들 수 있습니다. for 루프를 사용하여 날짜가 포함된 테이블 셀을 생성할 수 있습니다. 한 가지 주목해야 할 점은 매월 첫째 날이 반드시 일요일일 필요는 없으므로 첫 번째 셀의 인덱스 값을 사용하여 시작 날짜를 결정해야 한다는 것입니다. </p> <ol start="4"><li>날짜 선택 처리</li></ol> <p>사용자가 날짜를 선택할 수 있도록 JavaScript를 사용하여 입력 상자의 이벤트를 수신하여 새 날짜가 선택되면 달력을 업데이트할 수 있습니다. Date 객체를 사용하여 두 날짜를 비교하고 그 사이의 일수를 얻을 수 있습니다. 선택한 날짜가 현재 날짜보다 크면 달력을 앞으로 스크롤할 수 있고 그렇지 않으면 달력을 뒤로 스크롤할 수 있습니다. </p> <ol start="5"><li>버튼 기능 추가</li></ol> <p>마지막으로 사용자가 버튼을 클릭할 때 캘린더를 표시하거나 숨길 수 있는 기능을 드롭다운 버튼에 추가해야 합니다. CSS 스타일을 사용한 다음 버튼에 이벤트 리스너를 추가하여 달력을 숨기거나 표시할 수 있습니다. </p> <p>일부 추가 기능은 다음과 같습니다. </p> <ul> <li>클래스를 추가하여 현재 선택한 날짜와 마우스로 가리킨 날짜를 강조 표시 </li> <li>주말과 평일 구분 </li> <li>연간/월별 문제 해결 </li> </ul> <p>코드 예: </p> <p>HTML :</p> <pre class="brush:php;toolbar:false">&lt;div&gt;   &lt;input&gt;   &lt;input&gt;   &lt;button&gt;V&lt;/button&gt;   &lt;table&gt;&lt;/table&gt; &lt;/div&gt;</pre> <p>CSS:</p> <pre class="brush:php;toolbar:false">#calendar {   position: relative; } #calendar input[type=&quot;text&quot;] {   padding: 5px;   border: 1px solid #ccc;   font-size: 16px; } #calendar table {   display: none;   position: absolute;   top: 30px;   left: 0;   border-collapse: collapse; } #calendar td {   padding: 5px;   text-align: center;   cursor: pointer; } #calendar .currentDay {   background-color: #B6D9FA; } #calendar .hoverDay {   background-color: #EAEAEA; } #calendar .weekend {   color: red; }</pre> <p>JavaScript:</p> <pre class="brush:php;toolbar:false">var currentDate = new Date(); var selectedDate = document.getElementById('selectedDate'); var newDate = document.getElementById('newDate'); var calBtn = document.getElementById('calBtn'); var calendarTable = document.getElementById('calendarTable'); // Update selected date whenever the date input is changed selectedDate.addEventListener('change', function() {   currentDate = new Date(selectedDate.value);   updateCalendar(); }); // Show/hide calendar when button is clicked calBtn.addEventListener('click', function() {   if (calendarTable.style.display === 'none') {     calendarTable.style.display = 'table';   } else {     calendarTable.style.display = 'none';   } }); // Add event listeners for hovering over calendar dates calendarTable.addEventListener('mouseover', function(e) {   if (e.target.nodeName === 'TD' &amp;&amp; e.target.innerHTML !== '') {     e.target.classList.add('hoverDay');   } }); calendarTable.addEventListener('mouseout', function(e) {   if (e.target.nodeName === 'TD' &amp;&amp; e.target.innerHTML !== '') {     e.target.classList.remove('hoverDay');   } }); // Generate calendar function updateCalendar() {   var currentMonth = currentDate.getMonth();   var currentYear = currentDate.getFullYear();   var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();   var firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();   var lastDayIndex = new Date(currentYear, currentMonth, daysInMonth).getDay();   var prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();   var calendarHtml = '';      // Add table headings   calendarHtml += '&lt;tr&gt;&lt;th&gt;' + getMonthName(currentMonth) + ' ' + currentYear + '&lt;/th&gt;&lt;/tr&gt;'   calendarHtml += '&lt;tr&gt; &lt;th&gt;Sun&lt;/th&gt; &lt;th&gt;Mon&lt;/th&gt; &lt;th&gt;Tue&lt;/th&gt; &lt;th&gt;Wed&lt;/th&gt; &lt;th&gt;Thu&lt;/th&gt; &lt;th&gt;Fri&lt;/th&gt; &lt;th&gt;Sat&lt;/th&gt; &lt;/tr&gt;';      // Add days of previous month before the first day of current month   var prevMonthDaysToAdd = firstDayIndex === 0 ? 6 : firstDayIndex - 1;   var prevMonthStartDay = prevMonthDays - prevMonthDaysToAdd + 1;   for (var i = 0; i ' + prevMonthStartDay + '';     prevMonthStartDay++;   }      // Add days of current month   for (var i = 1; i ' + i + '';     } else if (isWeekend(new Date(currentYear, currentMonth, i).getDay())) {       calendarHtml += '&lt;td&gt;' + i + '&lt;/td&gt;';     } else {       calendarHtml += '&lt;td&gt;' + i + '&lt;/td&gt;';     }     if (new Date(currentYear, currentMonth, i).getDay() === 6) {       calendarHtml += '&lt;tr&gt;';     }   }      // Add days of next month after the last day of current month   var nextMonthDaysToAdd = lastDayIndex === 0 ? 0 : 7 - lastDayIndex;   for (var i = 1; i ' + i + '';     if (lastDayIndex === 6 &amp;&amp; i === nextMonthDaysToAdd) {       break;     }   }      // Append the calendar to the HTML   calendarTable.innerHTML = calendarHtml; } // Get the name of the month from its numerical value function getMonthName(month) {   var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',     'July', 'August', 'September', 'October', 'November', 'December'   ];   return monthNames[month]; } // Check if a day is a weekend day function isWeekend(day) {   return day === 0 || day === 6; } updateCalendar();&lt;/tr&gt;</pre> </div>