ユースケース開発Slateウィジェット時間

注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

時間

時間ウィジェットのカテゴリーには、次のウィジェットが含まれます。


カレンダーウィジェット

次のテーブルでは、カレンダーウィジェットで利用可能なプロパティの使用方法を詳しく説明します。

プロパティ

属性説明データ型必須変更方法
areEventsAllDay対応するイベントが終日イベントかどうかを決定するブール値の配列です。終日イベントは表示の「終日」セクションに表示され、開始時刻と終了時刻の範囲内に完全に収まる日にのみ表示されます。また、終日イベントを選択すると、開始時刻と終了時刻には調整後の時間境界が反映されます。例:「1月1日 03:00」から「1月3日 03:00」までの終日イベントは、「1月1日 00:00」から「1月3日 00:00」までとして表示されます。空のままにすると、イベントのデフォルトは All Day = false です。jsonいいえ直接編集
dateRangeEnabled現在の表示に対応する日付範囲をカレンダーのタイトルとして追加します。表示に応じて、現在表示されている日、週、または月になります。文字列はい直接編集
defaultDateページの読み込み時にカレンダーでデフォルトとして表示する日付です。空の文字列に設定すると、デフォルトの表示が「今日」になり、ページの読み込み時に範囲が現在の日付と一致します。文字列はいユーザーインタラクション
eventEnds各イベントの終了時刻です。jsonはい直接編集
eventNames各イベントに表示する名前です。jsonはい直接編集
eventSeriesスタイル設定のためにイベントを系列にグループ化するラベル(文字列)の配列です。空のままにすると、イベントはデフォルトのスタイルで表示されます。jsonいいえ直接編集
eventStarts各イベントの開始時刻です。jsonはい直接編集
pagingEnabled現在表示されている間隔単位で前後に移動するボタンと、現在の日付に戻るボタンを追加します。ブール値はい直接編集
pagingYearEnabled現在表示されている時間範囲を1年単位で前後に移動するためのボタンを追加します。ブール値はい直接編集
selectedIndexカレンダーで選択されているイベントのインデックスです。イベントが選択されていない場合は「null」です。数値はいユーザーインタラクション
viewDefaultアプリケーションの読み込み時に表示する表示形式(日、週、月)です。この表示で表示される日付は「defaultDate」の値によって決まります。デフォルトは「月」表示です。文字列はいユーザーインタラクション
viewType日と週のボタンが有効な場合に、それらのボタンでアクセスできる表示を制御します。種類を「リスト」に設定すると、イベントは開始時刻の順序ではなく、ウィジェットに指定された順序で項目のリストとして表示されます。種類を「時間」に設定すると、イベントは発生する時間帯にわたるブロックとして表示されます。表示形式は月表示には影響しません。文字列はい直接編集
viewSwitchingEnabled日/週/月の表示を切り替えるボタンを有効または無効にします。デフォルトでは、これらのボタンは有効です。ブール値はい直接編集

日付ピッカーウィジェット

次のテーブルでは、日付ピッカーウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後にいくつかの例を示します。

プロパティ

属性説明データ型必須変更方法
disabledユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値には通常、ブール値を生成するテンプレート式(例:「{{w1.on}}」)を使用します。ブール値はい直接編集
displayFormatピッカーの入力ボックスに選択内容を表示するための書式です。有効な moment.js の書式 ↗である必要があります。文字列いいえ直接編集
maxDate文字列形式で指定する、選択可能な最も遅い日付です。空欄のままにすると、デフォルトの最大日付(今年の12月31日)が使用されます。日付は ISO 8601 規格 ↗に従った書式にする必要があります。文字列いいえ直接編集
minDate文字列形式で指定する、選択可能な最も早い日付です。空欄のままにすると、デフォルトの最小日付(20年前の1月1日)が使用されます。日付は ISO 8601 規格 ↗に従った書式にする必要があります。文字列いいえ直接編集
placeholder日付が選択されていないときにプレースホルダーとして使用するテキストです。文字列はい直接編集
timeEnabled日付ピッカーとともに時刻ピッカーを表示するかどうかを指定します。ブール値はい直接編集
timePickerPrecision時刻ピッカーの精度を決定します。数値はい直接編集
value文字列形式の現在の選択内容です。文字列はいユーザーインタラクション
valueFormat「value」フィールドの出力文字列の書式です。有効な moment.js の書式 ↗である必要があります。値を指定しない場合、または null に設定した場合は、ISO 8601 の書式が使用されます。文字列いいえ直接編集

例

日付ピッカー

Copied!
1 2 3 4 5 6 { "disabled": false, "displayFormat": "MM/DD/YYYY", "timeEnabled": false, "value": "2014-09-10T05:00:00.000Z" }

時刻を有効にした日付ピッカー

Copied!
1 2 3 4 5 6 { "disabled": false, "timeEnabled": true, "value": "2014-09-10 13:00", "valueFormat": "YYYY-MM-DD HH:mm" }

デフォルト

Copied!
1 2 3 4 5 6 { "disabled": false, "timeEnabled": false, "value": "", "valueFormat": "YYYY-MM-DD" }

日付範囲ピッカーウィジェット

次のテーブルでは、日付範囲ピッカーウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後にいくつかの例を示します。

プロパティ

属性説明データ型必須変更方法
disabledユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値には通常、ブール値を生成するテンプレート式(例:「{{w1.on}}」)を使用します。ブール値はい直接編集
displayFormat日付を表示するための書式です。有効な moment.js の書式 ↗である必要があります。文字列いいえ直接編集
fromDateValue文字列形式の、現在選択されている開始日です。日付は ISO 8601 規格 ↗に従った書式にする必要があります。文字列はいユーザーインタラクション
maxDate文字列形式で指定する、ユーザーが日付ピッカーで選択できる最も遅い日付です。空欄のままにすると、デフォルトの最大日付(今年の12月31日)が使用されます。日付は ISO 8601 規格 ↗に従った書式にする必要があります。文字列いいえ直接編集
minDate文字列形式で指定する、ユーザーが日付ピッカーで選択できる最も早い日付です。空欄のままにすると、デフォルトの最小日付(20年前の1月1日)が使用されます。日付は ISO 8601 規格 ↗に従った書式にする必要があります。文字列いいえ直接編集
shortcutLabelsショートカットを表示するときに表示する範囲の名前です。たとえば、「過去3日間」や「過去3か月間」です。ラベルを指定しない場合は、デフォルトのショートカット範囲とラベルが使用されます。string[]はい直接編集
shortcutRanges各ショートカットの日付範囲です。各範囲は ISO 8601 規格 ↗[from_date_string, to_date_string] に従った書式にする必要があります。例:['2016-05-01', '2016-05-10'] または ['2016-05-01 16:00', '2016-05-01 18:00']string[][]いいえ直接編集
shortcutsEnabled日付範囲のショートカット(過去3日間、過去3か月間など)を表示するかどうかを決定します。ブール値いいえ直接編集
toDateValue文字列形式の、現在選択されている終了日です。日付は ISO 8601 規格 ↗に従った書式にする必要があります。文字列はいユーザーインタラクション
timeEnabled日付ピッカーとともに時刻ピッカーを表示するかどうかを指定します。ブール値はい直接編集
timePickerPrecision時刻ピッカーの精度を決定します。数値はい直接編集

例

日付範囲ピッカー

Copied!
1 2 3 4 5 6 7 8 9 10 { "disabled": false, "displayFormat": "YYYY-MM-DD", "fromDateValue": "2016-09-10T05:00:00.000Z", "maxDate": "2020-01-01", "minDate": "2000-01-01", "shortcutsEnabled": false, "timeEnabled": false, "toDateValue": "2016-10-10T05:00:00.000Z" }

時刻とショートカットを有効にした日付範囲ピッカー

Copied!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "disabled": false, "displayFormat": "YYYY-MM-DD hh:mm:sss a", "fromDateValue": "2016-09-10T05:13:11.001Z", "shortcutLabels": ["Q1", "Q2", "Q3", "Q4"], "shortcutRanges": [ ["2015-10-01", "2015-12-31"], ["2016-01-01", "2016-03-31"], ["2016-04-01", "2016-06-30"], ["2016-07-01", "2016-09-30"] ], "shortcutsEnabled": true, "timeEnabled": true, "timePickerPrecision": 0, "toDateValue": "2016-10-10T05:14:11.002Z" }

デフォルト

Copied!
1 2 3 4 5 6 7 8 9 { "disabled": false, "displayFormat": "YYYY-MM-DD", "fromDateValue": null, "shortcutsEnabled": false, "timeEnabled": false, "timePickerPrecision": 0, "toDateValue": null }

タイムラインウィジェット

次のテーブルでは、タイムラインウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後にいくつかの例を示します。

プロパティ

属性説明データ型必須変更方法
cssClassesクラス名の配列です。各クラス名は、タイムライン上の対応するイベントに追加されます。string[]いいえ直接編集
datesタイムラインに表示するイベントを示す日付の配列です。指定された順序で表示されます。any[]はい直接編集
details対応するイベントタイトルの下に表示する補足情報です。string[]いいえ直接編集
titlesタイムラインに表示するイベントの名前/タイトルです。string[]はい直接編集

例

タイムライン

Copied!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "cssClasses": [ "green", "red", "green" ], "dates": "{{query1.dates}}", "details": [ "this first event was spectacular", null, "the third event was alright" ], "titles": "{{query1.titles}}" }

デフォルト

Copied!
1 2 3 4 5 6 { "cssClasses": [], "dates": [], "details": [], "titles": [] }