Skip to content

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

by : 2017/11/02

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

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

作り方

HTMLの記述

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

JavaScriptの実装

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

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


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

From → hifive

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

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