class sCal { constructor(selector){ let _this = this; _this.calendar = document.querySelector(selector); _this.monthRow = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']; _this.weekRow = ['일','월','화','수','목','금','토']; _this.today = new Date(); _this.toyear = new Date().getFullYear(); _this.tomon = new Date().getMonth()+1; // _this.inDates = []; //{날짜:데이터 형식...일단 그렇게...아니 배열로} // _this.outDates = []; //{날짜:데이터 형식...일단 그렇게... 아니 배열로} } cellDate (tgt, dayinfo) { return dayinfo.date; }; cellHtml (tgt, dayinfo) { return ""; }; enablefunc () {return true;}; combinefunc () {return true;}; makeCal (year, mon, caldata) { let _this = this; year = year || _this.toyear; mon = mon || _this.tomon; _this.toyear = year; _this.tomon = mon; if( typeof _this.cellDate != "function" ){ let data = _this.cellDate; _this.cellDate = function(){ return data; } } if( typeof _this.cellHtml != "function" ){ let data = _this.cellHtml; _this.cellHtml = function(){ return data; } } // _this.inDates = _this.inDates.map(v => { let vsp = v.split("-"); return vsp[0]+'-'+('0'+vsp[1]).slice(-2)+'-'+('0'+vsp[2]).slice(-2) }); // _this.outDates = _this.outDates.map(v => { let vsp = v.split("-"); return vsp[0]+'-'+('0'+vsp[1]).slice(-2)+'-'+('0'+vsp[2]).slice(-2) }); let yearSelect = document.createElement("select"), monSelect = document.createElement("select"), calTitle = document.createElement("div"), selDiv = document.createElement("div"); yearSelect.id = "selyear"; monSelect.id = "selmon"; calTitle.id = "caltitle"; yearSelect.classList.add("selYear"); monSelect.classList.add("selMon"); calTitle.classList.add("calTitle"); selDiv.classList.add("selDiv"); selDiv.classList.add("selDiv"); for( let a=_this.toyear - 10 ; a<=_this.toyear + 10 ; a++ ){ let opt = document.createElement("option"); opt.value = a; opt.text = a; yearSelect.appendChild(opt); } yearSelect.classList.add("form-control-sm"); yearSelect.classList.add("w80"); yearSelect.addEventListener("change",()=>_this.gotoCal(_this)); for( let a=1 ; a<=12 ; a++ ){ let opt = document.createElement("option"); opt.value = a; opt.text = a; monSelect.appendChild(opt); } monSelect.classList.add("form-control-sm"); yearSelect.classList.add("w40"); monSelect.addEventListener("change",()=>_this.gotoCal(_this)); let btnPrev1 = document.createElement("a"); btnPrev1.innerHTML= ""; let btnPrev2 = btnPrev1.cloneNode(true); ['click','keypress'].forEach(evt => btnPrev1.addEventListener(evt, ()=>_this.prevCal(_this))); ['click','keypress'].forEach(evt => btnPrev2.addEventListener(evt, ()=>_this.prevCal(_this))); let btnNext1 = document.createElement("a"); btnNext1.innerHTML= ""; let btnNext2 = btnNext1.cloneNode(true); ['click','keypress'].forEach(evt => btnNext1.addEventListener(evt, ()=>_this.nextCal(_this))); ['click','keypress'].forEach(evt => btnNext2.addEventListener(evt, ()=>_this.nextCal(_this))); let spanTitle = document.createElement("span"); spanTitle.innerHTML = year +" / "+ ('0'+mon).slice(-2); calTitle.appendChild(btnPrev1); calTitle.appendChild(spanTitle); calTitle.appendChild(btnNext1); selDiv.appendChild(btnPrev2); selDiv.appendChild(yearSelect); selDiv.appendChild(monSelect); selDiv.appendChild(btnNext2); yearSelect.value = year; monSelect.value = mon; let sweek = new Date( year, mon-1 ).getDay(), dayInMon = 32 - new Date( year, mon-1, 32 ).getDate(), adweek = 6 - new Date( year, mon-1, dayInMon ).getDay(), fdate = dayInMon + adweek; let calTable = document.createElement("table"), thead = document.createElement("thead"), tbody = document.createElement("tbody"), thtr = document.createElement("tr"); _this.weekRow.forEach(w=>{ let week = document.createElement("th"); week.innerHTML = w; thtr.append(week); }); thead.append(thtr); calTable.classList.add("calTable"); let date = 1; for( let a=0; a<6; a++ ) { let tr = document.createElement("tr"); for( let b = 0; b < 7; b++ ) { let cell, cellText; if( a === 0 && b < sweek || date > dayInMon && date <= fdate ) { cell = document.createElement( "td" ); cellText = document.createTextNode(""); cell.appendChild(cellText); tr.appendChild(cell); if( date > dayInMon ) date++; }else if( date <= dayInMon ){ let idv = year+(('0'+mon).slice(-2))+(('0'+date).slice(-2)); cell = document.createElement("td"); cell.id = "ymd"+idv; cell.setAttribute("data-date", ('0'+date).slice(-2)); cell.setAttribute("data-mon", ('0'+mon).slice(-2)); cell.setAttribute("data-year", year); cell.setAttribute("data-week", b); cell.classList.add("date-td"); // _this.inDates.forEach(v => { // let vd = v.split("-"); // if( (new Date(Number(vd[0]),Number(vd[1])-1,Number(vd[2]))).getTime() == (new Date(year, mon-1, date)).getTime() ){ // cell.classList.add("date-in"); // } // }); // _this.outDates.forEach(v => { // let vd = v.split("-"); // if( (new Date(Number(vd[0]),Number(vd[1])-1,Number(vd[2]))).getTime() == (new Date(year, mon-1, date)).getTime() ){ // cell.classList.add("date-out"); // } // }); if( year === _this.today.getFullYear() && mon === (_this.today.getMonth()+1) && date === _this.today.getDate() ) { cell.classList.add("date-picker"); cell.classList.add("selected"); } cell.innerHTML = "