[JS] 동적캘린더 소스코드

<div id="calendar-controls">
  <button id="prevMonth">◁</button>
  <span id="currentYearMonth"></span>
  <button id="nextMonth">▷</button>
</div>
<div id="calendar"></div>
<div id="time-slots" style="display:none;"> 
</div>
<div id="selectedDateTime"></div>

table {
  width: 400px;
  height: 343px;
  border-collapse: collapse;
  text-align: center;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

th.day-name {  /* 요일 표시 부분의 스타일 */
  background-color: transparent;  /* 배경 투명 */
  border: none;  /* 테두리 제거 */
  color: #4a506b;  /* 글자색 회색 */
}

td.date-cell {  /* 날짜 셀 스타일 */
  cursor: pointer;  /* 커서를 포인터로 설정 */
}

td.date-cell:hover {
  background-color:#586e9a;
  color:white;
}

button {
  padding: 10px;
  margin: 5px;
  background-color: #f9f9f9;
  border: none;
  cursor: pointer;
}

#calendar-controls {
  width: 400px;
  text-align: center;
  margin-bottom: 20px;
}

.selected {
  background-color: #e63c64;  // 선택된 셀의 배경색
  color: white !;           // 선택된 셀의 텍스트 색상
}

window.onload = function() {
  const today = new Date();
  currentYear = today.getFullYear();
  currentMonth = today.getMonth() + 1;
  createCalendar(currentYear, currentMonth);

  document.getElementById('prevMonth').addEventListener('click', function() {
    changeMonth(-1);
  });

  document.getElementById('nextMonth').addEventListener('click', function() {
    changeMonth(1);
  });
};

function createCalendar(year, month) {
  const container = document.getElementById('calendar');
  container.innerHTML = '';
  const daysInMonth = new Date(year, month, 0).getDate();
  const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
  const today = new Date(); // 오늘 날짜 객체를 생성

  const table = document.createElement('table');
  const header = table.createTHead();
  const headerRow = header.insertRow(0);
  const dayNames = ['일', '월', '화', '수', '목', '금', '토'];

  dayNames.forEach(day => {
    const cell = document.createElement('th');
    cell.textContent = day;
    headerRow.appendChild(cell);
  });

  const calendarBody = table.createTBody();
  let date = 1;
  let usedRows = 0;

  for (let i = 0; i < 6; i++) { // 최대 6주
    const row = calendarBody.insertRow();
    let rowHasDates = false;

    for (let j = 0; j < 7; j++) {
      const cell = row.insertCell();
      if (i === 0 && j < firstDayOfMonth) {
        cell.classList.add('empty');
      } else if (date > daysInMonth) {
        cell.classList.add('empty');
      } else {
        cell.textContent = date;
        cell.classList.add('date-cell');
        
        if (today.getFullYear() === year && today.getMonth() + 1 === month && today.getDate() === date) {
          cell.style.border = "3px solid #586e9a"; // 오늘 날짜에 테두리 추가
        }
        
        
        (function(currentYear, currentMonth, currentDate) {
          cell.addEventListener('click', function() {
            document.querySelectorAll('.date-cell').forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
            displaySelectedDate(currentYear, currentMonth, currentDate);
          });
        })(year, month, date);
        date++;
        rowHasDates = true;
      }
    }

    if (rowHasDates) {
      usedRows++; // 실제 날짜가 있는 행만 증가
    } else {
      calendarBody.removeChild(row); // 불필요한 행 제거
    }
  }

  container.appendChild(table);
  updateHeader(year, month);
}

function displaySelectedDate(year, month, date) {
  const displayArea = document.getElementById('selectedDateTime');
  const monthNames = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];
  const formattedDate = `${year}년 ${month}월 ${date}일`;
  displayArea.textContent = formattedDate;
}

function updateHeader(year, month) {
  const monthNames = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];
  document.getElementById('currentYearMonth').textContent = `${year}년 ${monthNames[month - 1]}`;
}

function changeMonth(delta) {
  currentMonth += delta;
  if (currentMonth < 1) {
    currentYear -= 1;
    currentMonth = 12;
  } else if (currentMonth > 12) {
    currentYear += 1;
    currentMonth = 1;
  }
  createCalendar(currentYear, currentMonth);
}