달력에서 특정 날짜 클릭 시 해당 날짜 데이터만 가지고 오기
본문
<!-- 달력 -->
<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);
?>
답변 2
WHERE `g5_wzp_booking_room2`.`bkr_frdate` >= cast(now() as char)
여기를
WHERE `g5_wzp_booking_room2`.`bkr_frdate` = cast(now() as char)
이렇게 해 보세요.
버튼을 누를때마다 해당 날짜의 예약정보로 바껴야되는데 위처럼 바꾸면 그냥 오늘 날짜만 나오지 않을까요?
날짜를 눌러서 그 날 예약된 현황을 보고싶네요ㅜㅜ
ajax 작성하시는 방법을 추천드립니다.
답변을 작성하시기 전에 로그인 해주세요.
