Calendar Control - 2-Up German Implementation : Calendar International « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Calendar International 
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?
  </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?
  </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)
Related examples in the same category
1. Calendar Control - 2-Up Japanese Implementation
w__w__w._j__a_v_a__2___s_._c__o___m___ | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.