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