/** * 달력 렌더링 할 때 필요한 정보 목록 현재 월 (초기값 : 현재 시간) 금월 마지막일 날짜와 요일 전월 마지막일 날짜와 요일 */ function calendarInit() { // 날짜 정보 가져오기 var date = new Date(); // 현재 날짜(로컬 기준) 가져오기 var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); // utc 표준시 도출 var kstGap = 9 * 60 * 60 * 100; // 한국 kst 기준시간 더하기 var today = new Date(utc + kstGap); // 한국 시간으로 date 객체 만들기(오늘) console.log("Today : ", today) // 달력에서 표기하는 날짜 객체 var thisMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate()); var currentYear = thisMonth.getFullYear(); // 달력에서 표기하는 연 var currentMonth = thisMonth.getMonth(); // 달력에서 표기하는 월 var currentDate = thisMonth.getDate(); // 달력에서 표기하는 일 // kst 기준 현재시간 console.log("thisMonth"); console.log(currentYear); console.log(currentMonth); // monthIndex console.log(currentDate); console.log(thisMonth); // 캘린더 랜더링 renderCalender(thisMonth); //////////////////////////////////////////////////////////////// function renderCalender(thisMonth, help=0) { // 랜더링을 위한 데이터 정리 currentYear = thisMonth.getFullYear(); currentMonth = thisMonth = thisMonth.getMonth(); if (help != 1) { // currentDate = thisMonth.getDate(); // 1 - 31 : 1 - 31 currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getDate(); } // 이전 달의 마지막날 날짜와 요일 구하기 var startDay = new Date(currentYear, currentMonth, 0); var prevDate = startDay.getDate(); // 1 - 31 : 1 - 31 var prevDay = startDay.getDay(); // Sunday - Saturday : 0 - 6 // 이번 달의 마지막날 날짜와 요일 구하기 var endDay = new Date(currentYear, currentMonth + 1 , 0); var nextDate = endDay.getDate(); // 1 - 31 : 1 - 31 var nextDay = endDay.getDay(); // Sunday - Saturday : 0 - 6 // console.log(prevDate, prevDay, nextDate, nextDay, currentMonth); // 현재 월 표기 $('.year-month').text(currentYear + '.' + (currentMonth + 1)); // 랜더링 html 요소 생성 calendar = document.querySelector('.dates') calendar.innerHTML = ''; // 지난달 for (var i = prevDate - prevDay + 1; i <= prevDate; i++) { calendar.innerHTML = calendar.innerHTML + '' } // 이번달 for (var i = 1; i <= nextDate; i++) { calendar.innerHTML = calendar.innerHTML + '
' + i + '
' } // 다음달 for (var i = 1; i <= (7 - nextDay == 7 ? 0 : 7 - nextDay); i++) { calendar.innerHTML = calendar.innerHTML + '' } // 오늘 날짜 표기 if (today.getMonth() == currentMonth) { todayDate = today.getDate(); var currentMonthDate = document.querySelectorAll('.dates .current'); // 중간 띄어쓰기 주의 // var currentMonthDate = document.querySelectorAll('div.day.current'); // 같은 의미 // console.log(currentMonthDate) currentMonthDate[todayDate-1].classList.add('today'); } // 이전달로 이동 $('.go-prev').on('click', function() { if (help == 0) { thisMonth = new Date(currentYear, currentMonth - 1, 1); renderCalender(thisMonth, 1); } else { renderCalender(thisMonth, 1); } }) // 다음달로 이동 $('.go-next').on('click', function() { if (help == 0) { thisMonth = new Date(currentYear, currentMonth + 1, 1); renderCalender(thisMonth, 1); } else { renderCalender(thisMonth, 1); } }) } }