Blog Infomation
Monthly
New Article
09/08
pad twitpic memo
08/17
CentOS6 setup memo
06/30
曲紹介が長くなる･･･
02/04
水の歴龍 - 蒼の孤島 攻略
01/13
炎の歴龍 - 紅の孤島 攻略
01/07
パズドラ始めました(去年の話)
09/17
club nintendo 2012
05/27
6/9にむけてラフマニノフ練習中
05/19
独自ドメイン設定メモ2
02/13
yui3でカレンダー
12/13
DS DQ5-5
11/20
ハワードのリスト独奏曲全集セット
11/18
TwitterProfileMemo
11/15
足立の花火2011
11/05
レモン家鍋
11/04
誕生25周年記念ドラゴンクエスト展
08/28
PCに入ってるソフトmemo
08/21
FFT for iphone (PSP)
08/01
DS版DQ4タイムアタック
07/18
DS DQ5-4
07/18
DS DQ5 -3
07/03
DS版DQ6クリア後メモ
06/19
トルネコ一発素もぐりクリア
04/03
原発とエネルギーについて
Recent Comment
Categories
＜
[03/04]
Haorutia
@ＭＰ３音質チェック！
＞
＜
[02/25]
SgjvHo
@PhotoShifter
＞
＜
[02/25]
SmsQY
@PhotoShifter
＞
＜
[02/24]
WTeMA
@DS版DQ4タイムアタック
＞
＜
[02/24]
qcCZQ
@DS版DQ4タイムアタック
＞
＜
[02/23]
AvNMHf
@DS版DQ4タイムアタック
＞
＜
[02/23]
xgmjAJ
@DS版DQ4タイムアタック
＞
＜
[02/22]
OBareM
@DS版DQ4タイムアタック
＞
＜
[02/22]
wodzez
@PhotoShifter
＞
＜
[02/22]
fVXYeriz
@PhotoShifter
＞
＜
[02/22]
FPQxMOPh
@DS版DQ4タイムアタック
＞
＜
[02/22]
TXszNkwu
@DS版DQ4タイムアタック
＞
＜
[02/22]
XaMQbz
@DS版DQ4タイムアタック
＞
＜
[02/22]
jQPOzSSo
@DS版DQ4タイムアタック
＞
＜
[02/22]
XpfSXG
@DS版DQ4タイムアタック
＞
＜
[02/22]
kGoiBQGd
@DS版DQ4タイムアタック
＞
＜
[02/21]
XFEzXsX
@DS版DQ4タイムアタック
＞
＜
[02/21]
iDWQgLoM
@DS版DQ4タイムアタック
＞
＜
[02/21]
GsbnhD
@PhotoShifter
＞
＜
[02/21]
vnNxq
@DS版DQ4タイムアタック
＞
＜
[02/21]
VbkWZaEn
@DS版DQ4タイムアタック
＞
＜
[02/20]
yNArLEnE
@DS版DQ4タイムアタック
＞
＜
[02/20]
iCbDkM
@DS版DQ4タイムアタック
＞
＜
[02/20]
oOgXpHvl
@DS版DQ4タイムアタック
＞
＜
[02/20]
QUwKc
@PhotoShifter
＞
2012/02/13 (Mon) 00:08
/
Blog
/
YUIっていうJavascript/CSSのライブラリを使うと高度なものが簡単に出来るというメモ。
Example: Simple Calendar with Selection - YUI Library
http://yuilibrary.com/yui/docs/calendar/calendar-simple.html
YUI3でカレンダー書いてみて、土日の色を変える、選択した日を取得する簡単なサンプルコード
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
03/04 Haorutia
02/25 SgjvHo
02/25 SmsQY
02/24 WTeMA
02/24 qcCZQ
02/23 AvNMHf
02/23 xgmjAJ
02/22 OBareM
02/22 wodzez
02/22 fVXYeriz
02/22 FPQxMOPh
02/22 TXszNkwu
02/22 XaMQbz
02/22 jQPOzSSo
02/22 XpfSXG
02/22 kGoiBQGd
02/21 XFEzXsX
02/21 iDWQgLoM
02/21 GsbnhD
02/21 vnNxq
02/21 VbkWZaEn
02/20 yNArLEnE
02/20 iCbDkM
02/20 oOgXpHvl
02/20 QUwKc