Mega Code Archive

 
Categories / JavaScript DHTML / GUI Components
 

Calendar Control - 2-Up German Implementation

<!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"> <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="./examples/calendar/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="./examples/calendar/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>                     yui.zip( 3,714 k)