上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




YUIを利用したカレンダーの表示


本ブログ(FC2)にYahoo! User Interface Library(YUI)が提供するカレンダーを表示してみます。



YUIカレンダーの表示サンプル














YUIカレンダーライブラリの読み込み



<link rel='stylesheet' type='text/css' href='http://yui.yahooapis.com/combo?2.6.0/build/calendar/assets/skins/sam/calendar.css' />
<script type='text/javascript' src='http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/calendar/calendar-min.js&2.6.0/build/dragdrop/dragdrop-min.js'></script>
<script type='text/javascript' src='http://blog-imgs-32.fc2.com/s/t/u/studynet/yui-calendar2.js'></script>

上記ライブラリは、
http://studynet.blog54.fc2.com/blog-entry-22.html
上記URLに表示している下記サイトの「Calendar Control」を押下した際に表示されるライブラリ群です。
http://developer.yahoo.com/yui/articles/hosting/?dragdrop#configure

YUIカレンダー読み込み設定



YAHOO.namespace("example.calendar");

YAHOO.example.calendar.init = function() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}

YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);

上記コードを記事内に埋め込みます。
※記事内にJavaScriptのコードを埋め込む場合、記事の編集画面の記事設定内にある「改行の扱い」を「HTMLタグのみ」にしてください。



YUIカレンダーオブジェクトの表示


<div class="yui-skin-sam">
<span class="yuibutton"><div id="cal1Container"></div>
</span>
</div>

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。