<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Calendar</title>
<script language="javascript">
<!--
//UCCalendar Class 선언
//pdivid:달력을 입력할 div의 id
var UCCalendar=function(pdivid){
this.m_cal_header = "<table style=\"border-spacing:0;border-collapse:collapse;\"><tr align=\"center\">";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">일</td>";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">월</td>";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">화</td>";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">수</td>";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">목</td>";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">금</td>";
this.m_cal_header += "<td style="\"text-align:center;width:25px;height:25px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">토</td>";
this.m_cal_header += "</tr>";
this.m_cal_bottom = "</table>";
this.m_week_header = "<tr>";
this.m_week_bottom = "</tr>";
this.m_normal_html = "<td style="\"text-align:center;width:25px;height:25px;color:#000000;font-size:12px;background-color:#FFFFFF;border:solid" 1px 1px 1px 1px #A0A0A0;\">{{DAY}} {{CONTENT}}</td>"
this.m_saturday_html= "<td style="\"text-align:center;width:25px;height:25px;color:#0000FF;font-size:12px;background-color:#FFFFFF;border:solid" 1px 1px 1px 1px #A0A0A0;\">{{DAY}} {{CONTENT}}</td>"
this.m_sunday_html = "<td style="\"text-align:center;width:25px;height:25px;color:#FF0000;font-size:12px;background-color:#FFFFFF;border:solid" 1px 1px 1px 1px #A0A0A0;\">{{DAY}} {{CONTENT}}</td>"
this.m_curday_html = "<td style="\"text-align:center;width:25px;height:25px;color:#008000;font-size:12px;background-color:#FFFFFF;border:solid" 1px 1px 1px 1px #A0A0A0;font-weight:bold;\">{{DAY}} {{CONTENT}}</td>"
this.m_blank_html = "<td style="\"text-align:center;width:25px;height:25px;color:#000000;font-size:12px;background-color:#FFFFFF;border:solid" 1px 1px 1px 1px #A0A0A0;\"> </td>"
this.m_holiday_html = "<td style="\"text-align:center;width:25px;height:25px;color:#FF0000;font-size:12px;background-color:#FFFFFF;border:solid" 1px 1px 1px 1px #A0A0A0;\">{{DAY}} {{CONTENT}}</td>"
this.m_arHolidays=[
[1,3,4,5,6,8 ,10,12],
[1,1,5,5,6,15,3 ,25],
["신정","3.1절","식목일","어린이날","현충일","광복절","개천절","성탄절"]
];
this.m_IsViewHoliday = false
this.m_cur_date = new Date();
if (pdivid){
this.m_divid=pdivid;
}else{
this.m_divid="";
}
this.m_ClickFunc="";
this.m_useClickFunc=false;
this.SetArray();
}
UCCalendar.prototype.SetArray=function(){
var temp_date= new Date();
temp_date.setYear(this.m_cur_date.getYear());
temp_date.setMonth(this.m_cur_date.getMonth());
temp_date.setDate(1);
this.m_start_num=temp_date.getDay();
this.m_days_cnt=this.GetLastDay(temp_date.getYear(),temp_date.getMonth()+1);
this.m_week_cnt = 5
if (this.m_start_num==1||this.m_start_num==2||this.m_start_num==3||this.m_start_num==4||this.m_start_num==7){
this.m_week_cnt=5
}else if(this.m_start_num==5){
if (this.m_days_cnt>30){
this.m_week_cnt=6
}else{
this.m_week_cnt=5
}
}else if(this.m_start_num==6){
if (this.m_days_cnt>29){
this.m_week_cnt=6
}else{
this.m_week_cnt=5
}
}
if (this.m_start_num==0&&this.m_days_cnt==28){
this.m_week_cnt=4
}
this.m_arCal=new Array(this.m_week_cnt);
for (var idx=0;idx<this.m_week_cnt;idx++){
this.m_arCal[idx]=new Array(7);
}
this.m_arData=new Array(this.m_week_cnt);
for (var idxd=0;idxd<this.m_week_cnt;idxd++){
this.m_arData[idxd]=new Array(7);
}
for (var idxA=0;idxA<this.m_week_cnt;idxA++){
for (var idxB=0;idxB<8;idxB++){
this.m_arData[idxA][idxB]="";
}
}
}
UCCalendar.prototype.GetLastDay=function(yr, mnth){
var temp,leap,noDays
temp = yr % 4;
if(temp==0){
leap = 1;
}else{
leap = 0;
}
noDays=0
if (mnth==1||mnth==3||mnth==5||mnth==7||mnth==8||mnth==10||mnth==12){
noDays = 31
}else{
if(mnth==2){
noDays = 28 + leap;
}else{
noDays = 30;
}
}
return noDays;
}
UCCalendar.prototype.SetDataDay=function(pDate, pVal){
var retval, strHtml,day_order,cur_row,cur_col;
retval = true;
day_order = this.m_start_num + pDate.getDate();
cur_row = (day_order-1)/ 7
cur_row=Math.floor(cur_row)
if (((day_order-1)%7)==0){
cur_row--;
}
cur_col = pDate.getDay()
this.m_arData[cur_row][cur_col]+="<br />"+pVal
return retval;
}
UCCalendar.prototype.DrawCalendar=function(pdiv){
/*------------------------------------------
치환문자
{{CURYEAR}} : 년도
{{CURMONTH}} : 월
{{CURDAY}} : 일
//------------------------------------------*/
this.InitArray();
var strHtml="";
strHtml=this.m_cal_header;
for(var i=0;i<this.m_arCal.length;i++){
strHtml+=this.m_week_header;
for(var j=0;j<this.m_arCal[i].length;j++){
strHtml+=this.m_arCal[i][j];
}
strHtml+=this.m_week_bottom;
}
strHtml+=this.m_cal_bottom;
strHtml=strHtml.replace(/\{\{CURYEAR\}\}/g, this.m_cur_date.getYear())
strHtml=strHtml.replace(/\{\{CURMONTH\}\}/g, this.m_cur_date.getMonth()+1)
strHtml=strHtml.replace(/\{\{CURDAY\}\}/g, this.m_cur_date.getDate())
document.getElementById(this.m_divid).innerHTML=strHtml;
}
UCCalendar.prototype.InitArray=function(){
var i,iday,k,j
//첫째줄 첫칸부터 1일 전까지 빈칸
for(var i=0;i<this.m_start_num;i++){
this.m_arCal[0][i] = this.SetHtml("", " ")
}
//첫째줄 1일부터 토요일까지
iday = 1
for(var i=this.m_start_num;i<7;i++){
temp_date = new Date(this.m_cur_date.getYear(),this.m_cur_date.getMonth(),iday)
this.m_arCal[0][i]=this.SetHtml(temp_date, this.m_arData[0][i])
iday++;
}
//둘째줄 월요일부터 그달 마지막 날까지
for(var k=1;k<this.m_week_cnt;k++){
j=0
while(j<7 && iday<=this.m_days_cnt){
temp_date = new Date(this.m_cur_date.getYear(),this.m_cur_date.getMonth(),iday)
this.m_arCal[k][j]=this.SetHtml(temp_date, this.m_arData[k][j])
j++
iday++;
}
if(iday>this.m_days_cnt){
break;
}
}
//그 달 마지막날 다음날부터 그 줄 끝까지 빈칸
for(k=k;k<this.m_week_cnt;k++){
j = j
while(j<7){
this.m_arCal[k][j]=this.SetHtml("", " ")
j++;
}
}
}
UCCalendar.prototype.SetHtml=function(pDate, pVal){
var retval,hcnt,cur_html
retval="";
var str_day
if(pDate!=""){
str_day=pDate.getDate();
}else{
str_day="";
}
var IsHoliday, strHoliNm
IsHoliday=false;
strHoliNm="";
if(pDate!=""){
for(hcnt=0;hcnt<this.m_arHolidays[0].length;hcnt++){
tempDate=new Date(pDate.getYear(),this.m_arHolidays[0][hcnt]-1,this.m_arHolidays[1][hcnt]);
if((pDate-tempDate)==0){
IsHoliday=true;
strHoliNm=this.m_arHolidays[2][hcnt];
}
}
}
if(pDate!=""){
var tempDate = new Date();
var curDate = new Date(tempDate.getYear(),tempDate.getMonth(),tempDate.getDate())
if((pDate-curDate)==0){
cur_html=this.m_curday_html;
}else if(IsHoliday && this.m_IsViewHoliday){
cur_html=this.m_holiday_html;
pVal = strHoliNm + " " + pVal;
}else{
var curWday = pDate.getDay();
if (curWday==0){
cur_html=this.m_sunday_html;
}else if(curWday==1||curWday==2||curWday==3||curWday==4||curWday==5){
cur_html=this.m_normal_html
}else if (curWday==6){
cur_html=this.m_saturday_html
}
}
if (this.m_useClickFunc){
retval = cur_html.replace("{{DAY}}","<span onclick=\""+this.m_ClickFunc+"("+this.m_cur_date.getYear()+","+this.m_cur_date.getMonth()+","+str_day+")\" style=\"cursor:pointer;\">"+str_day+"</span>");
}else{
retval = cur_html.replace("{{DAY}}", str_day);
}
}else{
retval = this.m_blank_html.replace("{{DAY}}", "")
}
retval = retval.replace(/\{\{CONTENT\}\}/g, pVal)
return retval;
}
UCCalendar.prototype.ChangeMonth=function(pType, pVal){
switch (pType){
case "N" :
this.m_cur_date.setMonth(this.m_cur_date.getMonth()+1);
this.SetArray();
this.DrawCalendar();
break;
case "P" :
this.m_cur_date.setMonth(this.m_cur_date.getMonth()-1);
this.SetArray();
this.DrawCalendar();
break;
case "G" :
this.m_cur_date.setMonth(this.m_cur_date.getMonth()+pVal);
this.SetArray();
this.DrawCalendar();
break;
default :
this.m_cur_date.setMonth(this.m_cur_date.getMonth()+1);
this.SetArray();
this.DrawCalendar();
break;
}
}
UCCalendar.prototype.GoYearMonth=function(pYear, pMonth){
var tempDate = new Date();
/*
if (pYear.match(/^[0-9]{1,}$/)==null){
pYear=tempDate.getYear();
}
if (pMonth.match(/^[0-9]{1,}$/)==null){
pYear=tempDate.getMonth();
}
*/
this.m_cur_date.setYear(pYear);
this.m_cur_date.setMonth(parseInt(pMonth)-1);
this.SetArray();
this.DrawCalendar();
}
UCCalendar.prototype.ClickDay=function(pDay){
this.m_ClickFunc(pDay)
}
UCCalendar.prototype.GetDateType=function(pYear,pMonth,pDay){
var tempDate = new Date(pYear,pMonth+1,pDay+1)
return tempDate;
}
UCCalendar.prototype.GetToDay=function(){
var tempDate = new Date()
this.GoYearMonth(tempDate.getYear(),tempDate.getMonth()+1);
}
var cal = new UCCalendar("UCal");
window.onload=function(){
var tempDate = new Date();
var oyear=document.getElementById("selyear");
var idx=0
var selectidx;
for(var i=2000;i< 2015;i++){
ooption = new Option(i, i);
oyear.options[idx]=ooption;
if (i==tempDate.getYear()){
selectidx=idx;
}
idx++;
}
oyear.selectedIndex=selectidx;
var omonth=document.getElementById("selmonth");
var selectidxm;
for(var j=0;j< 12;j++){
ooption = new Option(j+1, j+1);
omonth.options[j]=ooption;
if (j==tempDate.getMonth()){
selectidxm=j;
}
}
omonth.selectedIndex=selectidxm;
/*
cal.m_cal_header = "<table style=\"border-spacing:0;border-collapse:collapse;\"><tr align=\"center\">";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">일</td>";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">월</td>";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">화</td>";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">수</td>";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">목</td>";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">금</td>";
cal.m_cal_header += "<td style="\"text-align:center;width:100px;height:30px;font-size:12px;background-color:#F9F9F9;border:solid" 1px 1px 1px 1px #A0A0A0;\">토</td>";
cal.m_cal_header += "</tr>";
cal.m_cal_bottom = "</table>";
cal.m_week_header = "<tr>";
cal.m_week_bottom = "</tr>";
cal.m_normal_html = "<td style="\"padding:5px" 0 0 5px;vertical-align:top;width:100px;height:100px;font-size:12px;background-color:#FFFFFF;border:solid 1px 1px 1px 1px #A0A0A0;\"><font size=\"2px\" color=\"#000000\">{{DAY}}</font> {{CONTENT}}</td>"
cal.m_saturday_html = "<td style="\"padding:5px" 0 0 5px;vertical-align:top;width:100px;height:100px;font-size:12px;background-color:#FFFFFF;border:solid 1px 1px 1px 1px #A0A0A0;\"><font size=\"2px\" color=\"#0000FF\">{{DAY}}</font> {{CONTENT}}</td>"
cal.m_sunday_html = "<td style="\"padding:5px" 0 0 5px;vertical-align:top;width:100px;height:100px;font-size:12px;background-color:#FFFFFF;border:solid 1px 1px 1px 1px #A0A0A0;\"><font size=\"2px\" color=\"#FF0000\">{{DAY}}</font> {{CONTENT}}</td>"
cal.m_curday_html = "<td style="\"padding:5px" 0 0 5px;vertical-align:top;width:100px;height:100px;font-size:12px;background-color:#FFFFFF;border:solid 1px 1px 1px 1px #A0A0A0;\"><font size=\"2px\" color=\"#008000\"><b>{{DAY}}</b></font> {{CONTENT}}</td>"
cal.m_blank_html = "<td style="\"padding:5px" 0 0 5px;vertical-align:top;width:100px;height:100px;font-size:12px;background-color:#FFFFFF;border:solid 1px 1px 1px 1px #A0A0A0;\"> </td>"
cal.m_holiday_html = "<td style="\"padding:5px" 0 0 5px;vertical-align:top;width:100px;height:100px;font-size:12px;background-color:#FFFFFF;border:solid 1px 1px 1px 1px #A0A0A0;\"><font size=\"2px\"color=\"#FF0000\">{{DAY}}</font> {{CONTENT}}</td>"
*/
cal.m_cal_header="{{CURYEAR}}-{{CURMONTH}}"+cal.m_cal_header;
cal.SetDataDay(cal.m_cur_date, "내용1");
cal.SetDataDay(cal.GetDateType(2009,7,4), "내용2");
cal.m_IsViewHoliday=true;
cal.m_useClickFunc=true;
cal.m_ClickFunc="ClickDay";
cal.DrawCalendar();
}
function ClickDay(pY,pM,pD){
alert(pY+"-"+pM+"-"+pD);
}
function GoYearMonth(){
var goMonth=document.getElementById("selmonth").value;
cal.GoYearMonth(parseInt(document.getElementById("selyear").value),parseInt(goMonth));
}
//-->
</script>
</head>
<body>
<input type="button" value="이전달" onclick="cal.ChangeMonth('P');" />
<select id="selyear" onchange="GoYearMonth();"></select>
<select id="selmonth" onchange="GoYearMonth();"></select>
<input type="button" value="오늘로" onclick="cal.GetToDay();" />
<input type="button" value="다음달" onclick="cal.ChangeMonth('N');" />
<div id="UCal"></div>
</body>
</html>