Calendar Control - 2-Up Japanese Implementation : Calendar International : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » 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 = ["1u6708""2u6708""3u6708""4u6708""5u6708""6u6708""7u6708""8u6708""9u6708""10u6708""11u6708""12u6708"];
      this.Config.Locale.MONTHS_LONG = ["1u6708""2u6708""3u6708""4u6708""5u6708""6u6708""7u6708""8u6708""9u6708""10u6708""11u6708""12u6708"];
      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>
           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Calendar International