カレンダー表示を行うカレンダーコンポーネント（その1）「基本的な使い方」
業務要件でカレンダーを使いたいという話はよくあります。プロジェクトの日付を出したり、レストランや美容院、ホテルなどの予約を出すようなケースも使われるでしょう。しかしいざ作ろうと思うと日付の曜日に合わせた表示や別な月への移動などは面倒な処理です。
そこでhifiveのカレンダーコンポーネントを紹介します。これを使えばカスタマイズも容易なカレンダーが素早く実装できます。
実際に動いているデモはこちらにあります。ぜひご覧ください。
使い方
まず基本になるHTMLですが、たった1行です。
| <div id="container"></div> |
次にカレンダーの表示を行うJavaScriptは次のように書きます。
| $(function(){ | |
| var mainController = { | |
| __name : 'h5.ui.container.MainController', | |
| calendarController: h5.ui.components.Calendar, | |
| __meta : { | |
| calendarController: { | |
| rootElement: '#container' | |
| }, | |
| }, | |
| __init: function(){ | |
| } | |
| }; | |
| h5.core.controller('body', mainController); | |
| }); |
これだけでカレンダーが表示できます。
標準で用意されている機能
この標準のままでは、日付の選択が可能です。
さらに別な月のカレンダーに移動ができます。
標準の機能だけで使うことはほぼないと思います。次回以降、カスタマイズ法を紹介します。
コメントは受け付けていません。