カレンダー表示を行うカレンダーコンポーネント(その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); | |
} | |
}, |
今回のデモはこちらで確認できます。カレンダーの中で特別な日付にマーカーを付けたり、データの有無をフラグで示したいと言った時に使えるでしょう。
コメントは受け付けていません。