目次
- はじめに
- 実装方法
- まとめ
はじめに
アプリを使っていて、生年月日の入力などカレンダーを選択して日付を指定する場面があるかと思います。
今回はVisualizerのカレンダーWidgetを使って特定の範囲でのカレンダーを表示し、
特定の日付の選択を無効にするための実装方法をご紹介します
【完成イメージ】
実装方法
1.プロジェクトにカレンダーWidgetを追加
まずはじめにカレンダーWidgetを画面に追加します。
今回はこのように設置しました。
2.無効化した日付に設定するスキンを作成
次に日付の選択を無効にするためのカレンダースキンを設定します。
今回は灰色になるよう設定しました。
3.有効化/無効化にするメソッドを作成
それでは、実際に処理を記述していきましょう。
今回は、2021年の1月〜3月までのカレンダーを表示し、
2021/1/20,25,2021/2/10,2021/3/15の日付を無効化にしたいため以下のように作成しました。
onPostShow: function(){
this.view.calDemo.validStartDate = [01, 01, 2021];
this.view.calDemo.validEndDate = [31, 03, 2021];
// 休日のリストをセットする: [dd/mm/yyy]
let values = [
[20, 01, 2021],
[25, 01, 2021],
[10, 02, 2021],
[15, 03, 2021]
];
// 日付を無効にする
this.view.calDemo.setEnabled(values, '', false);
// 無効化した日付のskinを設定する
this.view.calDemo.setDatesSkin(values, "sknDisable");
}
それぞれ紹介していきます。
-
validStartDate / validEndDate:
validStartDateでカレンダーの始まりを、validEndDateでカレンダーの終わりを設定でき、
この範囲内の日付を有効化することができます。
今回は2021年の1月〜3月までのカレンダーとして設定したため、それ以前の2020年12月の日付は以下のように無効化されます。
| 2020/12(範囲外) | 2021/01(範囲内) |
|---|---|
 |
 |
-
values : 無効にしたい日付をリストで保持します。
[dd, mm, yyyy]の形式で日付を指定してください。 -
setEnabled(dates, "skin", enabled):
指定した日付の有効 / 無効の変更と、スキンの変更をすることができます。
この有効化/無効化は、前述したvalidStartDate / validEndDateで設定したカレンダーの範囲内で行われます。
| パラメータ | 説明 |
|---|---|
| dates -オプション | {dd、mm、yyyy}の規則に従った形式で日付を指定します。 |
| skin -オプション | 有効または無効な日付を表すために使用されるスキンを指定します。 |
| enabled | 日付を有効 / 無効にするかをtrue / falseで指定します。 |
※Windows および SPAでのみ使用可
-
setDatesSkin(dates, "skin"):
指定した日付のスキンを変更することができます。以下はパラメータです。
| パラメータ | 説明 |
|---|---|
| dates | {dd、mm、yyyy}の規則に従った形式で日付を指定します。 |
| skin | 有効または無効な日付を表すために使用されるスキンを指定します。 |
今回はvalueに設定した日付をsetEnabledで無効にして、
setDatesSkinで無効な日付のスキンを変更しています。
4. Actionの紐付け:
- frmDemoCalendar => Action => Edit.を選択
-
Invoke Function を選択して、onPostShowを設定します。
**こちらが作成したデモです**
2021/01/01 ~ 2021/03/31の範囲でカレンダーを表示し、
2021/01/20, 2021/01/25, 2021/02/10, 2021/03/15の日付を無効にしています。
無効になっている日付は、灰色の背景色が付いていて、非活性になっているためクリックできないことがわかるかと思います。
まとめ
今回はカレンダーWidgetで、日付を無効にする方法をご紹介いたしました。
是非使ってみてくださいね！
参考:
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#Calendar.htm
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#Calendar_Methods.htm
https://basecamp.force.com/konycommunity/s/question/0D52K00003jcCMlSAM/how-to-disable-holidays-in-calendar-widget