//= selects[i].pos.x) || (x <= selects[i].pos.x2 && x2 >= selects[i].pos.x2)) x_cross = true; else x_cross = false; // Y축이 달력 영역에 포함되어 있는지 체크 if((y <= selects[i].pos.y && y2 >= selects[i].pos.y) || (y <= selects[i].pos.y2 && y2 >= selects[i].pos.y2)) y_cross = true; else y_cross = false; // X축이나 Y축이 달력 레이어와 겹쳐지면 해당 select element를 숨김 if(x_cross == true && y_cross == true) { selects[i].style.visibility = "hidden"; hidden_select[hidden_count++] = i; } } } // IE와 Maxton에서 숨겨진 select elements를 다시 표시해줌. function show_select() { var selects = document.getElementsByTagName('select'); // hide_select function에서 숨긴 select elements를 다시 보여줌. for(var i=0; i document.body.clientWidth)? document.body.scrollWidth : document.body.clientWidth; } // 클릭한 object의 좌표를 가져옴 var pos_x = 0; var pos_y = 0; var obj = click_obj; while(obj.offsetParent) { pos_y += parseInt(obj.offsetTop); pos_x += parseInt(obj.offsetLeft); obj = obj.offsetParent; } pos_x += parseInt(obj.offsetLeft); pos_y += parseInt(obj.offsetTop); pos_y += click_obj.offsetHeight; if(s_width < pos_x + 160) { pos_x -= 160; pos_x += parseInt(click_obj.offsetWidth); } // 기존에 만든 달력 레이어가 있으면 재사용(좌표는 다시 계산함)하고 없으면 생성 calendar_div = document.getElementById('calendar_div'); if(!calendar_div) { calendar_div = document.createElement("DIV"); document.body.appendChild(calendar_div); } calendar_div.id = "calendar_div"; calendar_div.style.cssText = "width:180px; padding:5px; background-color:#ffffff; border:3px; border-style:double; border-color:#c2c2c2;"; calendar_div.style.position = "absolute"; calendar_div.style.top = pos_y + 'px'; calendar_div.style.left = pos_x + 'px'; calendar_div.style.visibility = "visible"; // mouseover 상태에서는 창닫기 타이머를 제거함. calendar_div.onmouseover = function(e) { if(calendar_tt) window.clearTimeout(calendar_tt); } // mouseout이 되면 창닫기 타이머를 설정함 // 설정된 시간 후에 창이 닫힘 calendar_div.onmouseout = function() { if(calendar_tt) window.clearTimeout(calendar_tt); calendar_tt = window.setTimeout("calendar_hide()", 300); } calendar_div.focus(); // 더블클릭해도 창이 닫히도록.. //calendar_div.ondblclick = calendar_close; } // 달력 레이어를 닫음 function calendar_close() { document.getElementById('calendar_div').style.visibility = "hidden"; document.getElementById('calendar_months').style.visibility = "hidden"; document.getElementById('calendar_years').style.visibility = "hidden"; if(hidden_select) show_select(); return false; } function calendar_years_change(calendar_y, calendar_m) { var calendar_years = document.getElementById('calendar_years'); var html = calendar_years_html(calendar_y, calendar_m); calendar_years.innerHTML = html; } // 년도 레이어 function calendar_years_html(calendar_y, calendar_m) { var html = ""; var margin_top = 0; var margin_left = 0; var prev_year, next_year; var year = Number(parseInt((Number(calendar_y) - 1) / 10) * 10 + 1); // 년도선택 레이어 설정 for(var i=0; i<10; i++) { margin_top = (i >= 4)? 2 : 0; margin_left = (i % 4 == 0)? 0 : 2; html += "
"+String(year+i)+"
"; } prev_year = (year - i); next_year = (year + i); html += "
이전
"; html += "
다음
"; return html; } // 달력 레이어에 달력을 출력함. function calendar_draw(set_date) { var days_arr = new Array(31,28,31,30,31,30,31,31,30,31,30,31); var html = ""; var calendar_date, calendar_t; // 달력을 입력할 input box의 숫자만 검출한 값의 자릿수가 6자리 YYYYMM 이거나 8자리 YYYYMMDD라면 해당 년월에 맞게 달력을 표시함 if(set_date && (set_date.length == 6 || set_date.length == 8)) { calendar_date = set_date; var y = calendar_date.substring(0, 4); var m = calendar_date.substring(4, 6); var s_t = new Date(y, m-1, 1); if(s_t.getMonth()+1 != Number(m)) calendar_t = null; else calendar_t = new Date(y, m-1, 1); } // 오늘 날짜를 구함. (오늘날짜는 font-weight:bold; 스타일 지정) var t = new Date(); var today = t.getFullYear(); if(t.getMonth()+1 < 10) today += '0' + String(t.getMonth()+1); else today += String(t.getMonth()+1); if(t.getDate() < 10) today += '0' + String(t.getDate()); else today += String(t.getDate()); // 달력을 입력할 input box의 값으로 기본값이 설정되지 않았다면 오늘을 기준으로 달력을 표시함 if(!calendar_t) { var y = t.getFullYear(); var m = t.getMonth(); calendar_t = new Date(y, m, 1); } // 표시할 달력의 년월 var calendar_yymm = calendar_t.getFullYear(); calendar_yymm += (calendar_t.getMonth()+1 < 10)? String('0' + (calendar_t.getMonth() + 1)) : String(calendar_t.getMonth()+1); // 표시할 달력의 연도 var calendar_y = Number(calendar_yymm.substring(0, 4)); // 표시할 달력의 월 var calendar_m = Number(calendar_yymm.substring(4, 6)); // 이전달 링크 값 (◀클릭) var prev_m; if(Number(calendar_m) == 1) { prev_m = String(calendar_y - 1); prev_m += '12'; } else { prev_m = String(calendar_y); prev_m += (calendar_m - 1 < 10)? '0' + (calendar_m - 1) : calendar_m - 1; } // 다음달 링크값 (▶클릭) var next_m; if(Number(calendar_m) == 12) { next_m = String(calendar_y + 1); next_m += '01'; } else { next_m = String(calendar_y); next_m += (calendar_m + 1 < 10)? '0' + (calendar_m + 1) : calendar_m + 1; } // 이전 다음달 값을 계산하기 위해 달력표시 월의 값을 아래에서 스트링으로 변경 calendar_m = (calendar_m < 10)? String('0' + calendar_m) : String(calendar_m); // 전년도 var prev_y = String(calendar_y-1) + calendar_m; // 후년도 var next_y = String(calendar_y+1) + calendar_m; // 년, 월, 닫기 버튼 html html += ""; html += ""; html += ""; html += ""; // 요일표시 html html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; // 달력 출력s /* // 달력 시작일의 요일을 구함 var week = calendar_t.getDay(); // 시작일이 일요일이 아니면 빈 TD 출력 for(var i=0; i 6) { html += ""; week = 0; } if(week == 0) { html += ""; } // 달력의 년월 this_date = calendar_yymm; // 표시일 this_date += (i <= 9)? String('0' + i) : String(i); style = "cursor:pointer; font-size:12px; text-align:center;"; // input box의 값과 동일한 날은 underline 표시 if(set_date == this_date) style += " text-decoration:underline;"; // 오늘날짜는 진하게 표시 if(today == this_date) style += " font-weight:bold;"; // 일요일은 빨간색 if(week == 0) style += " color:red;"; // 토요일은 파란색 if(week == 6) style += " color:blue;"; html += ""; week ++; } // 토요일로 끝나지 않았으면 빈 TD 출력 if(week < 6) { for(var i=week; i<=6; i++) { html += "\n"; } } html += ""; */ // 달력 출력e html += "
"; html += "  "; html += " "+calendar_y+" "; html += "  "; html += "  "; html += " "+calendar_m+" "; html += " "; html += "
"+i+" 
"; html += "
"; html += calendar_years_html(calendar_y, calendar_m); html += "
"; // 월선택 레이어 설정 html += "
"; html += "
1
"; html += "
2
"; html += "
3
"; html += "
4
"; html += "
5
"; html += "
6
"; html += "
7
"; html += "
8
"; html += "
9
"; html += "
10
"; html += "
11
"; html += "
12
"; html += "
"; // 달력 표시 calendar_div.innerHTML = html; // IE/Maxton일때 숨겨진 select elements 표시 if(hidden_select) show_select(); // Crome, Firefox, Safari가 아니면 달력 영역과 겹치는 select elements 숨김 if(navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Firefox') == -1 && navigator.userAgent.indexOf('Safari') == -1) { hide_select(parseInt(calendar_div.style.left), parseInt(calendar_div.style.top), parseInt(calendar_div.style.left) + parseInt(calendar_div.offsetWidth), parseInt(calendar_div.style.top) + parseInt(calendar_div.offsetHeight)); } // test 달력 출력s // test 달력 출력e // test ajax start var searchYyyyMm = calendar_yymm; var selectExRoom = document.resve.selectExRoom.value; $.ajax({ type:"POST", /*url:"",*/ url:"/cop/resve/resveResSdateListAjax.do", data:{ "searchYyyyMm": searchYyyyMm, "selectExRoom": selectExRoom }, dataType:'json', timeout:(1000*30), success:function(returnData, status){ if(status == "success") { // ajax 지연으로 여러달 표시될경우 초기화 $('#calendar_div table tbody #dayTr').remove(); var resultList = returnData.result; html = ""; // 달력 시작일의 요일을 구함 var week = calendar_t.getDay(); // 시작일이 일요일이 아니면 빈 TD 출력 for(var i=0; i"; html += " \n"; } // 해당월의 마지막 날을 가져옴. if(String(calendar_t.getMonth()+1) == '2') max_days = ((( calendar_y % 4 == 0) && (calendar_y % 100 != 0)) || (calendar_y % 400 == 0))? 29 : 28; else max_days = days_arr[calendar_t.getMonth()]; var this_date = ""; var style = ""; for(var i=1; i<=max_days; i++) { if(week > 6) { html += ""; week = 0; } if(week == 0) { html += ""; } // 달력의 년월 this_date = calendar_yymm; // 표시일 this_date += (i <= 9)? String('0' + i) : String(i); style = "font-size:12px; text-align:center;"; // input box의 값과 동일한 날은 underline 표시 if(set_date == this_date) style += " text-decoration:underline;"; // 오늘날짜는 진하게 표시 if(today == this_date) { //style += " font-weight:bold;"; } // 일요일은 빨간색 if(week == 0) style += " color:red;"; // 토요일은 파란색 if(week == 6) style += " color:blue;"; // 예약가능여부 var isPosbleDate = true; for (var j=0; j"+i+""; } else { if (isPosbleDate == true) { // 오전/오후 가능 style += " background:#ffdfb6; font-weight:bold; cursor:pointer;"; } else if (isPosbleDate == 'am') { // 오후 가능 style += " background:#b6d2ff; font-weight:bold; cursor:pointer;"; } else if (isPosbleDate == 'pm') { // 오전 가능 style += " background:#ffb6b6; font-weight:bold; cursor:pointer;"; } html += ""+i+""; // 마우스 아웃시 배경색 흰색. 배경색 사용으로 주석 /*html += ""+i+"";*/ } } else { // 전시관 if(week == 3) style += " font-weight:bold;"; // 수요일 예약 가능일(전시시작일) if(week == 3 && isPosbleDate) { style += " background:#ffdfb6; cursor:pointer;"; html += ""+i+""; } else { html += ""+i+""; } } week ++; } // 토요일로 끝나지 않았으면 빈 TD 출력 if(week < 6) { for(var i=week; i<=6; i++) { html += " \n"; } } html += ""; html += ""; html += ""; html += "예약 가능일:배경 색상"; html += ""; if (selectExRoom == "6") { // 교육장 html += ""; html += ""; html += "오전만 가능:배경 색상"; html += ""; html += ""; html += ""; html += "오후만 가능:배경 색상"; html += ""; } $(html).insertAfter($("#calendar_div table tbody").children().eq(1)) } else { alert("ERROR!");return;} }, error:function(request , status, error){ /*alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);*/ alert("달력 조회 에러"); } }); } // 선택한 날짜를 input box에 넣어줌. function calendar_set_date(set_date, isPosbleDate) { var week_arr_han = new Array("일", "월", "화", "수", "목", "금", "토"); var week_arr_eng = new Array("Sun", "Mon", "Tue", "Wed", "The", "Fri", "Sat"); // FMT 변경 (YYYY-MM-DD) if(calendar_obj) { var year = set_date.substring(0,4); var month = set_date.substring(4,6); var day = set_date.substring(6,8); var sel_date = new Date(year, month - 1, day); var week = sel_date.getDay(); var calendar_value = calendar_fmt; calendar_value = calendar_value.replace(/yyyy/i, year); calendar_value = calendar_value.replace(/mm/i, month); calendar_value = calendar_value.replace(/dd/i, day); calendar_value = calendar_value.replace(/wh/i, week_arr_han[week]); calendar_value = calendar_value.replace(/we/i, week_arr_eng[week]); calendar_obj.value = calendar_value; var selectExRoom = document.resve.selectExRoom.value; if (calendar_obj1) { var selDate = sel_date.getDate(); if (selectExRoom != "6") selDate += 6; sel_date.setDate(selDate); var tmpDate; var calendar_value1 = calendar_fmt; calendar_value1 = calendar_value1.replace(/yyyy/i, sel_date.getFullYear()); tmpDate = sel_date.getMonth()+1 < 10 ? "0"+(sel_date.getMonth()+1) : sel_date.getMonth()+1; calendar_value1 = calendar_value1.replace(/mm/i, tmpDate); tmpDate = sel_date.getDate() < 10 ? "0"+sel_date.getDate() : sel_date.getDate(); calendar_value1 = calendar_value1.replace(/dd/i, tmpDate); calendar_obj1.value = calendar_value1; } if (selectExRoom == "6") { $("input[name='exHours']").attr("checked", false); $("input[name='exHours']").attr("disabled", false); if (isPosbleDate == "am") { // 오후만 가능 $("input[name='exHours'][value='am']").attr("disabled", true); } else if (isPosbleDate == "pm") { // 오전만 가능 $("input[name='exHours'][value='pm']").attr("disabled", true); } } } calendar_close(); // input object에 날짜를 셋팅하고 추가적으로 작업해야할 경우가 있어서 // document에 calendar_set_date_after function이 있으면 실행하게 함. // calendar_set_date_after() 예제 // if(document.getElementById('sdate').value < '2009-09-14') // { // alert('9월 14일 보다 이전을 선택할 수 없습니다'); // } if(typeof calendar_set_date_after == 'function') { calendar_set_date_after(calendar_obj); } } // 달력을 숨김 function calendar_hide() { if(calendar_tt) window.clearTimeout(calendar_tt); calendar_close(); } // 300ms 후에 달력을 숨김 // mouseout때 바로 닫히지 않고 약간의 텀을 두어 다시 마우스가 갔을때 달력 레이어를 유지하기 위함 function calendar_afterHide() { if(calendar_tt) window.clearTimeout(calendar_tt); calendar_tt = window.setTimeout("calendar_hide()", 300); } // 달력 숨김 타이머를 삭제함. function calendar_clearT() { if(calendar_tt) window.clearTimeout(calendar_tt); } // 년도 클릭시 월선택 레이어를 표시/감춤 // on -> off // off -> on function calendar_years_toggle() { var calendar_div = document.getElementById('calendar_div'); var calendar_years = document.getElementById('calendar_years'); var calendar_months = document.getElementById('calendar_months'); calendar_months.style.visibility = "hidden"; // 달력의 년,월,닫기 부분은 표시되도록 상단에서 20px 내려서 표시함. var top = parseInt(calendar_div.style.top) + 20; var left = parseInt(calendar_div.style.left); // position:absolute; 이지만 달력 레이어의 상대성 절대좌표로 인식함. calendar_years.style.top = '20px'; calendar_years.style.left = '0px'; // 월선택 레이어 토글 if(calendar_years.style.visibility == "hidden") calendar_years.style.visibility = "visible"; else calendar_years.style.visibility = "hidden"; } // 월 클릭시 년도선택 레이어를 표시/감춤 // on -> off // off -> on function calendar_months_toggle() { var calendar_div = document.getElementById('calendar_div'); var calendar_months = document.getElementById('calendar_months'); var calendar_years = document.getElementById('calendar_years'); calendar_years.style.visibility = "hidden"; // 달력의 년,월,닫기 부분은 표시되도록 상단에서 20px 내려서 표시함. var top = parseInt(calendar_div.style.top) + 20; var left = parseInt(calendar_div.style.left); // position:absolute; 이지만 달력 레이어의 상대성 절대좌표로 인식함. calendar_months.style.top = '20px'; calendar_months.style.left = '0px'; // 월선택 레이어 토글 if(calendar_months.style.visibility == "hidden") calendar_months.style.visibility = "visible"; else calendar_months.style.visibility = "hidden"; } // 달력표시 호출함수 onClick="calendar(event, 'ID')"로 호출 function calendar(e, obj_name, fmt, obj_name1) { if(!e) var e = window.event; calendar_obj = document.getElementById(obj_name); // 시작일 if (obj_name1) calendar_obj1 = document.getElementById(obj_name1); // 종료일 // input object의 값에서 숫자만 추출함. var default_date = calendar_obj.value.replace(/[^0-9]/g, ''); // YYYYMM 혹은 YYYYMMDD 형식이 아니면 무시함. if(default_date.length != 6 && default_date.length != 8) default_date = ''; // onClick="calendar(event, 'ID')"의 ID Object가 없으면 달력을 표시해도 넣을곳이 없으므로 오류처리 if(!calendar_obj) { alert(obj_name + ' object undefined'); return; } if(fmt) calendar_fmt = fmt; else calendar_fmt = "YYYY-MM-DD"; // 달력 레이어 초기화 calendar_set(e); // 달력 표시 calendar_draw(default_date); } //]]>