コンテンツへスキップ

カレンダー表示を行うカレンダーコンポーネント(その5)「マーカーを付ける」

by : 2017/06/20

カレンダーコンポーネントの使い方、第五弾です。今回はカレンダーの日付にマーキングをします。デモはこちらにあります。実際に動いているところは下記の画像で確認できます。

日付を指定しておいて、マーカーを付けるボタンをクリックすると日付のところにマークが付きます。

HTMLの形

HTMLは次のようになります。マーカーをつけるためのボタンを設置します。

<div id="container"></div>
<p>
<button id="marker">マーカーをつける</button>
</p>

view raw
index.js
hosted with ❤ by GitHub

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);
});

view raw
index.html
hosted with ❤ by GitHub

ボタンを押した時の処理は次のようになります。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);
}
},

view raw
index.js
hosted with ❤ by GitHub


今回のデモはこちらで確認できます。カレンダーの中で特別な日付にマーカーを付けたり、データの有無をフラグで示したいと言った時に使えるでしょう。

CalendarController

From → hifive, HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。