예약페이지 달력 화면 각 일자에 예약 수를 표시하고 싶어요

Question

안녕하세요 현재 공부할겸 개인프로젝트로 예약페이지를 만드는 작업을 하고 있습니다.그 과정에서 자바스크립트로 달력까지 출력되고 동적으로 년도랑 달 까지 다 바뀝니다.예약을 하면 사용자 정보와 예약일자가 잘 저장이 되고달력에 각 년도,월,일에 맞는 예약인원수를 보여줘야 하는데 쉽지 않습니다.같은날에 예약인원은 여러명도 가능 합니다.자바스크립트window.onload = function () { load_Candle(Year, Month); } /* 달력에 필요한 객체 선언 및 변수 만들기 */ let date = new Date(); // Date 객체 선언 let Year = date.getFullYear(); //달력 년도 let Month = date.getMonth() + 1; //달력 월 let Day = date.getDate(); //일 /* 달력출력하기 */ function load_Candle(Year, Month) { //년도 let year = document.getElementById('load_year'); //월 let month = document.getElementById('load_month'); //마지막 일 구하기 let dayDate = new Date(Year, Month, 0); //이전 달 마지막 일 구하기 let lastMonthDayDate = dayDate.getDate(); //달력 월의 시작 요일 구하기 let monthStartDay = new Date(Year, Month - 1, 1); let StartDay = monthStartDay.getDay(); //몇 주 인지 계산 let weekCount = Math.ceil((StartDay + lastMonthDayDate) / 7); //년도, 월, 일 뿌려주기 year.innerHTML = Year + "."; if ((Month / 10) % 10 < 1) { month.innerHTML = "0" + Month; } else { month.innerHTML = Month; } //날짜 테이블 생성할 ID값 let candle_Table_Start_Day = document.getElementById('candle_Table_Start_Day'); candle_Table_Start_Day.innerHTML = ""; // 기존 테이블 초기화 let html = ""; //날짜 생성될 위치 let candleXYZ = 0; //날짜 let candleDay = 0; //월 , 날짜가 두자리가 아닌경우 0을 추가해주기 let Cmonth = ""; if ((Month / 10) % 10 < 1) { Cmonth = "0" + Month; } else { Cmonth = Month; } for (let i = 0; i < weekCount; i++) { html += ""; for (let y = 0; y < 7; y++) { html += ""; if (StartDay <= candleXYZ && candleDay < lastMonthDayDate) { candleDay++; if((candleDay / 10) % 10 < 1){ html += "" + candleDay + ""; } else { html += "" + candleDay + ""; } } html += ""; candleXYZ++; } html += ""; } candle_Table_Start_Day.innerHTML = html; } /*여기까지 출력부분*/ /*버튼 눌렀을때 월 및 년도 바뀌게 하기*/ function right_Btn() { Month++; // Month 변수를 증가시킵니다. // 월이 12월을 넘어가면 (12보다 크면), 월을 1월로 초기화하고 연도도 증가시킵니다. if (Month > 12) { Month = 1; Year++; // 월이 초기화되면 연도도 증가시킵니다. } // "load_Candle()" 함수를 호출하여 새로운 Month 값으로 달력을 업데이트합니다. load_Candle(Year, Month); } function left_Btn() { Month--; // Month 변수를 증가시킵니다. // 월이 01월보다 아래로 내려가면 (1보다 작으면), 월을 12월로 초기화하고 연도도 차감시킨다. if (Month < 1) { Month = 12; Year--; // 월이 초기화되면 연도도 증가시킵니다. } // "load_Candle()" 함수를 호출하여 새로운 Month 값으로 달력을 업데이트합니다. load_Candle(Year, Month); } HTML

일

월

화

수

목

금

토

Chobby · Answer

우선 시도해보시고, 의도한대로 동작하지 않는다면 의심되는 부분의 코드를 같이 업로드해주세요이렇게 게시물이 업로드 되면 도와드리기 쉽지 않습니다.

맨땅의헤딩 · Answer

코드 쓰실때 okky에서 제공 하는 코드 에디터 활용하면 보기 편해요.'<>' 이 에디터 누르면 됩니다.

Chobby · Answer

자바스크립트가 안 올라간 거 같아요

여러가지하고싶다 · Answer

타임리프활용해서 시도중...

예약페이지 달력 화면 각 일자에 예약 수를 표시하고 싶어요

4개의 답변

기술 목록