Skip to main content

 

UIを設計する

 

OutSystems

Calendarパターン

Calendarパターンを使用すると、 フラットなUIの日時ピッカーをインラインで画面に表示できます。 イベントがある日付のリストを受け取ることができ、日付の範囲内で選択することができます。カレンダーはPikaday.jsライブラリを使用して作成されています。

このパターンを使用すると、様々なデバイスで、1行あたりのアイテム数が異なる要素のリストを並べて表示できます。

Calendarパターンの使用方法

このブロック内の静的データまたはListウィジェットを使用して、Galleryパターンでアイテムを表示できます。

1. カレンダーをページにドラッグすると、イベントを作成するように促すプロンプトが表示されます。

2. 選択された日付にアクセスするには、startDateへのAssignを作成する必要があります(SelectIntervalが_False_の場合)。

3. 変数PickedDateのデフォルト値を「CurrDateTime()」に設定します。

結果:

選択した日のイベントを一覧表示する

1. イベントのリストを配置する領域を設定します。

2. DateTimeアトリビュートのエンティティを作成します。

3. マッピングする適切なアトリビュートを使用して、eventListのEventListパラメータにエンティティを設定します。

4. ページにリストを追加します。

5. 新しいローカル変数を作成します。

6. Eventsに対する別のAggregateを取得し、Aggregateにフィルタ「DateTimeToDate(Events.DateTime) = Date」を設定します。

結果:

入力パラメータ

入力名 説明 デフォルト値
EventList 日付をイベント日として強調表示するために使用するDateTimeレコードのリストを受け取ります。 なし
MinDate この日付より前の日は無効になります。 なし
MaxDate この日付より後の日は無効になります。 なし
InitialDate カレンダーの初期選択日。未設定の場合は、デフォルトで現在の日付になります。 現在の日付
ShowWeekNumbers カレンダーの左側に週番号を表示します。 True
FirstWeekDay 最初に表示する曜日を定義します。
0: 日曜日
1: 月曜日
2: 火曜日
3: 水曜日
4: 木曜日
5: 金曜日
6: 土曜日
1
ShowTime カレンダーの下に時刻ピッカーを表示します。 False
Show24HourFormat 時刻ピッカーを24時間形式に変更します。 True
DisabledDaysList カレンダーで無効となるDateTimeレコードのリストを受け取ります。このパラメータが未設定の場合は、MinDateとMaxDateの間のすべての日付けが有効になります。デフォルト値はありません。 なし
DisabledWeekDays 無効な曜日を含む文字列。文字列が空の場合は、すべての曜日が有効です。たとえば、日曜日と金曜日が無効である場合は「0,6」です。
0: 日曜日
1: 月曜日
2: 火曜日
3: 水曜日
4: 木曜日
5: 金曜日
6: 土曜日
なし
SelectInterval 2つの日付の間を選択することができます。この場合、ブロックのイベント「On Select」は両方のパラメータの値を持ちます。 False

イベント

イベント名 説明 必須
OnSelect カレンダーの日付が選択された後に実行するアクション。SelectIntervalが有効になっている場合、両方のパラメータが値を返します。有効になっていない場合、StartDateのみが値を持ちます。 True

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
td .is-selected クリックされた日付。
td .is-startrange SelectIntervalが_True_の場合、このクラスは範囲の開始値になります。

サンプル

以下は、Calendarパターンを使用したサンプルです。

または、パターンを単独で使用することもできます。

  • Was this article helpful?