Ajaxフレームワーク UI部品リファレンス

2.4.2 PopupCalendar

PopupCalendarは、ポップアップダイアログのカレンダを表示する部品です。CalendarButtonと組み合わせて指定します。ポップアップダイアログから日付を確定させることができます。

• 表示例
• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API
• 補足事項

本部品は、デフォルトでは不可視です。可視化するには、showメソッドを利用します。詳細は、“Window、PopupCalendar部品を自動的に表示させる場合”を参照してください。

■表示例

■記述形式

<div rcf:type="PopupCalendar"></div>

子要素は指定できません。

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
selectedDate	Date	選択された日付を指定します。 タイムゾーンはカレンダのutcプロパティに依存します。	可	null	値、バインド	可	不可
labelOK	String	OKボタンの文字列を指定します。""(空文字列)を指定すると、ボタンが非表示になります。(注)	可	OK	値	不可	不可
labelCancel	String	キャンセルボタンの文字列を指定します。""(空文字列)を指定すると、ボタンが非表示になります。(注)	可	"キャンセル"	値	不可	不可

注) labelOKおよびlabelCancelの両方に空文字列を指定した場合は、フッター部(OKボタンおよびキャンセルボタンが表示される領域)が非表示になります。

Calendarのプロパティも指定できます。(selectedDates、selectMode、tabIndex、selectableを除きます。)詳細は、“Calendar”の“プロパティ”を参照してください。
Windowのプロパティも指定できます。(mode、resizableを除きます。)詳細は、“Window”の“プロパティ”を参照してください。
部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

■スタイルプロパティ

本部品全体のスタイルプロパティを以下に示します。

パーツ名	プレフィックス	クラス名	指定可能なスタイル
OK/キャンセルボタン	button	rcf-PopupCalendar-button	カラー フォント(lineHeightを除く)

Calendarのスタイルプロパティも指定できます。詳細は、“Calendar”の“スタイルプロパティ”を参照してください。
ただし、Calendarのスタイルのうち、全体(外枠)に対応するものは、PopupCalendarでは以下のようになります。

• プレフィックス: calendar
• クラス名: rcf-Calendar-calendar

Windowのスタイルプロパティも指定できます。詳細は、“Window”の“スタイルプロパティ”を参照してください。
表示されるウィンドウのサイズは、カレンダ部品のサイズに合わせて調整されます。このため、Windowのスタイルプロパティのうち、全体のサイズ、タイトルのwidthは設定できません。
ボディ部のカラー、フォント、テキストの設定は、できません。
スタイルの設定やレンダラの処理により、フォーカスや選択日など動的に変更される部分のサイズが変わると、ウィンドウに余白やスクロールバーが表示される場合があります。サイズが変動しないように、スタイルを設計してください。

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

名前	説明	イベントオブジェクト
onDateFixed	日付をダブルクリックするか、OKボタンまたはENTERキーが押されたときに呼ばれます。calendarイベントのあとに呼ばれます。 また、ok()メソッド実行時に日付が選択されていた場合にも呼ばれます。	CalendarSelectionChangeEvent
onOk	OKボタンまたはENTERキーが押されたときに呼ばれます。calendarイベントのあと、かつdatefixedイベントの前に呼ばれます。 ok()メソッド実行時は呼ばれません。	ActionEvent
onCancel	キャンセルボタン、閉じるボタン、またはESCキーが押されたときに呼ばれます。 cancel()メソッド、hide()メソッド実行時には呼ばれません。

部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

■getCalendarメソッド

メソッド	getCalendar()
引数	なし
説明	内部のCalendarインスタンスを返します。

■okメソッド

メソッド	ok()
引数	なし
説明	OKボタンクリックと同じ処理です。 日付の選択状態の確認は行いません。

■cancelメソッド

メソッド	cancel()
引数	なし
説明	キャンセルボタンのクリックと同じ処理です。

部品共通のJavaScript APIもあります。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

■補足事項

• 本部品は、<div>タグのstyle属性(position、top、leftなど)が利用できない部品の1つです。詳細は、“UI部品の<div>タグおよび<span>タグで利用できる属性”を参照してください。
• PopupCalendarの初期化が完了する前にshowメソッドで表示を行うと、描画が崩れる場合があります。
  初期化完了と同時にPopupCalendarを表示したい場合は、タイムアウトを設定してshowメソッドを呼ぶ関数を作成し、RCF.addInitializedListener()でイベントリスナを登録してください。
  詳細は、“Window、PopupCalendar部品を自動的に表示させる場合”を参照してください。
• PopupCalendarは、CalendarとWindowの両方の部品を合わせ持っている部品です。それぞれの部品に由来する仕様の詳細は、Calendar部品およびWindow部品の記事を参照してください。
• hide()メソッドによってPopupCalendarを閉じることができます。ただし、その場合はcancel()メソッドと異なり、選択日付はポップアップ時の値には戻りません。
• topとleftは、スタイルプロパティで指定してください。
  CSSでの指定は無効となります。