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