아래는 본 스크립트의 소스입니다.
<!-- Javascript Calendar by SWLee, http://swlee99.tistory.com, sunmind99 @ hotmail . com//-->
<SCRIPT LANGUAGE="JavaScript">
// 달력의 프레임
document.write("<DIV ID='SimpleCalendar' STYLE='position:absolute; z-index:90'></DIV>");
document.write("<DIV ID='ToolTip' STYLE='position:absolute; z-index:99'></DIV>");
// 해당 일의 요일을 구하는 함수, 1년 1월 1일부터 계산
var MonthsDay = new Array(0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var WeekDays = new Array("일", "월", "화", "수", "목", "금", "토");
var IsCalendarVisible = 0;
// 툴팁 설명 관련 함수
function ShowToolTip(option)
{
document.all.ToolTip.style.left = event.clientX;
document.all.ToolTip.style.top = event.clientY + 15;
document.all.ToolTip.style.visibility = 'visible';
ToolTipHTML = "<TABLE BGCOLOR='#ffffff' BORDER=1 CELLPSPACING=0 CELLPADDING=2 BORDERCOLOR='#000000'><TR>";
ToolTipHTML += "<TD BGCOLOR='#ff0000' STYLE='border:0'>";
ToolTipHTML += "<FONT FACE='돋움' SIZE='2' COLOR='#ffffff'><B>";
if(option == 1)
{
ToolTipHTML += "전년도로";
}
if(option == 2)
{
ToolTipHTML += "전달로";
}
if(option == 3)
{
ToolTipHTML += "다음달로";
}
if(option == 4)
{
ToolTipHTML += "다음해로";
}
ToolTipHTML += "</FONT></B></TD></TR>";
document.all.ToolTip.innerHTML = ToolTipHTML;
}
// 툴팁 관련 이동 함수
function MoveToolTip(option)
{
document.all.ToolTip.style.left = event.clientX;
document.all.ToolTip.style.top = event.clientY + 15;
}
// 툴팁 숨김 함수
function HideToolTip(option)
{
document.all.ToolTip.style.visibility = 'hidden';
}
function GetWeekday(Year, Month, Day)
{
var TotalDays = Year * 365; // 0년 1월 1일부터의 총일수
var LeafYears = Year / 4; // 윤년횟수
var CurrentYearDays = eval(Day); // 올해에서 지난 날짜
for(i = 0; i < Month; i++)
{
CurrentYearDays += MonthsDay[i];
}
if(LeafYears < eval(LeafYears.toFixed(0)))
{
LeafYears = LeafYears - 1;
}
TotalDays = TotalDays + CurrentYearDays + eval(LeafYears.toFixed(0));
// 0년 1월 1일이 토요일이므로 6을 더함
var RemainDays = (TotalDays + 6) % 7;
return RemainDays;
}
function SetObjectDate(InputObject, Year, Month, Day)
{
InputObject.value = Year + "-" + Month + "-" + Day;
}
function SetDayColor(Object)
{
Object.style.backgroundColor = '#aaffaa';
}
function RemoveDayColor(Object)
{
Object.style.backgroundColor = '';
}
function InnerOpenCalendar(InputObject, Year, Month, Day, VisibleChange)
{
var DayIndex = 1;
var i = 0;
var CalendarYear = 0;
var TempYear = 0;
var TempMonth = 0;
if(!SimpleCalendar.style.pixelTop)
{
SimpleCalendar.style.pixelTop = event.clientY + 15;
SimpleCalendar.style.pixelLeft = event.clientX - 100;
}
if((IsCalendarVisible == 0) && (VisibleChange == 1))
{
document.all.SimpleCalendar.style.visibility = "visible";
IsCalendarVisible = 1;
}
else
{
if(VisibleChange == 1)
{
document.all.SimpleCalendar.style.visibility = "hidden";
IsCalendarVisible = 0;
}
}
CalendarHTML = "<TABLE STYLE='border-style:single' BORDER='1' BGCOLOR='#ffffff' CELLPADDING='1' CELLSPACING='0' BORDERCOLOR='#000000' WIDTH='220'>";
CalendarHTML += "<TR>";
CalendarHTML += "<TD BGCOLOR='#ccccff' COLSPAN=7>";
// 바로 전년도로 가는 버튼 출력
TempYear = eval(Year) - 1;
CalendarHTML += "<A STYLE='cursor:hand' ONMOUSEOVER='JavaScript:ShowToolTip(1)' ONMOUSEMOVE='JavaScript:MoveToolTip()' ONMOUSEOUT='JavaScript:HideToolTip()' ";
CalendarHTML += "ONCLICK='JavaScript:InnerOpenCalendar(document.all." + InputObject.name + ", " + TempYear + ", " + Month + ", " + Day + ", 0)'>";
CalendarHTML += "<FONT SIZE='2' FACE='돋움' COLOR='#7777ff'>◀◀</FONT></A> ";
// 바로 앞달로 가는 버튼 출력
TempMonth = eval(Month) - 1;
if(TempMonth == 0)
{
TempYear = eval(Year) - 1;
TempMonth = 12;
}
else
{
TempYear = eval(Year);
}
CalendarHTML += "<A STYLE='cursor:hand' ONMOUSEOVER='JavaScript:ShowToolTip(2)' ONMOUSEMOVE='JavaScript:MoveToolTip()' ONMOUSEOUT='JavaScript:HideToolTip()' ";
CalendarHTML += "ONCLICK='JavaScript:InnerOpenCalendar(document.all." + InputObject.name + ", " + TempYear + ", " + TempMonth + ", " + Day + ", 0)'>";
CalendarHTML += "<FONT SIZE='2' FACE='돋움' COLOR='#7777ff'>◀</FONT></A>";
// 연도 선택 출력
CalendarHTML += "<SELECT NAME='CalendarYear' ";
CalendarHTML += "ONCHANGE='JavaScript:InnerOpenCalendar(document.all." + InputObject.name + ", this.value, " + Month + ", " + Day + ", 0)'>";
for(i = -10; i <= 10; i++)
{
CalendarYear = eval(Year) + i;
if(CalendarYear == eval(Year))
{
CalendarHTML += "<OPTION VALUE='" + eval(Year) + eval(i) + "' SELECTED> " + CalendarYear + "</OPTION>";
}
else
{
CalendarHTML += "<OPTION VALUE='" + eval(Year) + eval(i) + "'>";
CalendarHTML += CalendarYear + "</OPTION>";
}
}
CalendarHTML += "</SELECT><FONT SIZE='2'><B>년 </B></FONT>";
// 연도 선택 출력 끝
// 달 출력
CalendarHTML += "<SELECT NAME='CalendarMonth' ";
CalendarHTML += "ONCHANGE='JavaScript:InnerOpenCalendar(document.all." + InputObject.name + ", " + Year + ", this.value, " + Day + ", 0)'>";
for(i = 1; i <= 12; i++)
{
if(i == eval(Month))
{
CalendarHTML += "<OPTION VALUE='" + i + "' SELECTED> " + i + "</OPTION>";
}
else
{
CalendarHTML += "<OPTION VALUE='" + i + "'> " + i + "</OPTION>";
}
}
CalendarHTML += "</SELECT><FONT SIZE='2'><B>월</B></FONT>";
// 달 출력 끝
// 바로 다음달로 가는 버튼 출력
TempMonth = eval(Month) + 1;
if(TempMonth == 13)
{
TempYear = eval(Year) + 1;
TempMonth = 1;
}
else
{
TempYear = eval(Year);
}
CalendarHTML += "<A STYLE='cursor:hand' ONMOUSEOVER='JavaScript:ShowToolTip(3)' ONMOUSEMOVE='JavaScript:MoveToolTip()' ONMOUSEOUT='JavaScript:HideToolTip()' ";
CalendarHTML += "ONCLICK='JavaScript:InnerOpenCalendar(document.all." + InputObject.name + ", " + TempYear + ", " + TempMonth + ", " + Day + ", 0)'>";
CalendarHTML += "<FONT SIZE='2' FACE='돋움' COLOR='#7777ff'>▶</FONT></A> ";
// 바로 다음년도로 가는 버튼 출력
TempYear = eval(Year) + 1;
CalendarHTML += "<A STYLE='cursor:hand' ONMOUSEOVER='JavaScript:ShowToolTip(4)' ONMOUSEMOVE='JavaScript:MoveToolTip()' ONMOUSEOUT='JavaScript:HideToolTip()' ";
CalendarHTML += "ONCLICK='JavaScript:InnerOpenCalendar(document.all." + InputObject.name + ", " + TempYear + ", " + Month + ", " + Day + ", 0)'>";
CalendarHTML += "<FONT SIZE='2' FACE='돋움' COLOR='#7777ff'>▶▶</FONT></A> ";
CalendarHTML += "</TD></TR>";
// HTML 요일 출력
for(i = 0; i < 7; i++)
{
CalendarHTML += "<TD BGCOLOR='2222ff' STYLE='border:0' ALIGN='center'><FONT SIZE='2' FACE='돋움' COLOR='#ffffff'><B>" + WeekDays[i] + "</B></TD>";
}
// 시작일의 요일을 구하고.. (토요일은 7요일이 됨)
// 1:일요일 2:월요일 ... 7:토요일
var StartWeekday = GetWeekday(Year, Month, '1');
if(StartWeekday == 0)
{
StartWeekday = 7;
}
// 그 일수만큼 빈 태그 삽입
CalendarHTML += "<TR>";
for(i = 1; i < StartWeekday; i++)
{
CalendarHTML += "<TD></TD>";
DayIndex = DayIndex + 1;
}
// 이제 해당 월의 날짜 출력..
for(i = 1; i <= MonthsDay[Month]; i++)
{
CalendarHTML += "<TD STYLE='cursor:hand' STYLE='border:0' ALIGN='center' ";
CalendarHTML += "ONCLICK='JavaScript:SetObjectDate(document.all." + InputObject.name + ", " + Year + ", " + Month + ", " + i + ")' ";
CalendarHTML += " ONMOUSEOVER='JavaScript:SetDayColor(this, i)' ONMOUSEOUT='JavaScript:RemoveDayColor(this, i)'>";
CalendarHTML += "<FONT ID=' " + i + "font' SIZE='2' FACE='돋움'>" + i + "</FONT></TD>";
if((DayIndex % 7) == 0)
{
CalendarHTML += "</TR>";
CalendarHTML += "<TR>";
}
DayIndex = DayIndex + 1;
}
CalendarHTML += "</TR>";
CalendarHTML += "</TABLE>";
document.all.SimpleCalendar.innerHTML = CalendarHTML;
}
function OpenCalendar(InputObject, Year, Month, Day)
{
var TodayDate = new Date();
if(Year == 0)
{
Year = TodayDate.getYear();
}
if(Month == 0)
{
Month = TodayDate.getMonth() + 1;
}
if(Day == 0)
{
Day = TodayDate.getDate();
}
InnerOpenCalendar(InputObject, Year, Month, Day, 1);
}
</SCRIPT>
<BODY>
<INPUT NAME="InputDate" TYPE="text" />
<A ONCLICK="OpenCalendar(InputDate, 2007, 12, 14)" STYLE="cursor:hand">달력 보기</A>
</BODY>
</HTML>
|
