달력에서 특정 날짜 클릭 시 해당 날짜 데이터만 가지고 오기 채택완료

</p>

<p>  <!-- 달력 -->

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

  }

};</p>

<p>const $calBody = document.querySelector('.cal-body');

const $btnNext = document.querySelector('.btn-cal.next');

const $btnPrev = document.querySelector('.btn-cal.prev');</p>

<p>/**

 * @param {number} date

 * @param {number} dayIn

*/

function loadDate (date, dayIn) {

  document.querySelector('.cal-date').textContent = date;

  document.querySelector('.cal-day').textContent = init.dayList[dayIn];

}</p>

<p>/**

 * @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();

  }</p>

<p>  document.querySelector('.cal-month').textContent = init.monList[mm];

  document.querySelector('.cal-year').textContent = yy;</p>

<p>  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;

}</p>

<p>/**

 * @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}"]`);</p>

<p>  let date = yy + '.' + init.addZero(mm) + '.' + init.addZero(dd);</p>

<p>  let eventData = {};

  eventData['date'] = date;

  eventData['memo'] = val;

  eventData['complete'] = false;

  eventData['id'] = id;

  init.event.push(eventData);

  $todoList.appendChild(createLi(id, val, date));

}</p>

<p>loadYYMM(init.today);

loadDate(init.today.getDate(), init.today.getDay());</p>

<p>$btnNext.addEventListener('click', () => loadYYMM(init.nextMonth()));

$btnPrev.addEventListener('click', () => loadYYMM(init.prevMonth()));</p>

<p>$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();

  }

});

 </p>

<p></script></p>

<p>

</p>

<p>        echo '<h2><p class="text-center"><strong>예약현황</strong></p></h2>';

      }</p>

<p>   $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`";</p>

<p>$result = mysqli_query($jb_connect, $select_query);

$fields = mysqli_num_rows($result);

?></p>

<p><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>");

}</p>

<p>mysqli_close($jb_connect);</p>

<p>?></p>

<p>