Calendar Control - 2-Up Japanese 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 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>
           
       
yui.zip( 3,714 k)
Related examples in the same category
1. Calendar Control - 2-Up German Implementation
ww___w__.ja___v___a___2_s__.__co_m | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.