コンテンツへスキップ

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

by : 2017/11/02

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

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

作り方

HTMLの記述

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の実装

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

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

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