カレンダー表示を行うカレンダーコンポーネント（その4）「日付を選択できない状態にする」
カレンダーコンポーネントの使い方、第四弾です。今回はカレンダーの日付を選択できない状態に変更します。
実際に動いているデモはこちらにあります。
使い方
HTMLは次のようになります。ステータスを変更するためのボタンを追加しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"></div> | |
| <p> | |
| <button id="disable">無効にする</button> | |
| <button id="enable">すべて有効にする</button> | |
| </p> |
JavaScriptは次のようになります。選択されている日付を取得し、それを setSelectable に渡しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#disable click': function(context, $el) { | |
| var dates = this.calendarController.getSelectedDate(); | |
| disableDates = disableDates.concat(dates); | |
| this.calendarController.setSelectable(dates, false); | |
| }, |
解除する場合には、予め無効にした日付を変数に入れておき、それを setSelectable(dates, true) とすればOKです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#enable click': function(context, $el) { | |
| this.calendarController.setSelectable(disableDates, true); | |
| disableDates = []; | |
| } |
予約の埋まった日付をサーバから取得したり、動的に変更したい場合に便利です。お店のお休みであったり、営業外の日を設定するなど様々な使い方が考えられるでしょう。
hifive開発者ブログ 
コメントは受け付けていません。