カレンダーコンポーネントで特定の日付にラベルを追加する

by moongift : 2017/11/02

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の日付に対してラベルをつける方法です。

動作している様子は次のようになります。また、こちらでデモを確認できます。

作り方

HTML側ではラベルに使う文字列と、イベントを実行するボタンを配置します。

	<div id="container"></div>
	<p>
	<input type="text" id="txtContentDate" size="40" />
	<input type="button" id="btnSetTextDate" value="設定">
	</p>

view raw

gistfile1.txt

hosted with ❤ by GitHub

JavaScript側の実装です。this.calendarController.setTooltip を使って、日付と表示するラベルを指定します。

	'#btnSetTextDate click': function(){
	var dates = this.calendarController.getSelectedDate();
	var data = this.$find('#txtContentDate').val();
	for (var i=0; i<dates.length; i++) {
	this.calendarController.setTooltip(dates[i], data);
	}
	}

view raw

index.html

hosted with ❤ by GitHub

全体のJavaScriptは次のようになります。

	$(function(){
	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);
	},

	'#btnSetTextDate click': function(){
	var dates = this.calendarController.getSelectedDate();
	var data = this.$find('#txtContentDate').val();
	for (var i=0; i<dates.length; i++) {
	this.calendarController.setTooltip(dates[i], data);
	}
	}
	};

	h5.core.controller('body', mainController);

	});

view raw

index.js

hosted with ❤ by GitHub

覚えておくべき日付を説明とともに表示したり、データベースから日付データをカレンダーに載せるような使い方が考えられます。カレンダーは業務システムでもよく使われますのでhifiveのカレンダーコンポーネントを使いこなしてください。

From → hifive

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