Facebook Twitter Google Maps RSS
Home webサイト Yahoo YUI calendar カレンダーを使いこなす
formats

Yahoo YUI calendar カレンダーを使いこなす

こんにちは。

もう12月で来年のカレンダーを購入する時期となりました。

ですので今日はカレンダーについてです。

Web画面で日付を検索する場合や日付を登録する場合に、カレンダーを表示させて日付を選択する。

よくあることです。

Web開発でこのカレンダーの機能実装を手助けしてくれるものの一つとして、Yahoo! User Interface Library(通称YUI)があります。

YUIはDOMスクリプティングやDHTMLやAJAXを利用していて、JavaScriptとCSSで構成されています。

YUIはBSDライセンス(英語)のもと配布されており、どなたでも無償で使用できます。

拡張性が高いので自分の好みのものを実装することが可能です。

さて、実装してみます。

まずはほぼ初期状態のもの。

英語表記で日本人の私にとっては使いにくいです。

まずは日本語表記にしてみましょう。

お、日本語だと分かりやすいですね。

カレンダーにメッセージなんかも追加して、曜日を月曜日始まりにしてみよう。

うんうん、理想に近づいてきました。

でももっと月を表示させたい。。。

2ヶ月分も見れるとまたいいですねー。

あ!大事なことを忘れてました、土日の色分けがされていなかったですね。

最後に見た目を多少整えて仕上げです!

おぉ、それっぽくなりました。

日付を選択するとテキストに入力されます。

今回使用してみて、色々なパターンのものが作れそうなことが分かりました。

これだけ自由にカスタマイズできるとお客様の要望にも応えやすそうですね。

YUIはカレンダー以外にも便利なUIがあり、ブラウザに関係なく使えそうですので興味を持たれた方は色々調べてみてはいかがでしょうか?

ちなみに今回使用したのはver2.4.1で、最新版はもっと新しいものがあります。

 

ではまた~。

Webサイト開発実績はこちら

Tags: ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*