カレンダー表示を行うカレンダーコンポーネント（その5）「マーカーを付ける」
カレンダーコンポーネントの使い方、第五弾です。今回はカレンダーの日付にマーキングをします。デモはこちらにあります。実際に動いているところは下記の画像で確認できます。
日付を指定しておいて、マーカーを付けるボタンをクリックすると日付のところにマークが付きます。
HTMLの形
HTMLは次のようになります。マーカーをつけるためのボタンを設置します。
| <div id="container"></div> | |
| <p> | |
| <button id="marker">マーカーをつける</button> | |
| </p> |
JavaScript側の処理
そしてJavaScritp側ではカレンダーコンポーネントの読み込みと、ボタンを押した時の処理を実装します。
| $(function(){ | |
| var disableDates = []; | |
| var mainController = { | |
| __name : 'h5.ui.container.MainController', | |
| calendarController: h5.ui.components.Calendar, | |
| __meta : { | |
| calendarController: { | |
| rootElement: '#container' | |
| }, | |
| }, | |
| __init: function(){ | |
| this.$find(".select:first").attr("checked", true); | |
| }, | |
| '#marker click': function(context, $el) { | |
| var dates = this.calendarController.getSelectedDate(); | |
| for (var i=0; i<dates.length; i++) { | |
| this.calendarController.setMarker(dates[i], true); | |
| } | |
| }, | |
| }; | |
| h5.core.controller('body', mainController); | |
| }); |
ボタンを押した時の処理は次のようになります。calendarController.setMarkerに日付と、マーカーをつけるか否かを二つ目の引数で指定します。日付の選択は複数可能なので、配列を順番に処理しています。
| '#marker click': function(context, $el) { | |
| var dates = this.calendarController.getSelectedDate(); | |
| for (var i=0; i<dates.length; i++) { | |
| this.calendarController.setMarker(dates[i], true); | |
| } | |
| }, |
今回のデモはこちらで確認できます。カレンダーの中で特別な日付にマーカーを付けたり、データの有無をフラグで示したいと言った時に使えるでしょう。
コメントは受け付けていません。