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

by moongift : 2017/06/20

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

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

HTMLの形

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

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

view raw

index.js

hosted with ❤ by GitHub

そして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

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

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