JavaScript DHTML/GUI Components/Calendar International

Материал из Web эксперт
Версия от 07:44, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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&auml;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&auml;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>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Calendar Control - 2-Up Japanese Implementation

<!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 = "&#x65E5;&#x4ED8;&#x3092;&#x9078;&#x3073;&#x306A;&#x3055;&#x3044;";
      
      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&#x5E74;</option>
    <option value="2006">2006&#x5E74;</option>
    <option value="2007">2007&#x5E74;</option>
    <option value="2008">2008&#x5E74;</option>
    <option value="2009">2009&#x5E74;</option>
    <option value="2010">2010&#x5E74;</option>
    <option value="2011">2011&#x5E74;</option>
  </select>
  <select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
  <option value="Jan">1&#x6708;</option>
  <option value="Feb">2&#x6708;</option>
  <option value="Mar">3&#x6708;</option>
  <option value="Apr">4&#x6708;</option>
  <option value="May">5&#x6708;</option>
  <option value="Jun">6&#x6708;</option>
  <option value="Jul">7&#x6708;</option>
  <option value="Aug">8&#x6708;</option>
  <option value="Sep">9&#x6708;</option>
  <option value="Oct">10&#x6708;</option>
  <option value="Nov">11&#x6708;</option>
  <option value="Dec">12&#x6708;</option>
  </select>
  <select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
  <option value="1">
  1&#x65E5;</option>
  <option value="2">
  2&#x65E5;</option>
  <option value="3">
  3&#x65E5;</option>
  <option value="4">
  4&#x65E5;</option>
  <option value="5">
  5&#x65E5;</option>
  <option value="6">
  6&#x65E5;</option>
  <option value="7">
  7&#x65E5;</option>
  <option value="8">
  8&#x65E5;</option>
  <option value="9">
  9&#x65E5;</option>
  <option value="10">
  10&#x65E5;</option>
  <option value="11">
  11&#x65E5;</option>
  <option value="12">
  12&#x65E5;</option>
  <option value="13">
  13&#x65E5;</option>
  <option value="14">
  14&#x65E5;</option>
  <option value="15">
  15&#x65E5;</option>
  <option value="16">
  16&#x65E5;</option>
  <option value="17">
  17&#x65E5;</option>
  <option value="18">
  18&#x65E5;</option>
  <option value="19">
  19&#x65E5;</option>
  <option value="20">
  20&#x65E5;</option>
  <option value="21">
  21&#x65E5;</option>
  <option value="22">
  22&#x65E5;</option>
  <option value="23">
  23&#x65E5;</option>
  <option value="24">
  24&#x65E5;</option>
  <option value="25">
  25&#x65E5;</option>
  <option value="26">
  26&#x65E5;</option>
  <option value="27">
  27&#x65E5;</option>
  <option value="28">
  28&#x65E5;</option>
  <option value="29">
  29&#x65E5;</option>
  <option value="30">
  30&#x65E5;</option>
  <option value="31">
  31&#x65E5;</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 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>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/GUI_Components/Calendar_International&oldid=4133»