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




本ブログ(FC2)にYahoo! User Interface Library(YUI)が提供するカレンダーで提供されているオプションを指定してカレンダーをカスタマイズしてみます。


参考サイト


【AJAX】YUIカレンダーをブログに表示

YUIカレンダーの表示サンプル カスタマイズ















YUIカレンダーオブジェクトの生成



var options1 = {
/* 初期表示(デフォルト)される年月を指定(形式:mm/yyyy)*/
pagedate:"6/2008",
/*選択できる最小値指定(2008年6月5日以前の日付は選択出来ません。)*/
mindate:"5/06/2008",
/*選択できる最大値指定(2009年6月5日以降の日付は選択出来ません。)*/
maxdate:"5/06/2009",
/*カレンダーに表示されるタイトルを設定*/
title:"YUIカレンダー",
/*閉じるボタンを設定*/
close:true,
/*複数選択設定(1クリックで選択状態、選択状態を1クリックで選択解除)*/
multi_select:true,
/*年月入力機能(年月部分をクリックで入力欄が表示されEnterキーで入力情報がカレンダーに反映される。)*/
navigator:true,
/*曜日を表示・非表示*/
show_weekdays:true,
/*月の表示設定(short,medium,longのいづれかを設定)*/
locale_months:"long",
/*曜日の表示設定(1char,short,medium,longのいづれかを設定)*/
locale_weekdays:"medium",
/*カレンダーの左端曜日設定(0:日曜~6:土曜)*/
start_weekday:0,
/*選択月の前に前月の何週かを表示する設定*/
show_week_header:true,
/*選択月の後に次月の何週かを表示する設定*/
show_week_footer:true,
/*falseの場合、月の最大週6週表示となるが、trueにした場合最小週表示となる*/
hide_blank_weeks:true
};
var cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",options);
cal1.render();


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


<div class="yui-skin-sam">
<span class="yuibutton"><div id="cal1Container"></div>
</span>
</div>
少しでも参考になれば応援お願いします。












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