floatingCalendar非推奨
imui:calendar タグに置き換えられました。
機能説明
<IMART type=“floatingCalendar”>タグ。
ドラッグ＆ドロップで移動可能なカレンダーをフレーム上に表示します
表示されたカレンダーの日付をクリックすると、 属性「element」で指定された要素に、選択された日付の文字列を反映します。
（日付文字列の形式は、属性「format」で指定可能です。）
カレンダーは、「カレンダー表示基準年月」を元に表示されます。
「カレンダー表示基準年月」は、以下の順番で算出されます。
（※1）
属性「year」が2桁の場合、「00から49」は 2000年代、「50から99」は 1900年代として処理されます。
属性「year」および「month」にて生成される年月は、1582年10月以降である必要があります。（1582年10月以前の動作は未定義）
属性「addMonth」が設定された場合、「カレンダー表示基準年月 + (addMonth)ヶ月」のカレンダーを表示します。
属性「addMonth」が未設定の場合、「カレンダー表示基準年月」のカレンダーを表示します。
カレンダー左上の[リロード]ボタン押下に表示されるカレンダーの年月は、以下の順番で算出されます。
注意事項：
ドラッグ＆ドロップで移動可能なカレンダーをフレーム上に表示します
表示されたカレンダーの日付をクリックすると、 属性「element」で指定された要素に、選択された日付の文字列を反映します。
（日付文字列の形式は、属性「format」で指定可能です。）
カレンダーは、「カレンダー表示基準年月」を元に表示されます。
「カレンダー表示基準年月」は、以下の順番で算出されます。
| 項番 | 条件 | 「カレンダー表示基準年月」算出方法 |
|---|---|---|
| 1 | 属性「 isUseElementMonth 」が true (未指定時を含む)、 かつ、 属性「 element 」で指定された要素の値が、属性「 format 」の日付フォーマットに合致している場合 | 属性「 element 」で指定された要素の値から算出されます。 |
| 2 | 属性「 year 」および「 month 」が正しい年月に変換できる場合 | 属性「 year 」「 month 」および「 addMonth 」の値から算出されます。 |
| 3 | 属性「 today 」が指定されている（形式：yyyy/MM/dd）場合 | 属性「 today 」の値から算出されます。 |
| 4 | 上記のいずれの条件も満たさない場合 | システム日付の「年月」となります。 |
属性「year」が2桁の場合、「00から49」は 2000年代、「50から99」は 1900年代として処理されます。
属性「year」および「month」にて生成される年月は、1582年10月以降である必要があります。（1582年10月以前の動作は未定義）
属性「addMonth」が設定された場合、「カレンダー表示基準年月 + (addMonth)ヶ月」のカレンダーを表示します。
属性「addMonth」が未設定の場合、「カレンダー表示基準年月」のカレンダーを表示します。
カレンダー左上の[リロード]ボタン押下に表示されるカレンダーの年月は、以下の順番で算出されます。
| 項番 | 条件 | 「[リロード]ボタン押下に表示されるカレンダーの年月」算出方法 |
|---|---|---|
| 1 | 属性「 element 」で指定された要素の値が、属性「 format 」の日付フォーマットに合致している場合 | 属性「 element 」で指定された要素の値から算出されます。 |
| 2 | 属性「 today 」が指定されている（形式：yyyy/MM/dd）場合 | 属性「 today 」の値から算出されます。 |
| 3 | 上記のいずれの条件も満たさない場合 | システム日付の「年月」となります。 |
HTMLファイルの<HEAD>タグ内に、必ずデザインスタイルシートタグ（imDesignCss タグ）および、
< SCRIPT src=" <%web_path%>/csjs/im_floating_calendar.js">を記述してください。
（ <%web_path%> はWeb Server Connectorをインストールしたディレクトリ）
なお、 <%web_path%>/csjs/im_floating_calendar.jsは、URLの関係で呼び出し時のソースパスは変わります。
スクリプト開発モデルの場合は、csjs/im_floating_calendar.js でリンクできます。
属性「position」に「event」を指定し、マウスクリック以外でカレンダーを表示すると、 IEの場合、マウスポインタがフレームから外れていると、カレンダーはフレームの外に表示されます。 NNの場合、フレームの左上（「left：0, top：0」）にカレンダーが表示されます。
属性一覧
| 注釈 | 属性名 | 型 | 説明 | 省略時の動作 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
addMonth |
カレンダー表示基準年月からの移動量 [月単位で数値指定]（デフォルトは「0」） | - | ||||||||||
calendarId |
カレンダーID（デフォルトは「ログイングループのデフォルトカレンダーID」） 指定されたカレンダーIDが存在しない場合は、デフォルトカレンダーIDのカレンダーを表示します。 （エスケープ対象の属性です） |
- | ||||||||||
callback |
カレンダーの日付をクリックした際に呼び出されるJavascript関数名。（デフォルトは、“callBackFloatingCalendar”） 指定された関数には、「属性「element」で指定された要素」、「選択された日付の文字列」が属性として渡されます。 （サンプルコード参照） （エスケープ対象の属性です） |
- | ||||||||||
|
必須
|
element |
選択した日付の文字列表現を反映する要素 （エスケープ対象の属性です） |
- | |||||||||
escapeJs |
JavaScriptエスケープの有効・無効を指定します。 「true」の場合、エスケープ対象の属性値が JavaScriptエスケープされて出力されます。 「false」の場合、エスケープ対象の属性値の JavaScriptエスケープ処理は行われません。 未指定の場合は「現在実行中の プレゼンテーション・ページ に紐づくescapeJsの値」に則ってJavaScriptエスケープ処理行われます。 詳しくは、「 エスケープ処理に関して 」を参照してください。 |
- | ||||||||||
escapeXml |
XMLエスケープの有効・無効を指定します。 「true」の場合、エスケープ対象の属性値が XMLエスケープされて出力されます。 「false」の場合、エスケープ対象の属性値の XMLエスケープ処理は行われません。 未指定の場合は、「現在実行中の プレゼンテーション・ページ に紐づくescapeXmlの値」に則ってXMLエスケープ処理行われます。 詳しくは、「 エスケープ処理に関して 」を参照してください。 |
- | ||||||||||
format |
日付フォーマット（デフォルトは「yyyy/MM/dd」） フォーマット指定文字（Format.fromDate()のフォーマット指定文字に準拠）
|
- | ||||||||||
isUseElementMonth |
trueが指定された場合、elementで指定された要素の値をカレンダー表示基準年月とします。 （ただし、elementで指定された要素の値が日付フォーマット形式でない場合、falseが指定されたことになります） falseが指定された場合、属性「year」および「month」を元にカレンダー表示基準年月を算出します。 （デフォルトは「true」） |
- | ||||||||||
month |
カレンダー表示基準月 [1-12]（デフォルトは システム日付の「月」) | - | ||||||||||
position |
カレンダー表示位置 [event | ‘left,top’]（デフォルトは「event」)
|
- | ||||||||||
today |
「今日」を表す年月日（形式：yyyy/MM/dd）（デフォルトは「システム日付」）この属性で指定された年月日が、カレンダー上で 太字 かつ 縁取りされて表示されます。（エスケープ対象の属性です） | - | ||||||||||
weekCaptions |
カレンダーに表示する曜日のキャプション。（デフォルトは、“Su,Mo,Tu,We,Th,Fr,Sa”） カンマ区切りでキャプションを7つ指定します。（例.“日,月,火,水,木,金,土”） キャプション数が7つではない場合、デフォルト値を表示します。 （エスケープ対象の属性です） |
- | ||||||||||
year |
カレンダー表示基準年（デフォルトは システム日付の「年」) | - |
内部タグ
IMARTタグおよびHTML
サンプル
サンプル
<pre>
●今月のカレンダーを表示するHTML
・テキストフィールド「document.floatingCalendarForm.date」にカレンダーで選択した日付を反映します。
<HTML>
<HEAD>
<IMART type="imDesignCss"></IMART>
<SCRIPT src="csjs/im_floating_calendar.js"></SCRIPT>
</HEAD>
<BODY>
<FORM name="floatingCalendarForm">
<INPUT name="date" type="text" size="20" class="default">
<!-- カレンダー（フローティング形式）を表示 -->
<IMART type="floatingCalendar" element="document.floatingCalendarForm.date">
<IMG src="sample.gif" border="0" alt="カレンダー用の画像">
</IMART>
</FORM>
</BODY>
</HTML>
●以下の条件を満たしたカレンダーを表示するHTML
・2006年10月（＝2006年8月の2ヵ月後）のカレンダーを表示
・フレーム左上から、右に100px、下に200pxの位置にカレンダーを表示
・日付選択時に反映される文字列のフォーマットが「yyyy/MM/dd (E)」形式
・カレンダーID「sample」のカレンダーデータを表示
・表示カレンダーのキャプションを「日,月,火,水,木,金,土」で表示
・カレンダーの日付をクリックした際にJavascript関数「sampleCallBack」を呼び出す
<HTML>
<HEAD>
<IMART type="imDesignCss"></IMART>
<SCRIPT src="csjs/im_floating_calendar.js"></SCRIPT>
<SCRIPT type="text/javascript">
function sampleCallBack(element, value){
alert("sampleCallBack");
alert("element.value = " + element.value);
alert("value = " + value);
element.value = value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="floatingCalendarForm">
<INPUT name="date" type="text" size="20" class="default">
<!-- カレンダー（フローティング形式）を表示 -->
<IMART type="floatingCalendar"
element="document.floatingCalendarForm.date"
year = "2006"
month = "8"
addMonth = "2"
position = "100,200"
format = "yyyy/MM/dd (E)"
calendarId = "sample"
weekCaptions = "日,月,火,水,木,金,土"
callback = "sampleCallBack">
<IMG src="sample.gif" border="0" alt="カレンダー用の画像">
</IMART>
</FORM>
</BODY>
</HTML>
</pre>