floatingCalendar非推奨
imui:calendar タグに置き換えられました。
コンポーネント情報 | |
---|---|
モジュール | im_jssp |
導入されたバージョン | 7.2以前 |
バージョン | 8.0.0 |
機能説明
<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>