팝업 카렌다 2 (다양한 템플릿 구성) > script

팝업 카렌다 2 (다양한 템플릿 구성)

페이지 정보

작성자 서방님 댓글 0건 조회 77회 작성일 07-08-11 20:24

본문

<html>
<head>
<title>http://www.blueb.co.kr</title>

<SCRIPT LANGUAGE="JavaScript" src="http://www.blueb.co.kr/SRC/javascript/js/calendar_popup.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">document.write(getCalendarStyles());</SCRIPT>
<STYLE>
    .TESTcpYearNavigation,
    .TESTcpMonthNavigation
            {
            background-color:#6677DD;
            text-align:center;
            vertical-align:center;
            text-decoration:none;
            color:#FFFFFF;
            font-weight:bold;
            }
    .TESTcpDayColumnHeader,
    .TESTcpYearNavigation,
    .TESTcpMonthNavigation,
    .TESTcpCurrentMonthDate,
    .TESTcpCurrentMonthDateDisabled,
    .TESTcpOtherMonthDate,
    .TESTcpOtherMonthDateDisabled,
    .TESTcpCurrentDate,
    .TESTcpCurrentDateDisabled,
    .TESTcpTodayText,
    .TESTcpTodayTextDisabled,
    .TESTcpText
            {
            font-family:arial;
            font-size:8pt;
            }
    TD.TESTcpDayColumnHeader
            {
            text-align:right;
            border:solid thin #6677DD;
            border-width:0 0 1 0;
            }
    .TESTcpCurrentMonthDate,
    .TESTcpOtherMonthDate,
    .TESTcpCurrentDate
            {
            text-align:right;
            text-decoration:none;
            }
    .TESTcpCurrentMonthDateDisabled,
    .TESTcpOtherMonthDateDisabled,
    .TESTcpCurrentDateDisabled
            {
            color:#D0D0D0;
            text-align:right;
            text-decoration:line-through;
            }
    .TESTcpCurrentMonthDate
            {
            color:#6677DD;
            font-weight:bold;
            }
    .TESTcpCurrentDate
            {
            color: #FFFFFF;
            font-weight:bold;
            }
    .TESTcpOtherMonthDate
            {
            color:#808080;
            }
    TD.TESTcpCurrentDate
            {
            color:#FFFFFF;
            background-color: #6677DD;
            border-width:1;
            border:solid thin #000000;
            }
    TD.TESTcpCurrentDateDisabled
            {
            border-width:1;
            border:solid thin #FFAAAA;
            }
    TD.TESTcpTodayText,
    TD.TESTcpTodayTextDisabled
            {
            border:solid thin #6677DD;
            border-width:1 0 0 0;
            }
    A.TESTcpTodayText,
    SPAN.TESTcpTodayTextDisabled
            {
            height:20px;
            }
    A.TESTcpTodayText
            {
            color:#6677DD;
            font-weight:bold;
            }
    SPAN.TESTcpTodayTextDisabled
            {
            color:#D0D0D0;
            }
    .TESTcpBorder
            {
            border:solid thin #6677DD;
            }
</STYLE>
</HEAD>
<BODY>

<FORM>
<SCRIPT LANGUAGE="JavaScript" ID="js1">
var cal1 = new CalendarPopup();
</SCRIPT>

<INPUT TYPE="text" NAME="date1" VALUE="" SIZE=16>
<A HREF="#" onClick="cal1.select(document.forms[0].date1,'anchor1','MM/dd/yyyy'); return false;" NAME="anchor1" ID="anchor1"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></A> Default calendar using the DIV-style display.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="jscal1x">
var cal1x = new CalendarPopup("testdiv1");
</SCRIPT>

<INPUT TYPE="text" NAME="date1x" VALUE="" SIZE=16>
<A HREF="#" onClick="cal1x.select(document.forms[0].date1x,'anchor1x','MM/dd/yyyy'); return false;" NAME="anchor1x" ID="anchor1x"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Default calendar using the DIV-style display, with navigation drop-downs enabled.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="jscal1xx">
var cal1xx = new CalendarPopup("testdiv1");
cal1xx.showNavigationDropdowns();
</SCRIPT>

<INPUT TYPE="text" NAME="date1xx" VALUE="" SIZE=16>
<A HREF="#" onClick="cal1xx.select(document.forms[0].date1xx,'anchor1xx','MM/dd/yyyy'); return false;" NAME="anchor1xx" ID="anchor1xx"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
DIV-style calendar using a CSS prefix and different styles define in this HTML page (view source to see the defined styles)<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js18">
var cal18 = new CalendarPopup("testdiv1");
cal18.setCssPrefix("TEST");
</SCRIPT>

<INPUT TYPE="text" NAME="date18" VALUE="" SIZE=16>
<A HREF="#" onClick="cal18.select(document.forms[0].date18,'anchor18','MM/dd/yyyy'); return false;" NAME="anchor18" ID="anchor18"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Some dates manually disabled from selection. Dates disabled: Anything up to today, December 25, 2007, and anything after January 1, 2008.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js17">
var now = new Date();
var cal17 = new CalendarPopup("testdiv1");
cal17.addDisabledDates(null,formatDate(now,"yyyy-MM-dd"));
cal17.addDisabledDates("12/25/2007");
cal17.addDisabledDates("Jan 1, 2008",null);
</SCRIPT>

<INPUT TYPE="text" NAME="date17" VALUE="" SIZE=16>
<A HREF="#" onClick="cal17.select(document.forms[0].date17,'anchor17','MM/dd/yyyy'); return false;" NAME="anchor17" ID="anchor17"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Week-end select.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js8">
var cal8 = new CalendarPopup();
cal8.setDisplayType("week-end");
</SCRIPT>

<INPUT TYPE="text" NAME="date8" VALUE="" SIZE=16>
<A HREF="#"
onClick="cal8.select(document.forms[0].date8,'anchor8','MM/dd/yyyy'); return false;" NAME="anchor8" ID="anchor8"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Calendar with showYearNavigation() enabled.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js2">
var cal2 = new CalendarPopup();
cal2.showYearNavigation();
</SCRIPT>

<INPUT TYPE="text" NAME="date2" VALUE="" SIZE=16>
<A HREF="#" onClick="cal2.select(document.forms[0].date2,'anchor2','MM/dd/yyyy'); return false;" NAME="anchor2" ID="anchor2"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Calendar with showYearNavigation() enabled and showYearNavigationInput() enabled, to allow manual entering of years<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js19">
var cal19 = new CalendarPopup();
cal19.showYearNavigation();
cal19.showYearNavigationInput();
</SCRIPT>

<INPUT TYPE="text" NAME="date19" VALUE="" SIZE=16>
<A HREF="#" onClick="cal19.select(document.forms[0].date19,'anchor19','MM/dd/yyyy'); return false;" NAME="anchor19" ID="anchor19"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Calendar with only Saturdays allowed to be selected enabled.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js3">
var cal3 = new CalendarPopup();
cal3.setDisabledWeekDays(0,1,2,3,4,5);
</SCRIPT>

<INPUT TYPE="text" NAME="date3" VALUE="" SIZE=16>
<A HREF="#" onClick="cal3.select(document.forms[0].date3,'anchor3','MM/dd/yyyy'); return false;" NAME="anchor3" ID="anchor3"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
German Calendar, with modified month names, day names, and week starting on Monday. Date format changed to dd/MM/yyyy<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js4">
var cal4 = new CalendarPopup();
cal4.setMonthNames('Januar','Februar','M?z','April','Mag','Juni','Juli','August','September','Oktober','November','Dezember');
cal4.setDayHeaders('S','M','D','M','D','F','S');
cal4.setWeekStartDay(1);
cal4.setTodayText("Heute");
</SCRIPT>

<INPUT TYPE="text" NAME="date4" VALUE="" SIZE=16>
<A HREF="#" onClick="cal4.select(document.forms[0].date4,'anchor4','dd/MM/yyyy'); return false;" NAME="anchor4" ID="anchor4"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Month-select calendar<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js5">
var cal5 = new CalendarPopup();
cal5.setDisplayType("month");
cal5.setReturnMonthFunction("monthReturn");
cal5.showYearNavigation();
function monthReturn(y,m) {
document.forms[0].date5.value=m+"/"+y;
}
</SCRIPT>

<INPUT TYPE="text" NAME="date5" VALUE="" SIZE=16>
<A HREF="#" onClick="cal5.showCalendar('anchor5'); return false;" NAME="anchor5" ID="anchor5"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Quarter-select calendar<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js6">
var cal6 = new CalendarPopup();
cal6.setDisplayType("quarter");
cal6.setReturnQuarterFunction("quarterReturn");
cal6.showYearNavigation();
function quarterReturn(y,q) {
document.forms[0].date6.value="Quarter "+q+", "+y;
}
</SCRIPT>

<INPUT TYPE="text" NAME="date6" VALUE="" SIZE=16>
<A HREF="#" onClick="cal6.showCalendar('anchor6'); return false;" NAME="anchor6" ID="anchor6"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Year-select calendar<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js7">
var cal7 = new CalendarPopup();
cal7.setDisplayType("year");
cal7.setReturnYearFunction("yearReturn");
cal7.showYearNavigation();
function yearReturn(y) {
document.forms[0].date7.value=y;
}
</SCRIPT>

<INPUT TYPE="text" NAME="date7" VALUE="" SIZE=16>
<A HREF="#" onClick="cal7.showCalendar('anchor7'); return false;" NAME="anchor7" ID="anchor7"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Default calendar, but results are split into multiple fields.<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js9">
var cal9 = new CalendarPopup();
cal9.setReturnFunction("setMultipleValues");
function setMultipleValues(y,m,d) {
    document.forms[0].date9_year.value=y;
    document.forms[0].date9_month.value=m;
    document.forms[0].date9_date.value=d;
    }
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" ID="js10">
var cal10 = new CalendarPopup();
cal10.setReturnFunction("setMultipleValues2");
function setMultipleValues2(y,m,d) {
    document.forms[0].date10_year.value=y;
    document.forms[0].date10_month.value=LZ(m);
    document.forms[0].date10_date.value=LZ(d);
    }
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" ID="js11">
var cal11 = new CalendarPopup();
cal11.setReturnFunction("setMultipleValues3");
function setMultipleValues3(y,m,d) {
    document.forms[0].date11_year.value=y;
    document.forms[0].date11_month.selectedIndex=m;
    document.forms[0].date11_date.selectedIndex=d;
    }
</SCRIPT>

<SELECT NAME="date11_month">
    <OPTION>
    <OPTION VALUE="Jan">January
    <OPTION VALUE="Feb">February
    <OPTION VALUE="Mar">March
    <OPTION VALUE="Apr">April
    <OPTION VALUE="May">May
    <OPTION VALUE="Jun">June
    <OPTION VALUE="Jul">July
    <OPTION VALUE="Aug">August
    <OPTION VALUE="Sep">September
    <OPTION VALUE="Oct">October
    <OPTION VALUE="Nov">November
    <OPTION VALUE="Dec">December
</SELECT>
/
<SELECT NAME="date11_date">
    <OPTION>
    <OPTION VALUE="1">1
    <OPTION VALUE="2">2
    <OPTION VALUE="3">3
    <OPTION VALUE="4">4
    <OPTION VALUE="5">5
    <OPTION VALUE="6">6
    <OPTION VALUE="7">7
    <OPTION VALUE="8">8
    <OPTION VALUE="9">9
    <OPTION VALUE="10">10
    <OPTION VALUE="11">11
    <OPTION VALUE="12">12
    <OPTION VALUE="13">13
    <OPTION VALUE="14">14
    <OPTION VALUE="15">15
    <OPTION VALUE="16">16
    <OPTION VALUE="17">17
    <OPTION VALUE="18">18
    <OPTION VALUE="19">19
    <OPTION VALUE="20">20
    <OPTION VALUE="21">21
    <OPTION VALUE="22">22
    <OPTION VALUE="23">23
    <OPTION VALUE="24">24
    <OPTION VALUE="25">25
    <OPTION VALUE="26">26
    <OPTION VALUE="27">27
    <OPTION VALUE="28">28
    <OPTION VALUE="29">29
    <OPTION VALUE="30">30
    <OPTION VALUE="31">31
</SELECT>
<INPUT TYPE="text" NAME="date11_year" VALUE="" SIZE=5>
<A HREF="#" onClick="cal11.showCalendar('anchor11'); return false;" TITLE="cal11.showCalendar('anchor11'); return false;" NAME="anchor11" ID="anchor11"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Calendar with popup pre-selected to be January 29, 1974 (my birthday!)<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js12">
var cal12 = new CalendarPopup();
</SCRIPT>

<INPUT TYPE="text" NAME="date12" VALUE="" SIZE=16>
<A HREF="#" onClick="cal12.select(document.forms[0].date12,'anchor12','MM/dd/yyyy','01/29/1974'); return false;" NAME="anchor12" ID="anchor12"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
Start date and end date, with end date popup defaulting to same date as start date<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js13">
var cal13 = new CalendarPopup();
</SCRIPT>

Start: <INPUT TYPE="text" NAME="date13" VALUE="" SIZE=16>
<A HREF="#" onClick="cal13.select(document.forms[0].date13,'anchor13','MM/dd/yyyy'); return false;" NAME="anchor13" ID="anchor13"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
   
End: <INPUT TYPE="text" NAME="date14" VALUE="" SIZE=16>
<A HREF="#" onClick="cal13.select(document.forms[0].date14,'anchor14','MM/dd/yyyy',(document.forms[0].date14.value=='')?document.forms[0].date13.value:null); return false;" NAME="anchor14" ID="anchor14"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>

<SCRIPT LANGUAGE="JavaScript" ID="js15">
var cal15 = new CalendarPopup();
cal15.setReturnFunction("setMultipleValues4");
function setMultipleValues4(y,m,d) {
    document.forms[0].date15_year.value=y;
    document.forms[0].date15_month.selectedIndex=m;
    for (var i=0; i<document.forms[0].date15_date.options.length; i++) {
        if (document.forms[0].date15_date.options[i].value==d) {
            document.forms[0].date15_date.selectedIndex=i;
            }
        }
    }
var cal16 = new CalendarPopup();
cal16.setReturnFunction("setMultipleValues5");
function setMultipleValues5(y,m,d) {
    document.forms[0].date16_year.value=y;
    document.forms[0].date16_month.selectedIndex=m;
    for (var i=0; i<document.forms[0].date16_date.options.length; i++) {
        if (document.forms[0].date16_date.options[i].value==d) {
            document.forms[0].date16_date.selectedIndex=i;
            }
        }
    }
function getDateString(y_obj,m_obj,d_obj) {
    var y = y_obj.options[y_obj.selectedIndex].value;
    var m = m_obj.options[m_obj.selectedIndex].value;
    var d = d_obj.options[d_obj.selectedIndex].value;
    if (y=="" || m=="") { return null; }
    if (d=="") { d=1; }
    return str= y+'-'+m+'-'+d;
    }
</SCRIPT><br>

Start: <SELECT NAME="date15_month">
    <OPTION>
    <OPTION VALUE="Jan">January
    <OPTION VALUE="Feb">February
    <OPTION VALUE="Mar">March
    <OPTION VALUE="Apr">April
    <OPTION VALUE="May">May
    <OPTION VALUE="Jun">June
    <OPTION VALUE="Jul">July
    <OPTION VALUE="Aug">August
    <OPTION VALUE="Sep">September
    <OPTION VALUE="Oct">October
    <OPTION VALUE="Nov">November
    <OPTION VALUE="Dec">December
</SELECT>
/
<SELECT NAME="date15_date">
    <OPTION>
    <OPTION VALUE="1">1
    <OPTION VALUE="2">2
    <OPTION VALUE="3">3
    <OPTION VALUE="4">4
    <OPTION VALUE="5">5
    <OPTION VALUE="6">6
    <OPTION VALUE="7">7
    <OPTION VALUE="8">8
    <OPTION VALUE="9">9
    <OPTION VALUE="10">10
    <OPTION VALUE="11">11
    <OPTION VALUE="12">12
    <OPTION VALUE="13">13
    <OPTION VALUE="14">14
    <OPTION VALUE="15">15
    <OPTION VALUE="16">16
    <OPTION VALUE="17">17
    <OPTION VALUE="18">18
    <OPTION VALUE="19">19
    <OPTION VALUE="20">20
    <OPTION VALUE="21">21
    <OPTION VALUE="22">22
    <OPTION VALUE="23">23
    <OPTION VALUE="24">24
    <OPTION VALUE="25">25
    <OPTION VALUE="26">26
    <OPTION VALUE="27">27
    <OPTION VALUE="28">28
    <OPTION VALUE="29">29
    <OPTION VALUE="30">30
    <OPTION VALUE="31">31
</SELECT>
<SELECT NAME="date15_year">
    <OPTION>
    <OPTION VALUE="2000">2000
    <OPTION VALUE="2001">2001
    <OPTION VALUE="2002">2002
    <OPTION VALUE="2003">2003
    <OPTION VALUE="2004">2004
    <OPTION VALUE="2005">2005
    <OPTION VALUE="2006">2006
</SELECT>
<A HREF="#" onClick="cal15.showCalendar('anchor15',getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date)); return false;" NAME="anchor15" ID="anchor15"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>

   
End: <SELECT NAME="date16_month">
    <OPTION>
    <OPTION VALUE="Jan">January
    <OPTION VALUE="Feb">February
    <OPTION VALUE="Mar">March
    <OPTION VALUE="Apr">April
    <OPTION VALUE="May">May
    <OPTION VALUE="Jun">June
    <OPTION VALUE="Jul">July
    <OPTION VALUE="Aug">August
    <OPTION VALUE="Sep">September
    <OPTION VALUE="Oct">October
    <OPTION VALUE="Nov">November
    <OPTION VALUE="Dec">December
</SELECT>
/
<SELECT NAME="date16_date">
    <OPTION>
    <OPTION VALUE="1">1
    <OPTION VALUE="2">2
    <OPTION VALUE="3">3
    <OPTION VALUE="4">4
    <OPTION VALUE="5">5
    <OPTION VALUE="6">6
    <OPTION VALUE="7">7
    <OPTION VALUE="8">8
    <OPTION VALUE="9">9
    <OPTION VALUE="10">10
    <OPTION VALUE="11">11
    <OPTION VALUE="12">12
    <OPTION VALUE="13">13
    <OPTION VALUE="14">14
    <OPTION VALUE="15">15
    <OPTION VALUE="16">16
    <OPTION VALUE="17">17
    <OPTION VALUE="18">18
    <OPTION VALUE="19">19
    <OPTION VALUE="20">20
    <OPTION VALUE="21">21
    <OPTION VALUE="22">22
    <OPTION VALUE="23">23
    <OPTION VALUE="24">24
    <OPTION VALUE="25">25
    <OPTION VALUE="26">26
    <OPTION VALUE="27">27
    <OPTION VALUE="28">28
    <OPTION VALUE="29">29
    <OPTION VALUE="30">30
    <OPTION VALUE="31">31
</SELECT>
<SELECT NAME="date16_year">
    <OPTION>
    <OPTION VALUE="2000">2000
    <OPTION VALUE="2001">2001
    <OPTION VALUE="2002">2002
    <OPTION VALUE="2003">2003
    <OPTION VALUE="2004">2004
    <OPTION VALUE="2005">2005
    <OPTION VALUE="2006">2006
</SELECT>
<A HREF="#" onClick="var d=getDateString(document.forms[0].date16_year,document.forms[0].date16_month,document.forms[0].date16_date); cal16.showCalendar('anchor16',(d==null)?getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date):d); return false;" TITLE="var d=getDateString(document.forms[0].date16_year,document.forms[0].date16_month,document.forms[0].date16_date); cal16.showCalendar('anchor16',(d==null)?getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date):d); return false;" NAME="anchor16" ID="anchor16"><img src="http://www.blueb.co.kr/SRC/javascript/image/calendar.jpg border=0></a>
</FORM>
<DIV ID="testdiv1" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>

</BODY>
</HTML>

댓글목록

등록된 댓글이 없습니다.

번호	제목	글쓴이	조회	날짜
441	아침, 오후, 저녁, 밤 시간에 따른 메세지를 출력합니다	서방님	139	08-11
열람중	팝업 카렌다 2 (다양한 템플릿 구성)	서방님	78	08-11
439	네이버 달력,양-음력 계산기, 남은일 계산 등 (달력관련 종합)	서방님	149	08-11
438	양력,음력 동시 표시하는 달력	서방님	158	08-11
437	네이버에서 제공하고 있는 깔끔한 디자인 계산기	서방님	118	08-11
436	네이버에서 제공하고 있는 도량형 계산 (단위 변환)	서방님	84	08-11
435	드래그 가능한 깔끔한 반투명 계산기	서방님	137	08-11
434	현재 서버에 설정된 시간을 디스플레이 합니다.	서방님	176	08-11
433	현재 년도의 12개월 달력 모두를 디스플레이 합니다	서방님	165	08-11
432	알람시계 3(시간이 되면 지정한 URL로 이동합니다.)	서방님	156	08-11
431	기념일 계산기	서방님	177	08-11
430	알람시계 4(알람 효과음 설정 가능)	서방님	76	08-11
429	현재페이지에 링크된 모든 목록을 팝업창으로 보여줍니다	서방님	198	08-11
428	링크점선한방에 안보이기	서방님	212	08-11
427	뉴스 슬라이드 텍스트 (한줄씩 뉴스가 위로 슬라이딩 됩니다)	서방님	188	08-11

팝업 카렌다 2 (다양한 템플릿 구성) > script

인기검색어

script