JavaScript DHTML/GUI Components/Calendar International
Calendar Control - 2-Up German Implementation
<source lang="html4strict">
<!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="./examples/calendar/img/ytravel.gif" id="bgImg">
<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="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/> </a>
<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="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> <?php echo yadl_spaceid( "792401513" ); ?> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - 2-Up Japanese Implementation
<source lang="html4strict">
<!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="./examples/calendar/intl_japan/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">
<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="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/> </a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> <?php echo yadl_spaceid( "792401524" ); ?> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
