忍者ブログ
シフラ,超絶技巧練習曲,ピアノ,ロマン派のエチュード,かっこいい曲,PC便利系,音楽系,動画系,youtube,blog系など
Blog Infomation





Today / Yesterday
/



 フィードメーター - The J.Mazeppa


 
Monthly
Recent Comment
Infomation
Circle Chat
Access Rank
KeyWord Rank
Weather & \\ vs $

-天気予報コム-

購入時2005/11は106.1
2024/03/19 (Tue) 20:50 / /
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


2012/02/13 (Mon) 00:08 / /
YUIっていうJavascript/CSSのライブラリを使うと高度なものが簡単に出来るというメモ。

Example: Simple Calendar with Selection - YUI Library
http://yuilibrary.com/yui/docs/calendar/calendar-simple.html

YUI3でカレンダー書いてみて、土日の色を変える、選択した日を取得する簡単なサンプルコード


<!docutype html>
<html>
<head>
<title>YUI sample test</title>
<style>
.red  {color: #f00;}
.blue {color: #00f;}
</style>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="demo" class="yui3-skin-sam yui3-g">
  <div id="leftcolumn" class="yui3-u">
     <!-- Container for the calendar -->
     <div id="mycalendar"></div>
  </div>
  <div id="rightcolumn" class="yui3-u">
   <div id="links" style="padding-left:20px;">
      Selected date: <span id="selecteddate"></span>
   </div>
  </div>
</div>
<script type="text/javascript">

YUI().use('calendar', 'datatype-date',  function(Y) {

    var da = new Date();
    var dy = da.getFullYear();
    var dm = da.getMonth() + 1;
//    if (dm < 10) { dm = "0" + dm; }
    var dd = da.getDate();
//    if (dd < 10) { dd = "0" + dd; }

    var calendar = new Y.Calendar({
      contentBox: "#mycalendar",
      width:'300px',
      showPrevMonth: true,
      showNextMonth: true,
      date: new Date(dy, da.getMonth(), dd)
    }).render();

    Y.one("#selecteddate").setContent(dy + "-" + dm + "-" + dd );

    var rules = {
      "all": {
        "all": {
          "all": {
            "6": "all_saturdays",
            "0": "all_sundays"
          }
        }
      }
    };

    calendar.set("customRenderer", {
      rules: rules,
      filterFunction: function (date, node, rules) {
        if (Y.Array.indexOf(rules, 'all_sundays') >= 0) {
          node.addClass("red");
        } else if (Y.Array.indexOf(rules, 'all_saturdays') >= 0) {
          node.addClass("blue");
        }
      }
    });

    var dtdate = Y.DataType.Date;
    calendar.on("selectionChange", function (ev) {
      var newDate = ev.newSelection[0];
      Y.one("#selecteddate").setContent(dtdate.format(newDate));
    });
});
</script>
</body>
</html>


拍手[0回]




Selected date:

PR



▼Comment
   NAME:  TITLE:  COLOR:
   PASS:   URL:  EMAIL:
 COMMENT!: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
     
△▲最上部へ戻る▲△ △▲プラグインへ▲△