<!-- 달력 -->
  <div class="container">
  <div class="my-calendar clearfix">
    <div class="clicked-date">
      <div class="cal-day"></div>
      <div class="cal-date"></div>
    </div>
    <div class="calendar-box">
      <div class="ctr-box clearfix">
        <button type="button" title="prev" class="btn-cal prev">
        </button>
        <span class="cal-month"></span>
        <span class="cal-year"></span>
        <button type="button" title="next" class="btn-cal next">
        </button>
      </div>
      <table class="cal-table">
        <thead>
          <tr>
            <th>S</th>
            <th>M</th>
            <th>T</th>
            <th>W</th>
            <th>T</th>
            <th>F</th>
            <th>S</th>
          </tr>
        </thead>
        <tbody class="cal-body"></tbody>
      </table>
    </div>
  </div>
  <!-- // .my-calendar -->
</div>
  <script>
  /**
   * App Here
   */
  const init = {
  monList: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  dayList: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  today: new Date(),
  monForChange: new Date().getMonth(),
  activeDate: new Date(),
  getFirstDay: (yy, mm) => new Date(yy, mm, 1),
  getLastDay: (yy, mm) => new Date(yy, mm + 1, 0),
  nextMonth: function () {
    let d = new Date();
    d.setDate(1);
    d.setMonth(++this.monForChange);
    this.activeDate = d;
    return d;
  },
  prevMonth: function () {
    let d = new Date();
    d.setDate(1);
    d.setMonth(--this.monForChange);
    this.activeDate = d;
    return d;
  },
  addZero: (num) => (num < 10) ? '0' + num : num,
  activeDTag: null,
  getIndex: function (node) {
    let index = 0;
    while (node = node.previousElementSibling) {
      index++;
    }
    return index;
  }
};
const $calBody = document.querySelector('.cal-body');
const $btnNext = document.querySelector('.btn-cal.next');
const $btnPrev = document.querySelector('.btn-cal.prev');
/**
 * @param {number} date
 * @param {number} dayIn
*/
function loadDate (date, dayIn) {
  document.querySelector('.cal-date').textContent = date;
  document.querySelector('.cal-day').textContent = init.dayList[dayIn];
}
/**
 * @param {date} fullDate
 */
function loadYYMM (fullDate) {
  let yy = fullDate.getFullYear();
  let mm = fullDate.getMonth();
  let firstDay = init.getFirstDay(yy, mm);
  let lastDay = init.getLastDay(yy, mm);
  let markToday;  // for marking today date
 
  if (mm === init.today.getMonth() && yy === init.today.getFullYear()) {
    markToday = init.today.getDate();
  }
  document.querySelector('.cal-month').textContent = init.monList[mm];
  document.querySelector('.cal-year').textContent = yy;
  let trtd = '';
  let startCount;
  let countDay = 0;
  for (let i = 0; i < 6; i++) {
    trtd += '<tr>';
    for (let j = 0; j < 7; j++) {
      if (i === 0 && !startCount && j === firstDay.getDay()) {
        startCount = 1;
      }
      if (!startCount) {
        trtd += '<td>'
      } else {
        let fullDate = yy + '.' + init.addZero(mm + 1) + '.' + init.addZero(countDay + 1);
        trtd += '<td class="day';
        trtd += (markToday && markToday === countDay + 1) ? ' today" ' : '"';
        trtd += ` data-date="${countDay + 1}" data-fdate="${fullDate}">`;
      }
      trtd += (startCount) ? ++countDay : '';
      if (countDay === lastDay.getDate()) {
        startCount = 0;
      }
      trtd += '</td>';
    }
    trtd += '</tr>';
  }
  $calBody.innerHTML = trtd;
}
/**
 * @param {string} val
 */
function createNewList (val) {
  let id = new Date().getTime() + '';
  let yy = init.activeDate.getFullYear();
  let mm = init.activeDate.getMonth() + 1;
  let dd = init.activeDate.getDate();
  const $target = $calBody.querySelector(`.day[data-date="${dd}"]`);
  let date = yy + '.' + init.addZero(mm) + '.' + init.addZero(dd);
  let eventData = {};
  eventData['date'] = date;
  eventData['memo'] = val;
  eventData['complete'] = false;
  eventData['id'] = id;
  init.event.push(eventData);
  $todoList.appendChild(createLi(id, val, date));
}
loadYYMM(init.today);
loadDate(init.today.getDate(), init.today.getDay());
$btnNext.addEventListener('click', () => loadYYMM(init.nextMonth()));
$btnPrev.addEventListener('click', () => loadYYMM(init.prevMonth()));
$calBody.addEventListener('click', (e) => {
  if (e.target.classList.contains('day')) {
    if (init.activeDTag) {
      init.activeDTag.classList.remove('day-active');
    }
    let day = Number(e.target.textContent);
    loadDate(day, e.target.cellIndex);
    e.target.classList.add('day-active');
    init.activeDTag = e.target;
    init.activeDate.setDate(day);
 // 임시
 var select_date = document.getElementsByClassName('day-active');
 var SelectedDate = ""; // 선택한 날짜
 var ReservationDate =""; // 예약현황 예약일 레코드 형식으로 변환 YYYY-MM-DD
 for(var i = 0; i < select_date.length; i++){
  SelectedDate += select_date[i].getAttribute('data-fdate');
 }
 // console.log(SelectedDate);
 SelectedDateYear = SelectedDate.substr(0, 4);
 SelectedDateMonth = SelectedDate.substr(5, 2);
 SelectedDateDay = SelectedDate.substr(8, 2);
 ReservationDate = SelectedDateYear + "-" + SelectedDateMonth + "-" + SelectedDateDay;
 console.log(ReservationDate); // 테스트
 
 var ResDate = document.getElementsByClassName('column5').innerText;
 
 for(var i = 0; i < ResDate.length; i++){
  if( ReservationDate != ResDate[i]){
      console.log(Resdate[i]);
   var ResDateParents = ResDate[i].parentNode;
   ResDateParents.style.display = "none";
  }
  
 }
 console.log(ResDate);
 reloadTodo();
  }
});
 
</script>

        echo '<h2><p class="text-center"><strong>예약현황</strong></p></h2>';
      }
   $select_query = "SELECT `g5_wzp_booking_room2`.`bkr_ix`, `g5_wzp_booking_room2`.`bk_ix`,`g5_wzp_room2`.`rm_ix`, `g5_wzp_room2`.`rm_subject`,`g5_wzp_booking2`.`bk_memo`,`g5_wzp_booking_room2`.`bkr_frdate`,`g5_wzp_booking2`.`bk_name`,`g5_wzp_booking2`.`bk_hp`
    FROM `g5_wzp_booking_room2`
    LEFT OUTER JOIN `g5_wzp_booking2` on `g5_wzp_booking_room2`.`bk_ix` = `g5_wzp_booking2`.`bk_ix`
    LEFT OUTER JOIN `g5_wzp_room2` on `g5_wzp_booking_room2`.`rm_ix` = `g5_wzp_room2`.`rm_ix`
    WHERE `g5_wzp_booking_room2`.`bkr_frdate` >= cast(now() as char)
    ORDER BY `g5_wzp_booking_room2`.`bkr_frdate`,`g5_wzp_booking_room2`.`rm_ix`";
$result = mysqli_query($jb_connect, $select_query);
$fields = mysqli_num_rows($result);
?>
<table class="table table-hover">
 <tr>
  <td><strong>인덱스</strong></td>
  <td><strong>예약번호</strong></td>
  <td><strong>방번호</strong></td>
  <td><strong>내용</strong></td>
  <td><strong>예약메모</strong></td>
  <td><strong>예약일</strong></td>
  <td><strong>예약자</strong></td>
  <td><strong>연락처</strong></td>
 </tr>
<?php
echo "<!-- 필드 갯수 : $fields -->";
while ( $row = mysqli_fetch_array($result)){
 echo("<tr id='bookingindex_$row[0]'>");
 for ($i = 0; $i < $fields; $i++){
  echo("<td class ='column$i'><h5> $row[$i] </h5></td>");
 }
 echo("</tr>");
}
mysqli_close($jb_connect);
?>