[JS동적캘린더] 토,일 기본값 disabled, 오늘날짜 포함한 이전날짜 disabled

<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;  // 선택된 셀의 배경색
}
label {
  margin-right: 20px;
}
input[type="radio"] {
  margin-right: 5px;
}
.disabled {
  color: #d3d3d3; 
  background-color: #f9f9f9; 
  pointer-events: none; /* 클릭 비활성화 */
}

var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth() + 1;

window.onload = function() {
  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 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;

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

    for (let j = 0; j < 7; j++) {
      const cell = row.insertCell();
      const currentDate = new Date(year, month - 1, date);
      const dayOfWeek = currentDate.getDay(); // 일요일은 0, 토요일은 6

      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 (currentDate < today || dayOfWeek === 0 || dayOfWeek === 6) {
          cell.classList.add('disabled');
          cell.style.color = '#d3d3d3'; // 비활성화된 날짜 색상
        } else {
          (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);
        }

        if (today.getFullYear() === year && today.getMonth() + 1 === month && today.getDate() === date) {
          cell.style.border = "3px solid #586e9a"; // 오늘날짜 테두리 스타일
        }
        
        date++;
        rowHasDates = true;
      }
    }

    if (!rowHasDates) {
      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}년 ${monthNames[month - 1]} ${date}일`;
  displayArea.textContent = formattedDate;

  // 시간대 라디오 버튼 생성
  const times = ["09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00"];
  const timeSelector = document.createElement('div');

  times.forEach(time => {
    const label = document.createElement('label');
    const radioInput = document.createElement('input');
    radioInput.type = 'radio';
    radioInput.name = 'appointmentTime';
    radioInput.value = time;
    
    label.appendChild(radioInput);
    label.appendChild(document.createTextNode(time));
    timeSelector.appendChild(label);

    radioInput.addEventListener('click', function() {
      console.log(`시간선택 :  ${time} `);
    });
  });

  displayArea.appendChild(timeSelector);
}

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);
}