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

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

QA

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

본문


  <!-- 달력 -->
  <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');
/**
 *  {number} date
 *  {number} dayIn
*/
function loadDate (date, dayIn) {
  document.querySelector('.cal-date').textContent = date;
  document.querySelector('.cal-day').textContent = init.dayList[dayIn];
}
/**
 *  {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;
}
/**
 *  {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>

 

3659974726_1618194976.6444.png

위는 달력 소스이고 아래는 정보 출력 소스입니다. 여기에서 해당 날짜를 클릭하게 되면 해당일에 예약된 정보만 가지고 오고 싶은데 현재는 오늘 이후의 예약된 데이터를 모두 들고옵니다..

 

자바스크립트?를 어떻게 짜야지 날짜 클릭 시 해당 날짜의 예약된 정보를 가지고 올 수 있을까요?

 


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

이 질문에 댓글 쓰기 :

답변 2

WHERE `g5_wzp_booking_room2`.`bkr_frdate` >= cast(now() as char)

여기를

WHERE `g5_wzp_booking_room2`.`bkr_frdate` = cast(now() as char)

이렇게 해 보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 150
QA 내용 검색
filter #json ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT