removing old version of yui
|
|
@ -1,70 +0,0 @@
|
|||
html, body {
|
||||
margin:5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: palatino, georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color:#666;
|
||||
margin-top:8px;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top:0px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
position:absolute;
|
||||
left:5px;
|
||||
top:5px;
|
||||
}
|
||||
|
||||
|
||||
#pageTitle {
|
||||
margin-left:80px;
|
||||
height:38px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
xmp {
|
||||
border:1px solid #CCC;
|
||||
background-color:#F7F7F7;
|
||||
padding:5px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.column.left {
|
||||
float:left;
|
||||
display:inline;
|
||||
margin-left:80px;
|
||||
width:500px;
|
||||
}
|
||||
|
||||
.column.right {
|
||||
text-align:center;
|
||||
background-color:#C2C2D7;
|
||||
float:left;
|
||||
margin-left:10px;
|
||||
width:240px;
|
||||
padding:50px 0px;
|
||||
height:425px;
|
||||
|
||||
}
|
||||
|
||||
.column p {
|
||||
margin:10px 0px;
|
||||
font: normal 11px verdana, sans-serif;
|
||||
line-height:15px;
|
||||
}
|
||||
|
||||
a.navLink {
|
||||
padding:5px;
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
font:14px sans-serif;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,76 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Single-Select Implementation</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Default Single-Select Implementation</h4>
|
||||
|
||||
<p>The default Calendar implementation is a single-select 1-up calendar view that defaults to the current month and year. The basic calendar can be implemented by declaring a variable to represent the calendar, and passing the calendar's ID to the Calendar constructor:</p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var cal1;
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
<p>The Calendar object should be instantiated after the body has been rendered, so that a reference to the container element that will contain the calendar can be obtained. The container element can reside anywhere within the body.</p>
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="cal1Container"></div>
|
||||
</textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
Before Width: | Height: | Size: 52 KiB |
|
|
@ -1,396 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - 2-Up Implementation</title>
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
this.today = new Date();
|
||||
|
||||
var thisMonth = this.today.getMonth();
|
||||
var thisDay = this.today.getDate();
|
||||
var thisYear = this.today.getFullYear();
|
||||
|
||||
this.link1 = document.getElementById('dateLink1');
|
||||
this.link2 = document.getElementById('dateLink2');
|
||||
|
||||
this.selMonth1 = document.getElementById('selMonth1');
|
||||
this.selDay1 = document.getElementById('selDay1');
|
||||
|
||||
this.selMonth1.selectedIndex = thisMonth;
|
||||
this.selDay1.selectedIndex = thisDay-1;
|
||||
|
||||
this.selMonth2 = document.getElementById('selMonth2');
|
||||
this.selDay2 = document.getElementById('selDay2');
|
||||
|
||||
this.selMonth2.selectedIndex = thisMonth;
|
||||
this.selDay2.selectedIndex = thisDay-1;
|
||||
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
|
||||
YAHOO.example.calendar.cal1.title = "Select your desired departure date:";
|
||||
YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
|
||||
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
|
||||
YAHOO.example.calendar.cal2.title = "Select your desired return date:";
|
||||
YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
|
||||
YAHOO.example.calendar.cal2.render();
|
||||
}
|
||||
|
||||
function showCalendar1() {
|
||||
YAHOO.example.calendar.cal2.hide();
|
||||
|
||||
var pos = YAHOO.util.Dom.getXY(link1);
|
||||
YAHOO.example.calendar.cal1.outerContainer.style.display='block';
|
||||
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
|
||||
}
|
||||
|
||||
function showCalendar2() {
|
||||
YAHOO.example.calendar.cal1.hide();
|
||||
|
||||
var pos = YAHOO.util.Dom.getXY(link2);
|
||||
YAHOO.example.calendar.cal2.outerContainer.style.display='block';
|
||||
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
|
||||
}
|
||||
|
||||
function setDate1() {
|
||||
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
|
||||
selMonth1.selectedIndex=date1.getMonth();
|
||||
selDay1.selectedIndex=date1.getDate()-1;
|
||||
YAHOO.example.calendar.cal1.hide();
|
||||
}
|
||||
|
||||
function setDate2() {
|
||||
var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
|
||||
selMonth2.selectedIndex=date2.getMonth();
|
||||
selDay2.selectedIndex=date2.getDate()-1;
|
||||
YAHOO.example.calendar.cal2.hide();
|
||||
}
|
||||
|
||||
function changeDate1() {
|
||||
var month = this.selMonth1.selectedIndex;
|
||||
var day = this.selDay1.selectedIndex + 1;
|
||||
var year = this.today.getFullYear();
|
||||
|
||||
YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
|
||||
YAHOO.example.calendar.cal1.setMonth(month);
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
|
||||
function changeDate2() {
|
||||
var month = this.selMonth2.selectedIndex;
|
||||
var day = this.selDay2.selectedIndex + 1;
|
||||
var year = this.today.getFullYear();
|
||||
|
||||
YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
|
||||
YAHOO.example.calendar.cal2.setMonth(month);
|
||||
YAHOO.example.calendar.cal2.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="margin:0px">
|
||||
|
||||
<img src="img/ytravel.gif" id="bgImg">
|
||||
|
||||
<div style="position:absolute;left:148px;top:275px">
|
||||
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="Jan">
|
||||
Jan
|
||||
</option>
|
||||
<option value="Feb">
|
||||
Feb
|
||||
</option>
|
||||
<option value="Mar">
|
||||
Mar
|
||||
</option>
|
||||
<option value="Apr">
|
||||
Apr
|
||||
</option>
|
||||
<option value="May">
|
||||
May
|
||||
</option>
|
||||
<option value="Jun">
|
||||
Jun
|
||||
</option>
|
||||
<option value="Jul">
|
||||
Jul
|
||||
</option>
|
||||
<option value="Aug">
|
||||
Aug
|
||||
</option>
|
||||
<option value="Sep">
|
||||
Sep
|
||||
</option>
|
||||
<option value="Oct">
|
||||
Oct
|
||||
</option>
|
||||
<option value="Nov">
|
||||
Nov
|
||||
</option>
|
||||
<option value="Dec">
|
||||
Dec
|
||||
</option>
|
||||
</select>
|
||||
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="1">
|
||||
1
|
||||
</option>
|
||||
<option value="2">
|
||||
2
|
||||
</option>
|
||||
<option value="3">
|
||||
3
|
||||
</option>
|
||||
<option value="4">
|
||||
4
|
||||
</option>
|
||||
<option value="5">
|
||||
5
|
||||
</option>
|
||||
<option value="6">
|
||||
6
|
||||
</option>
|
||||
<option value="7">
|
||||
7
|
||||
</option>
|
||||
<option value="8">
|
||||
8
|
||||
</option>
|
||||
<option value="9">
|
||||
9
|
||||
</option>
|
||||
<option value="10">
|
||||
10
|
||||
</option>
|
||||
<option value="11">
|
||||
11
|
||||
</option>
|
||||
<option value="12">
|
||||
12
|
||||
</option>
|
||||
<option value="13">
|
||||
13
|
||||
</option>
|
||||
<option value="14">
|
||||
14
|
||||
</option>
|
||||
<option value="15">
|
||||
15
|
||||
</option>
|
||||
<option value="16">
|
||||
16
|
||||
</option>
|
||||
<option value="17">
|
||||
17
|
||||
</option>
|
||||
<option value="18">
|
||||
18
|
||||
</option>
|
||||
<option value="19">
|
||||
19
|
||||
</option>
|
||||
<option value="20">
|
||||
20
|
||||
</option>
|
||||
<option value="21">
|
||||
21
|
||||
</option>
|
||||
<option value="22">
|
||||
22
|
||||
</option>
|
||||
<option value="23">
|
||||
23
|
||||
</option>
|
||||
<option value="24">
|
||||
24
|
||||
</option>
|
||||
<option value="25">
|
||||
25
|
||||
</option>
|
||||
<option value="26">
|
||||
26
|
||||
</option>
|
||||
<option value="27">
|
||||
27
|
||||
</option>
|
||||
<option value="28">
|
||||
28
|
||||
</option>
|
||||
<option value="29">
|
||||
29
|
||||
</option>
|
||||
<option value="30">
|
||||
30
|
||||
</option>
|
||||
<option value="31">
|
||||
31
|
||||
</option>
|
||||
</select><a href="javascript:void(null)" onclick="showCalendar1()"><img id="dateLink1" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="position:absolute;left:303px;top:275px">
|
||||
<select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
|
||||
<option value="Jan">
|
||||
Jan
|
||||
</option>
|
||||
<option value="Feb">
|
||||
Feb
|
||||
</option>
|
||||
<option value="Mar">
|
||||
Mar
|
||||
</option>
|
||||
<option value="Apr">
|
||||
Apr
|
||||
</option>
|
||||
<option value="May">
|
||||
May
|
||||
</option>
|
||||
<option value="Jun">
|
||||
Jun
|
||||
</option>
|
||||
<option value="Jul">
|
||||
Jul
|
||||
</option>
|
||||
<option value="Aug">
|
||||
Aug
|
||||
</option>
|
||||
<option value="Sep">
|
||||
Sep
|
||||
</option>
|
||||
<option value="Oct">
|
||||
Oct
|
||||
</option>
|
||||
<option value="Nov">
|
||||
Nov
|
||||
</option>
|
||||
<option value="Dec">
|
||||
Dec
|
||||
</option>
|
||||
</select>
|
||||
<select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
|
||||
<option value="1">
|
||||
1
|
||||
</option>
|
||||
<option value="2">
|
||||
2
|
||||
</option>
|
||||
<option value="3">
|
||||
3
|
||||
</option>
|
||||
<option value="4">
|
||||
4
|
||||
</option>
|
||||
<option value="5">
|
||||
5
|
||||
</option>
|
||||
<option value="6">
|
||||
6
|
||||
</option>
|
||||
<option value="7">
|
||||
7
|
||||
</option>
|
||||
<option value="8">
|
||||
8
|
||||
</option>
|
||||
<option value="9">
|
||||
9
|
||||
</option>
|
||||
<option value="10">
|
||||
10
|
||||
</option>
|
||||
<option value="11">
|
||||
11
|
||||
</option>
|
||||
<option value="12">
|
||||
12
|
||||
</option>
|
||||
<option value="13">
|
||||
13
|
||||
</option>
|
||||
<option value="14">
|
||||
14
|
||||
</option>
|
||||
<option value="15">
|
||||
15
|
||||
</option>
|
||||
<option value="16">
|
||||
16
|
||||
</option>
|
||||
<option value="17">
|
||||
17
|
||||
</option>
|
||||
<option value="18">
|
||||
18
|
||||
</option>
|
||||
<option value="19">
|
||||
19
|
||||
</option>
|
||||
<option value="20">
|
||||
20
|
||||
</option>
|
||||
<option value="21">
|
||||
21
|
||||
</option>
|
||||
<option value="22">
|
||||
22
|
||||
</option>
|
||||
<option value="23">
|
||||
23
|
||||
</option>
|
||||
<option value="24">
|
||||
24
|
||||
</option>
|
||||
<option value="25">
|
||||
25
|
||||
</option>
|
||||
<option value="26">
|
||||
26
|
||||
</option>
|
||||
<option value="27">
|
||||
27
|
||||
</option>
|
||||
<option value="28">
|
||||
28
|
||||
</option>
|
||||
<option value="29">
|
||||
29
|
||||
</option>
|
||||
<option value="30">
|
||||
30
|
||||
</option>
|
||||
<option value="31">
|
||||
31
|
||||
</option>
|
||||
</select><a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="container1" style="position:absolute;display:none"></div>
|
||||
<div id="container2" style="position:absolute;display:none"></div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Handling onSelect / onDeselect</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1", "cal1Container");
|
||||
YAHOO.example.calendar.cal1.Options.MULTI_SELECT = true;
|
||||
|
||||
YAHOO.example.calendar.cal1.onSelect = function(selected) {
|
||||
alert("selected: " + selected);
|
||||
}
|
||||
|
||||
YAHOO.example.calendar.cal1.onDeselect = function(deselected) {
|
||||
alert("deselected: " + deselected);
|
||||
}
|
||||
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Handling onSelect / onDeselect</h4>
|
||||
|
||||
<p>This implementation augments the <a href="../multi_select/index.html">multi-select Calendar</a> with event handlers for onSelect and onDeselect. The dates that are selected or deselected are passed as an argument to the event handlers.</p>
|
||||
|
||||
<p>Dates are passed as an array of date field arrays, in the format: [YYYY, M, D]. For instance, if two dates are selected at once (8/6/2006 and 8/7/2006), the argument passed to onSelect would be: [ [2006,8,6], [2006,8,7] ].</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
|
||||
cal1.Options.MULTI_SELECT = true;
|
||||
|
||||
cal1.onSelect = function(selected) {
|
||||
alert("selected: " + selected);
|
||||
}
|
||||
|
||||
cal1.onDeselect = function(deselected) {
|
||||
alert("deselected: " + deselected);
|
||||
}
|
||||
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
</div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 705 B |
|
Before Width: | Height: | Size: 167 B |
|
|
@ -1,37 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Calendar</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/examples.css">
|
||||
</head>
|
||||
<body style="height:100%">
|
||||
<img src="img/logo.gif" style="position:absolute;top:5px;left:5px" />
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar</h3>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<p><a href="default/index.html">Default Calendar</a></p>
|
||||
|
||||
<p><a href="default_2up/index.html">Dual Calendars</a></p>
|
||||
|
||||
<p><a href="intl_germany/index.html">German Calendar</a></p>
|
||||
<p><a href="intl_japan/index.html">Japanese Calendar</a></p>
|
||||
|
||||
<p><a href="multi_select/index.html">Multi-Select Calendar</a></p>
|
||||
|
||||
<p><a href="events/index.html">Handling onSelect / onDeselect</a></p>
|
||||
|
||||
<p><a href="multi_select_2up/index.html">Multi-Select 2-up Calendar</a></p>
|
||||
|
||||
<p><a href="min_max_date/index.html">Minimum/Maximum Selectable Date Calendar</a></p>
|
||||
<p><a href="renderer/index.html">Renderer Example Calendar</a></p>
|
||||
<p><a href="restriction/index.html">Date-Restricted Calendar</a></p>
|
||||
<p><a href="row_highlight/index.html">Row Highlight Calendar</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
#bgImg {
|
||||
margin-left:75px;
|
||||
filter:alpha(opacity=50);
|
||||
-moz-opacity:.50;
|
||||
opacity:.50;
|
||||
z-index:0;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
Before Width: | Height: | Size: 85 KiB |
|
|
@ -1,451 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - 2-Up German Implementation</title>
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<link rel="stylesheet" href="css/Calendar_DE.css" type="text/css">
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
/* Begin German Calendar */
|
||||
|
||||
YAHOO.widget.Calendar2up_DE_Cal = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.init(id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_DE_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
|
||||
|
||||
YAHOO.widget.Calendar2up_DE_Cal.prototype.customConfig = function() {
|
||||
this.Config.Locale.MONTHS_SHORT = ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
|
||||
this.Config.Locale.MONTHS_LONG = ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
|
||||
this.Config.Locale.WEEKDAYS_1CHAR = ["S", "M", "D", "M", "D", "F", "S"];
|
||||
this.Config.Locale.WEEKDAYS_SHORT = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||||
this.Config.Locale.WEEKDAYS_MEDIUM = ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"];
|
||||
this.Config.Locale.WEEKDAYS_LONG = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
|
||||
|
||||
this.Config.Options.START_WEEKDAY = 1;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
|
||||
YAHOO.widget.Calendar2up_DE = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.buildWrapper(containerId);
|
||||
this.init(2, id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_DE.prototype = new YAHOO.widget.Calendar2up();
|
||||
|
||||
YAHOO.widget.Calendar2up_DE.prototype.constructChild = function(id,containerId,monthyear,selected) {
|
||||
var cal = new YAHOO.widget.Calendar2up_DE_Cal(id,containerId,monthyear,selected);
|
||||
return cal;
|
||||
};
|
||||
|
||||
/* End German Calendar */
|
||||
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
var today,link1,link2,selMonth1,selDay1,selMonth2,selDay2;
|
||||
|
||||
function initDE() {
|
||||
today = new Date();
|
||||
|
||||
var thisMonth = today.getMonth();
|
||||
var thisDay = today.getDate();
|
||||
var thisYear = today.getFullYear();
|
||||
|
||||
link1 = document.getElementById('dateLink1');
|
||||
link2 = document.getElementById('dateLink2');
|
||||
|
||||
selMonth1 = document.getElementById('selMonth1');
|
||||
selDay1 = document.getElementById('selDay1');
|
||||
|
||||
selMonth1.selectedIndex = thisMonth;
|
||||
selDay1.selectedIndex = thisDay-1;
|
||||
|
||||
selMonth2 = document.getElementById('selMonth2');
|
||||
selDay2 = document.getElementById('selDay2');
|
||||
|
||||
selMonth2.selectedIndex = thisMonth;
|
||||
selDay2.selectedIndex = thisDay-1;
|
||||
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up_DE("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
|
||||
YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
|
||||
YAHOO.example.calendar.cal1.title = "Waehle Dein Abflugsdatum";
|
||||
|
||||
YAHOO.example.calendar.cal1.addRenderer("1/1,1/6,5/1,8/15,10/3,10/31,12/25,12/26", YAHOO.example.calendar.cal1.pages[0].renderCellStyleHighlight1);
|
||||
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
|
||||
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up_DE("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
|
||||
YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
|
||||
YAHOO.example.calendar.cal2.title = "Waehle Dein Rueckflugsdatum";
|
||||
|
||||
YAHOO.example.calendar.cal2.addRenderer("1/1,1/6,5/1,8/15,10/3,10/31,12/25,12/26", YAHOO.example.calendar.cal2.pages[0].renderCellStyleHighlight1);
|
||||
|
||||
YAHOO.example.calendar.cal2.render();
|
||||
}
|
||||
|
||||
function showCalendar1() {
|
||||
YAHOO.example.calendar.cal2.hide();
|
||||
|
||||
var pos = YAHOO.util.Dom.getXY(link1);
|
||||
YAHOO.example.calendar.cal1.outerContainer.style.display='block';
|
||||
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
|
||||
}
|
||||
|
||||
function showCalendar2() {
|
||||
YAHOO.example.calendar.cal1.hide();
|
||||
|
||||
var pos = YAHOO.util.Dom.getXY(link2);
|
||||
YAHOO.example.calendar.cal2.outerContainer.style.display='block';
|
||||
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
|
||||
}
|
||||
|
||||
function setDate1() {
|
||||
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
|
||||
selMonth1.selectedIndex=date1.getMonth();
|
||||
selDay1.selectedIndex=date1.getDate()-1;
|
||||
YAHOO.example.calendar.cal1.hide();
|
||||
}
|
||||
|
||||
function setDate2() {
|
||||
var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
|
||||
selMonth2.selectedIndex=date2.getMonth();
|
||||
selDay2.selectedIndex=date2.getDate()-1;
|
||||
YAHOO.example.calendar.cal2.hide();
|
||||
}
|
||||
|
||||
function changeDate1() {
|
||||
var month = selMonth1.selectedIndex;
|
||||
var day = selDay1.selectedIndex + 1;
|
||||
var year = today.getFullYear();
|
||||
|
||||
YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
|
||||
YAHOO.example.calendar.cal1.setMonth(month);
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
|
||||
function changeDate2() {
|
||||
var month = selMonth2.selectedIndex;
|
||||
var day = selDay2.selectedIndex + 1;
|
||||
var year = today.getFullYear();
|
||||
|
||||
YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
|
||||
YAHOO.example.calendar.cal2.setMonth(month);
|
||||
YAHOO.example.calendar.cal2.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", initDE);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="margin:0px">
|
||||
|
||||
<img src="img/ytravel.gif" id="bgImg">
|
||||
|
||||
<div style="position:absolute;left:209px;top:332px">
|
||||
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="1">
|
||||
1
|
||||
</option>
|
||||
<option value="2">
|
||||
2
|
||||
</option>
|
||||
<option value="3">
|
||||
3
|
||||
</option>
|
||||
<option value="4">
|
||||
4
|
||||
</option>
|
||||
<option value="5">
|
||||
5
|
||||
</option>
|
||||
<option value="6">
|
||||
6
|
||||
</option>
|
||||
<option value="7">
|
||||
7
|
||||
</option>
|
||||
<option value="8">
|
||||
8
|
||||
</option>
|
||||
<option value="9">
|
||||
9
|
||||
</option>
|
||||
<option value="10">
|
||||
10
|
||||
</option>
|
||||
<option value="11">
|
||||
11
|
||||
</option>
|
||||
<option value="12">
|
||||
12
|
||||
</option>
|
||||
<option value="13">
|
||||
13
|
||||
</option>
|
||||
<option value="14">
|
||||
14
|
||||
</option>
|
||||
<option value="15">
|
||||
15
|
||||
</option>
|
||||
<option value="16">
|
||||
16
|
||||
</option>
|
||||
<option value="17">
|
||||
17
|
||||
</option>
|
||||
<option value="18">
|
||||
18
|
||||
</option>
|
||||
<option value="19">
|
||||
19
|
||||
</option>
|
||||
<option value="20">
|
||||
20
|
||||
</option>
|
||||
<option value="21">
|
||||
21
|
||||
</option>
|
||||
<option value="22">
|
||||
22
|
||||
</option>
|
||||
<option value="23">
|
||||
23
|
||||
</option>
|
||||
<option value="24">
|
||||
24
|
||||
</option>
|
||||
<option value="25">
|
||||
25
|
||||
</option>
|
||||
<option value="26">
|
||||
26
|
||||
</option>
|
||||
<option value="27">
|
||||
27
|
||||
</option>
|
||||
<option value="28">
|
||||
28
|
||||
</option>
|
||||
<option value="29">
|
||||
29
|
||||
</option>
|
||||
<option value="30">
|
||||
30
|
||||
</option>
|
||||
<option value="31">
|
||||
31
|
||||
</option>
|
||||
</select>
|
||||
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="Jan">
|
||||
Januar
|
||||
</option>
|
||||
<option value="Feb">
|
||||
Februar
|
||||
</option>
|
||||
<option value="Mar">
|
||||
März
|
||||
</option>
|
||||
<option value="Apr">
|
||||
April
|
||||
</option>
|
||||
<option value="May">
|
||||
Mai
|
||||
</option>
|
||||
<option value="Jun">
|
||||
Juni
|
||||
</option>
|
||||
<option value="Jul">
|
||||
Juli
|
||||
</option>
|
||||
<option value="Aug">
|
||||
August
|
||||
</option>
|
||||
<option value="Sep">
|
||||
September
|
||||
</option>
|
||||
<option value="Oct">
|
||||
Oktober
|
||||
</option>
|
||||
<option value="Nov">
|
||||
November
|
||||
</option>
|
||||
<option value="Dec">
|
||||
Dezember
|
||||
</option>
|
||||
</select>
|
||||
<a href="javascript:void(null)" onclick="showCalendar1()">
|
||||
<img id="dateLink1" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute;left:209px;top:382px">
|
||||
<select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
|
||||
<option value="1">
|
||||
1
|
||||
</option>
|
||||
<option value="2">
|
||||
2
|
||||
</option>
|
||||
<option value="3">
|
||||
3
|
||||
</option>
|
||||
<option value="4">
|
||||
4
|
||||
</option>
|
||||
<option value="5">
|
||||
5
|
||||
</option>
|
||||
<option value="6">
|
||||
6
|
||||
</option>
|
||||
<option value="7">
|
||||
7
|
||||
</option>
|
||||
<option value="8">
|
||||
8
|
||||
</option>
|
||||
<option value="9">
|
||||
9
|
||||
</option>
|
||||
<option value="10">
|
||||
10
|
||||
</option>
|
||||
<option value="11">
|
||||
11
|
||||
</option>
|
||||
<option value="12">
|
||||
12
|
||||
</option>
|
||||
<option value="13">
|
||||
13
|
||||
</option>
|
||||
<option value="14">
|
||||
14
|
||||
</option>
|
||||
<option value="15">
|
||||
15
|
||||
</option>
|
||||
<option value="16">
|
||||
16
|
||||
</option>
|
||||
<option value="17">
|
||||
17
|
||||
</option>
|
||||
<option value="18">
|
||||
18
|
||||
</option>
|
||||
<option value="19">
|
||||
19
|
||||
</option>
|
||||
<option value="20">
|
||||
20
|
||||
</option>
|
||||
<option value="21">
|
||||
21
|
||||
</option>
|
||||
<option value="22">
|
||||
22
|
||||
</option>
|
||||
<option value="23">
|
||||
23
|
||||
</option>
|
||||
<option value="24">
|
||||
24
|
||||
</option>
|
||||
<option value="25">
|
||||
25
|
||||
</option>
|
||||
<option value="26">
|
||||
26
|
||||
</option>
|
||||
<option value="27">
|
||||
27
|
||||
</option>
|
||||
<option value="28">
|
||||
28
|
||||
</option>
|
||||
<option value="29">
|
||||
29
|
||||
</option>
|
||||
<option value="30">
|
||||
30
|
||||
</option>
|
||||
<option value="31">
|
||||
31
|
||||
</option>
|
||||
</select>
|
||||
<select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
|
||||
<option value="Jan">
|
||||
Januar
|
||||
</option>
|
||||
<option value="Feb">
|
||||
Februar
|
||||
</option>
|
||||
<option value="Mar">
|
||||
März
|
||||
</option>
|
||||
<option value="Apr">
|
||||
April
|
||||
</option>
|
||||
<option value="May">
|
||||
Mai
|
||||
</option>
|
||||
<option value="Jun">
|
||||
Juni
|
||||
</option>
|
||||
<option value="Jul">
|
||||
Juli
|
||||
</option>
|
||||
<option value="Aug">
|
||||
August
|
||||
</option>
|
||||
<option value="Sep">
|
||||
September
|
||||
</option>
|
||||
<option value="Oct">
|
||||
Oktober
|
||||
</option>
|
||||
<option value="Nov">
|
||||
November
|
||||
</option>
|
||||
<option value="Dec">
|
||||
Dezember
|
||||
</option>
|
||||
</select>
|
||||
<a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
|
||||
</div>
|
||||
|
||||
<div id="container1" style="position:absolute;display:none"></div>
|
||||
<div id="container2" style="position:absolute;display:none"></div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
<?php echo yadl_spaceid( '792401513' ); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
YAHOO.widget.Calendar2up_DE_Cal = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.init(id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_DE_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
|
||||
|
||||
YAHOO.widget.Calendar2up_DE_Cal.prototype.customConfig = function() {
|
||||
this.Config.Locale.MONTHS_SHORT = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
|
||||
this.Config.Locale.MONTHS_LONG = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
|
||||
this.Config.Locale.WEEKDAYS_1CHAR = ["S", "M", "D", "M", "D", "F", "S"];
|
||||
this.Config.Locale.WEEKDAYS_SHORT = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||||
this.Config.Locale.WEEKDAYS_MEDIUM = ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"];
|
||||
this.Config.Locale.WEEKDAYS_LONG = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
|
||||
|
||||
this.Config.Options.START_WEEKDAY = 1;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
|
||||
YAHOO.widget.Calendar2up_DE = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.buildWrapper(containerId);
|
||||
this.init(2, id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_DE.prototype = new YAHOO.widget.Calendar2up();
|
||||
|
||||
YAHOO.widget.Calendar2up_DE.prototype.constructChild = function(id,containerId,monthyear,selected) {
|
||||
var cal = new YAHOO.widget.Calendar2up_DE_Cal(id,containerId,monthyear,selected);
|
||||
return cal;
|
||||
};
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
#bgImg {
|
||||
margin-left:75px;
|
||||
filter:alpha(opacity=50);
|
||||
-moz-opacity:.50;
|
||||
opacity:.50;
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
.yui-calendar td.sunday {
|
||||
background-color: rgb(253, 224, 224);
|
||||
}
|
||||
|
||||
.yui-calendar td.sunday a {
|
||||
color:red;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
Before Width: | Height: | Size: 39 KiB |
|
|
@ -1,237 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//JP" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Yahoo! Calendar Control - 2-Up Japanese Implementation</title>
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<link rel="stylesheet" href="css/Calendar_JP.css" type="text/css">
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
/* Begin Japanese 2up Calendar */
|
||||
|
||||
YAHOO.widget.Calendar2up_JP_Cal = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.init(id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_JP_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
|
||||
|
||||
YAHOO.widget.Calendar2up_JP_Cal.prototype.customConfig = function() {
|
||||
this.Config.Locale.MONTHS_SHORT = ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"];
|
||||
this.Config.Locale.MONTHS_LONG = ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"];
|
||||
this.Config.Locale.WEEKDAYS_1CHAR = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
|
||||
this.Config.Locale.WEEKDAYS_SHORT = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
|
||||
this.Config.Locale.WEEKDAYS_MEDIUM = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
|
||||
this.Config.Locale.WEEKDAYS_LONG = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
|
||||
|
||||
this.Config.Options.START_WEEKDAY = 1;
|
||||
}
|
||||
/**********************************/
|
||||
|
||||
YAHOO.widget.Calendar2up_JP = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.buildWrapper(containerId);
|
||||
this.init(2, id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_JP.prototype = new YAHOO.widget.Calendar2up();
|
||||
|
||||
YAHOO.widget.Calendar2up_JP.prototype.constructChild = function(id,containerId,monthyear,selected) {
|
||||
var cal = new YAHOO.widget.Calendar2up_JP_Cal(id,containerId,monthyear,selected);
|
||||
return cal;
|
||||
};
|
||||
|
||||
/* End Japanese 2up Calendar */
|
||||
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
var today,link1,selMonth1,selDay1,selYear1,container1;
|
||||
|
||||
function initJapan() {
|
||||
today = new Date();
|
||||
|
||||
var thisMonth = today.getMonth();
|
||||
var thisDay = today.getDate();
|
||||
var thisYear = today.getFullYear();
|
||||
|
||||
container1 = document.getElementById('container1');
|
||||
|
||||
link1 = document.getElementById('dateLink1');
|
||||
|
||||
selMonth1 = document.getElementById('selMonth1');
|
||||
selDay1 = document.getElementById('selDay1');
|
||||
selYear1 = document.getElementById('selYear1');
|
||||
|
||||
selMonth1.selectedIndex = thisMonth;
|
||||
selDay1.selectedIndex = thisDay-1;
|
||||
|
||||
YAHOO.example.calendar.cal = new YAHOO.widget.Calendar2up_JP("YAHOO.example.calendar.cal","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
|
||||
YAHOO.example.calendar.cal.setChildFunction("onSelect",setDate1);
|
||||
YAHOO.example.calendar.cal.title = "日付を選びなさい";
|
||||
|
||||
|
||||
var renderSunday = function(cal,cell) {
|
||||
YAHOO.util.Dom.addClass(cell, "sunday");
|
||||
}
|
||||
|
||||
YAHOO.example.calendar.cal.addWeekdayRenderer(1, renderSunday);
|
||||
|
||||
YAHOO.example.calendar.cal.render();
|
||||
}
|
||||
|
||||
function showCalendar1() {
|
||||
var pos = YAHOO.util.Dom.getXY(link1);
|
||||
YAHOO.example.calendar.cal.outerContainer.style.display='block';
|
||||
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
|
||||
}
|
||||
|
||||
function setDate1() {
|
||||
var date1 = YAHOO.example.calendar.cal.getSelectedDates()[0];
|
||||
selMonth1.selectedIndex=date1.getMonth();
|
||||
selDay1.selectedIndex=date1.getDate()-1;
|
||||
YAHOO.example.calendar.cal.hide();
|
||||
}
|
||||
|
||||
function changeDate1() {
|
||||
var month = selMonth1.selectedIndex;
|
||||
var day = selDay1.selectedIndex + 1;
|
||||
var year = selYear1.options[selYear1.selectedIndex].value;
|
||||
|
||||
YAHOO.example.calendar.cal.select((month+1) + "/" + day + "/" + year);
|
||||
YAHOO.example.calendar.cal.setMonth(month);
|
||||
YAHOO.example.calendar.cal.setYear(year);
|
||||
|
||||
YAHOO.example.calendar.cal.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", initJapan);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body style="margin:0px">
|
||||
|
||||
<img src="img/ytravel.gif" id="bgImg">
|
||||
|
||||
<div style="position:absolute;left:230px;top:190px">
|
||||
<select name="selYear1" id="selYear1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="2005" selected>2005年</option>
|
||||
<option value="2006">2006年</option>
|
||||
<option value="2007">2007年</option>
|
||||
<option value="2008">2008年</option>
|
||||
<option value="2009">2009年</option>
|
||||
<option value="2010">2010年</option>
|
||||
<option value="2011">2011年</option>
|
||||
</select>
|
||||
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="Jan">1月</option>
|
||||
<option value="Feb">2月</option>
|
||||
<option value="Mar">3月</option>
|
||||
<option value="Apr">4月</option>
|
||||
<option value="May">5月</option>
|
||||
<option value="Jun">6月</option>
|
||||
<option value="Jul">7月</option>
|
||||
<option value="Aug">8月</option>
|
||||
<option value="Sep">9月</option>
|
||||
<option value="Oct">10月</option>
|
||||
<option value="Nov">11月</option>
|
||||
<option value="Dec">12月</option>
|
||||
</select>
|
||||
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
|
||||
<option value="1">
|
||||
1日</option>
|
||||
<option value="2">
|
||||
2日</option>
|
||||
<option value="3">
|
||||
3日</option>
|
||||
<option value="4">
|
||||
4日</option>
|
||||
<option value="5">
|
||||
5日</option>
|
||||
<option value="6">
|
||||
6日</option>
|
||||
<option value="7">
|
||||
7日</option>
|
||||
<option value="8">
|
||||
8日</option>
|
||||
<option value="9">
|
||||
9日</option>
|
||||
<option value="10">
|
||||
10日</option>
|
||||
<option value="11">
|
||||
11日</option>
|
||||
<option value="12">
|
||||
12日</option>
|
||||
<option value="13">
|
||||
13日</option>
|
||||
<option value="14">
|
||||
14日</option>
|
||||
<option value="15">
|
||||
15日</option>
|
||||
<option value="16">
|
||||
16日</option>
|
||||
<option value="17">
|
||||
17日</option>
|
||||
<option value="18">
|
||||
18日</option>
|
||||
<option value="19">
|
||||
19日</option>
|
||||
<option value="20">
|
||||
20日</option>
|
||||
<option value="21">
|
||||
21日</option>
|
||||
<option value="22">
|
||||
22日</option>
|
||||
<option value="23">
|
||||
23日</option>
|
||||
<option value="24">
|
||||
24日</option>
|
||||
<option value="25">
|
||||
25日</option>
|
||||
<option value="26">
|
||||
26日</option>
|
||||
<option value="27">
|
||||
27日</option>
|
||||
<option value="28">
|
||||
28日</option>
|
||||
<option value="29">
|
||||
29日</option>
|
||||
<option value="30">
|
||||
30日</option>
|
||||
<option value="31">
|
||||
31日</option>
|
||||
</select>
|
||||
|
||||
<a href="javascript:void(null)" onclick="showCalendar1()">
|
||||
<img id="dateLink1" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="container1" style="position:absolute;display:none"></div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
<?php echo yadl_spaceid( '792401524' ); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
YAHOO.widget.Calendar2up_JP_Cal = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.init(id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_JP_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
|
||||
|
||||
YAHOO.widget.Calendar2up_JP_Cal.prototype.customConfig = function() {
|
||||
this.Config.Locale.MONTHS_SHORT = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
|
||||
this.Config.Locale.MONTHS_LONG = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
|
||||
this.Config.Locale.WEEKDAYS_1CHAR = ["日", "月", "火", "水", "木", "金", "土"];
|
||||
this.Config.Locale.WEEKDAYS_SHORT = ["日", "月", "火", "水", "木", "金", "土"];
|
||||
this.Config.Locale.WEEKDAYS_MEDIUM = ["日", "月", "火", "水", "木", "金", "土"];
|
||||
this.Config.Locale.WEEKDAYS_LONG = ["日", "月", "火", "水", "木", "金", "土"];
|
||||
|
||||
this.Config.Options.START_WEEKDAY = 1;
|
||||
}
|
||||
|
||||
/**********************************/
|
||||
|
||||
YAHOO.widget.Calendar2up_JP = function(id, containerId, monthyear, selected) {
|
||||
if (arguments.length > 0)
|
||||
{
|
||||
this.buildWrapper(containerId);
|
||||
this.init(2, id, containerId, monthyear, selected);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.Calendar2up_JP.prototype = new YAHOO.widget.Calendar2up();
|
||||
|
||||
YAHOO.widget.Calendar2up_JP.prototype.constructChild = function(id,containerId,monthyear,selected) {
|
||||
var cal = new YAHOO.widget.Calendar2up_JP_Cal(id,containerId,monthyear,selected);
|
||||
return cal;
|
||||
};
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,80 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Mix/Max Implementation</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
|
||||
YAHOO.example.calendar.cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Future-Only Single-Select Implementation</h4>
|
||||
|
||||
<p>To construct a calendar where the user can only select future dates, the code would read as follows:</p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var cal1;
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
|
||||
cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
|
||||
|
||||
<p>Notice that we're setting the minimum date to tomorrow's date by adding one day to a newly instantiated date (using the DateMath helper class) and setting it into the calendar's minDate property. cal1.maxDate remains null since there is no restriction on how far into the future the user can make selections.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,72 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Multi-Select Implementation</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1", "cal1Container");
|
||||
YAHOO.example.calendar.cal1.Options.MULTI_SELECT = true;
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Simple Multi-Select Implementation</h4>
|
||||
|
||||
<p>This implementation modifies the <a href="../default/index.html">default Calendar</a> to allow for selection of multiple values. This is accomplished by simply changing an option in the calendar configuration options: </p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var cal1;
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
|
||||
cal1.Options.MULTI_SELECT = true;
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
</div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,85 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Multi-Select 2-up Implementation</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","cal1Container");
|
||||
|
||||
var customConfig = function() {
|
||||
this.Options.MULTI_SELECT = true;
|
||||
}
|
||||
|
||||
YAHOO.example.calendar.cal1.setChildFunction("customConfig", customConfig);
|
||||
YAHOO.example.calendar.cal1.callChildFunction("customConfig");
|
||||
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Multi-Select 2-up Implementation</h4>
|
||||
|
||||
<p>To allow for multiple selections on a 2-up Calendar, use the following code:</p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var cal1;
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar2up("cal1","cal1Container");
|
||||
|
||||
var customConfig = function() {
|
||||
this.Options.MULTI_SELECT = true;
|
||||
}
|
||||
|
||||
cal1.setChildFunction("customConfig", customConfig);
|
||||
cal1.callChildFunction("customConfig");
|
||||
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1"><div id="cal1Container"></div></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="cal1Container" style="position:absolute;left:50px;top:400px"></div>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,90 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Custom Renderer Example</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<style>
|
||||
.yui-calendar td.holiday {
|
||||
background-color:yellow;
|
||||
font-weight:bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
YAHOO.example.calendar.renderHoliday = function(workingDate, cell) {
|
||||
YAHOO.util.Dom.addClass(cell, "holiday");
|
||||
}
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","1/2006");
|
||||
YAHOO.example.calendar.cal1.addRenderer("12/25,1/1", YAHOO.example.calendar.renderHoliday);
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Holiday Renderer Implementation</h4>
|
||||
|
||||
<p>Here is an example of how to create renderers to format specific holidays with a special style:</p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var cal1;
|
||||
|
||||
var renderHoliday = function(workingDate, cell) {
|
||||
YAHOO.util.Dom.addClass(cell, "holiday");
|
||||
}
|
||||
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
|
||||
cal1.addRenderer("12/25,1/1", renderHoliday);
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Date Restriction Example</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","2/2006");
|
||||
YAHOO.example.calendar.cal1.addRenderer("2/28/2006",YAHOO.example.calendar.cal1.renderBodyCellRestricted);
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Date Restriction Implementation</h4>
|
||||
|
||||
<p>This example shows how to restrict selection of a specific date:</p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var cal1;
|
||||
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
|
||||
cal1.addRenderer("2/28/2006",cal1.renderBodyCellRestricted);
|
||||
cal1.render();
|
||||
}
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 94 B |
|
Before Width: | Height: | Size: 88 B |
|
|
@ -1,159 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Yahoo! Calendar Control - Row Highlight Example</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
||||
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
||||
|
||||
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
||||
|
||||
<style>
|
||||
/* highlight the whole row */
|
||||
.yui-calendar tr.hilite-row td.calcell {
|
||||
background-color:yellow;
|
||||
}
|
||||
|
||||
/* highlight the current cell in the standard highlight color */
|
||||
.yui-calendar tr.hilite-row td.calcellhover {
|
||||
cursor:pointer;
|
||||
color:#FFF;
|
||||
background-color:#FF9900;
|
||||
border:1px solid #FF9900;
|
||||
}
|
||||
|
||||
/* make sure out of month cells don't highlight too */
|
||||
.yui-calendar tr.hilite-row td.calcell.oom {
|
||||
cursor:default;
|
||||
color:#999;
|
||||
background-color:#EEE;
|
||||
border:1px solid #E0E0E0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
YAHOO.namespace("example.calendar");
|
||||
|
||||
function init() {
|
||||
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
|
||||
|
||||
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
|
||||
YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
|
||||
var cell = this;
|
||||
var row = cell.parentNode;
|
||||
|
||||
YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
|
||||
YAHOO.util.Dom.addClass(row, "hilite-row");
|
||||
}
|
||||
|
||||
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
|
||||
YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
|
||||
var cell = this;
|
||||
var row = cell.parentNode;
|
||||
|
||||
YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
|
||||
YAHOO.util.Dom.removeClass(row, "hilite-row");
|
||||
}
|
||||
|
||||
YAHOO.example.calendar.cal1.render();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<img id="logo" src="../img/logo.gif"/>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Calendar Control</h3>
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<h4>Row Highlight Implementation</h4>
|
||||
|
||||
<p>This example shows how to highlight the row of the current hover date, using CSS and some minor JavaScript event changes:</p>
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
<style>
|
||||
/* highlight the whole row */
|
||||
.yui-calendar tr.hilite-row td.calcell {
|
||||
background-color:yellow;
|
||||
}
|
||||
|
||||
/* highlight the current cell in the standard highlight color */
|
||||
.yui-calendar tr.hilite-row td.calcellhover {
|
||||
cursor:pointer;
|
||||
color:#FFF;
|
||||
background-color:#FF9900;
|
||||
border:1px solid #FF9900;
|
||||
}
|
||||
|
||||
/* make sure out of month cells don't highlight too */
|
||||
.yui-calendar tr.hilite-row td.calcell.oom {
|
||||
cursor:default;
|
||||
color:#999;
|
||||
background-color:#EEE;
|
||||
border:1px solid #E0E0E0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
var cal1;
|
||||
|
||||
function init() {
|
||||
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
|
||||
|
||||
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
|
||||
cal1.doCellMouseOver = function(e, cal) {
|
||||
var cell = this;
|
||||
var row = cell.parentNode;
|
||||
|
||||
YAHOO.widget.Calendar_Core.prependCssClass(this, cal.Style.CSS_CELL_HOVER);
|
||||
YAHOO.widget.Calendar_Core.prependCssClass(row, "hilite-row");
|
||||
}
|
||||
|
||||
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
|
||||
cal1.doCellMouseOut = function(e, cal) {
|
||||
var cell = this;
|
||||
var row = cell.parentNode;
|
||||
|
||||
YAHOO.widget.Calendar_Core.removeCssClass(this, cal.Style.CSS_CELL_HOVER);
|
||||
YAHOO.widget.Calendar_Core.removeCssClass(row, "hilite-row");
|
||||
}
|
||||
|
||||
cal1.render();
|
||||
}
|
||||
</script>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="column right">
|
||||
<div style="margin-left:auto;margin-right:auto;width:150px">
|
||||
<div id="cal1Container"></div>
|
||||
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
||||
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
||||
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||