본문 바로가기
Programming/JavaScript,jQuery

[javascript] miniCalendar JavaScript Version.

Jeff 2010. 4. 8. 20:31

var target;
var tarForm;
function Mcal(tar,frm) {
 var obj = document.getElementById("minical");
 if ( obj ) {
  return;
 }
 var newDiv = document.createElement("<div id='minical' oncontextmenu='return false' ondragstart='return false' onselectstart='return false'></div>");
 document.body.appendChild(newDiv);

 var obj = getBounds(document.getElementById(tar));
 
 newDiv.style.left = obj.left;
 newDiv.style.top = obj.top + 7;

 target = tar;
 tarForm = frm;
// x = (document.layers) ? loc.pageX : event.clientX;
// y = (document.layers) ? loc.pageY : event.clientY;
// minical.style.pixelTop = y-0;
// minical.style.pixelLeft = x-50;
// minical.style.display = (minical.style.display == "block") ? "none" : "block";
 Show_cal0(0,0,0);
}

var stime;
function doOver() {
 var el = window.event.srcElement;
 cal_Day = el.title;

 if (cal_Day.length > 7) {
  el.style.borderTopColor = el.style.borderLeftColor = "buttonhighlight";
  el.style.borderRightColor = el.style.borderBottomColor = "buttonshadow";
 }
 window.clearTimeout(stime);
}

function doClick() {
 cal_Day = window.event.srcElement.title;
 window.event.srcElement.style.borderColor = "red";
 if ( window.event.srcElement.style.backgroundColor == "" ) {
  window.event.srcElement.style.backgroundColor = "#bdd8e9"
 } else if ( window.event.srcElement.style.backgroundColor == "#bdd8e9" ) {
  window.event.srcElement.style.backgroundColor = "";
 }
 if (cal_Day.length > 7) {
  var vYear = cal_Day.substring(0,4);
  var tmp = cal_Day.substring(cal_Day.indexOf("-")+1);
  var vMon = tmp.substring(0, tmp.indexOf("-"));
  var vDay = tmp.substring(tmp.indexOf("-")+1);
 
  //alert('year : '+vYear);
  //alert('month : '+vMon);
  //alert('date : '+vDay);
 
  vMon = (vMon < 10)? '0'+vMon:''+vMon;
  vDay = (vDay < 10)? '0'+vDay:''+vDay;
  //eval("document." + tarForm.name + "." + target).value = vYear + '-'+vMon + '-' + vDay;
  //document.body.removeChild(document.getElementById('minical'));
 }
}

function doOut() {
 var el = window.event.fromElement;
 cal_Day = el.title;

 if (cal_Day.length > 7) {
  el.style.borderColor = "white";
 }
 //stime = window.setTimeout("minical.style.display='none';", 200);
 //stime = window.setTimeout("document.body.removeChild(document.getElementById('minical'));", 200);
}


function Show_cal0(sYear,sMonth,sDay) {
 var datToday = new Date();
 var Cal_HTML = "";

 intThisYear  = sYear; //년 넘겨받기
 intThisMonth = sMonth; //월 넘겨받기
 intThisDay  = sDay;
 if ( intThisYear == 0 ) { //만약 년도와 월값을 넘겨받지 않았다면 현재 년도를 년도 변수에
  intThisYear = datToday.getYear();
 }
 if ( intThisMonth == 0 ) { //현재 월을 월 변수에
  intThisMonth = datToday.getMonth()+1;
 }
 if ( intThisDay == 0 ) {  //오늘 날짜
  intThisDay = datToday.getDate();
 }

 if ( intThisMonth == 1 ) {
  intPrevYear = intThisYear-1;
  intPrevMonth = 12;
  intNextYear = intThisYear;
  intNextMonth = 2;
 } else if ( intThisMonth == 12 ) {
  intPrevYear = intThisYear;
  intPrevMonth = 11;
  intNextYear = intThisYear + 1;
  intNextMonth = 1;
 } else {
  intPrevYear = intThisYear;
  intPrevMonth = intThisMonth - 1;
  intNextYear = intThisYear;
  intNextMonth = intThisMonth + 1;
 }

 var NowThisYear = datToday.getYear();  //현재 연도값
 var NowThisMonth = datToday.getMonth()+1; //현재 월값
 var NowThisDay = datToday.getDate();  //오늘 날짜 값

 var datFirstDay = new Date(intThisYear, intThisMonth-1, 1); //넘겨받은 날짜의 월초기값 파악
 var intFirstWeekday = datFirstDay.getDay()+1;
 var intThirdWeekDay = intFirstWeekday;

 intPrintDay = 1; //출력 초기일 값은 1부터
 thirdPrintDay = 1;

 Stop_Flag = 0;

 if ( intThisMonth == 4 || intThisMonth == 6 || intThisMonth == 9 || intThisMonth == 11 ) { //월말 값 계산
  intLastDay = 30;
 } else if ( intThisMonth == 2 && intThisYear % 4 != 0 ) {
  intLastDay = 28;
 } else if ( intThisMonth == 2 && intThisYear % 4 == 0 ) {
  if ( intThisYear % 100 == 0 ) {
   if ( intThisYear % 400 == 0 ) {
    intLastDay = 29;
   } else {
    intLastDay = 28;
   }
  } else {
   intLastDay = 29;
  }
 } else {
  intLastDay = 31;
 }

 if ( intPrevMonth == 4 || intPrevMonth == 6 || intPrevMonth == 9 || intPrevMonth == 11 ) { //월말 값 계산
  intPrevLastDay = 30;
 } else if ( intPrevMonth == 2 && intPrevYear % 4 != 0 ) {
  intPrevLastDay = 28;
 } else if ( intPrevMonth == 2 && intPrevYear % 4 != 0 ) {
  if ( intPrevYear % 100 == 0 ) {
   if ( intPrevYear % 400 == 0 ) {
    intPrevLastDay = 29;
   } else {
    intPrevLastDay = 28;
   }
  } else {
   intPrevLastDay = 29;
  }
 } else {
  intPrevLastDay = 31;
 }

 Stop_Flag = 0;
 Cal_HTML = Cal_HTML + "<table border=0 cellpadding=1 cellspacing=1 class='Calendar'>";
 Cal_HTML = Cal_HTML + "<tr align=center>";
 Cal_HTML = Cal_HTML + "<td></td>";
 Cal_HTML = Cal_HTML + "<td colspan=5><font color=red><b>";
 Cal_HTML = Cal_HTML + intThisYear + "년 " + intThisMonth + "월";
 Cal_HTML = Cal_HTML + "</font></b></td>";
 Cal_HTML = Cal_HTML + "<td></td>";
 Cal_HTML = Cal_HTML + "</tr>";
 Cal_HTML = Cal_HTML + "<tr align=center bgcolor=navy style='color: #ffffff; font-weight: bold'>";
 Cal_HTML = Cal_HTML + "<td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>";
 Cal_HTML = Cal_HTML + "</tr>";
 for ( var intLoopWeek=1 ; intLoopWeek <= 6 ; intLoopWeek++ ) { //주단위 루프 시작, 최대 6주
  Cal_HTML = Cal_HTML + "<tr align=right valign=top bgcolor=white >";
  for ( var intLoopDay=1 ; intLoopDay <= 7 ; intLoopDay++ ) { //요일단위 루프 시작, 일요일부터
   if ( intThirdWeekDay > 1 ) { //첫주시작일이 1보다 크면
    Cal_HTML = Cal_HTML + "<td>&nbsp;</td>";
    intThirdWeekDay--;
   } else {
    if ( thirdPrintDay > intLastDay ) { //입력날짜가 월말보다 크다면
     Cal_HTML = Cal_HTML + "<td>&nbsp;</td>";
    } else { //입력날짜가 현재월에 해당되면
     Cal_HTML = Cal_HTML + "<td title='" + intThisYear + "-" + intThisMonth + "-" + thirdPrintDay + "' style='cursor: hand;border: 1px solid white;width:18; height:18;";

     //오늘 날짜이면은 글씨폰트를 다르게
     if ( intThisYear-NowThisYear == 0 && intThisMonth-NowThisMonth == 0 && thirdPrintDay-intThisDay == 0 ) {
      Cal_HTML = Cal_HTML + "background-color:cyan;";
     }

     if ( intLoopDay == 1 ) { //일요일이면 빨간 색으로
      Cal_HTML = Cal_HTML + "color:red;";
     } else { //그외의 경우
      Cal_HTML = Cal_HTML + "color:black;";
     }
     Cal_HTML = Cal_HTML + "' onmouseover='doOver()' onmouseout='doOut()' onclick='doClick()'>" + thirdPrintDay;
    }
    thirdPrintDay = thirdPrintDay + 1; //날짜값을 1 증가
    if ( thirdPrintDay > intLastDay ) {  //만약 날짜값이 월말값보다 크면 루프문 탈출
     Stop_Flag = 1;
    }
   }
   Cal_HTML = Cal_HTML + "</td>"
  }
  Cal_HTML = Cal_HTML + "</tr>"
  if ( Stop_Flag == 1 ) {
   break;
  }
 }
 Cal_HTML = Cal_HTML + "</table>"
 Cal_HTML = Cal_HTML + ""
 Cal_HTML = Cal_HTML + ""

 return Cal_HTML;
}

=====
한가지 언어로 쓰는 것이 좋을 거 같아서 기존 VBScript 버전을 JavaScript 버전으로 바꾼 것이다.
소스는 조금만 들여다보면 어떻게 사용하는지 알 수 있을 것이다.

'Programming/JavaScript,jQuery' Related Articles

티스토리툴바