Domino Webアプリ用カレンダー日付入力ダイアログ

Lotus DominoでWebブラウザ対応アプリケーションを開発するとき、日付入力欄のための入力補助機能がない。Notesクライアントなら、1か月分の小さなカレンダーがポップアップ表示され、日付をクリックするとその日付が入力される、という便利な機能があるが、Webブラウザではこの機能は無効になってしまう。
インターネットを検索してみると、JavaScriptを利用したカレンダーによる日付入力補助機能が無償でいくつか提供されているが、機能が豊富すぎてDomino Designerの開発環境では使いづらいものばかりである。それならばということで、自作してみた。
動作検証はInternet Explorer 5.5以上のみで行っている。また、下記の作業手順はDomino Designer 7.0以上を前提としている。
まず「カレンダー入力画面」の作成方法からご説明する。この「カレンダー入力画面」は社内のDominoアプリで使いまわす共通部品格納用のデータベースに作成するのがいちばんよい。ここでは、共通部品格納用のデータベースを仮に「CommonModules.nsf」と名づける。
(1)ページを新規作成して仮に「SelectDatePage」と名づける。(名前は任意)
(2)同ページの「JS Header」プロパティで、実行「Web」「JavaScript」を選択し、添付のJavaScriptプログラムをそのままコピー&貼り付けする。
(3)そのページの「onLoad」プロパティに「drawCalendar();」と入力し、ページを表示するときに現在年月にもとづくカレンダーが初期状態で表示されるようにする。
(4)ページ上に、パススルーHTMLとして次の1行のみを記述する。
<div id=”Calendar”>Calendar</div>
次に、このカレンダー入力画面の利用方法をご説明する。
(A)任意のDominoデータベースの、任意のフォームに、日付型の編集可能フィールドを作成する。
 ※このフィールド名を仮に「TESTDATE」とする。
(B)そのすぐ右隣に「日付設定」など、適当な名称でボタンを作成する。
(C)そのボタンの「onClick」イベントの実行「Web」「JavaScript」に、次のような短いJavaScriptコードを設定する。
window.open(‘/CommonModules.nsf/SelectDatePage?OpenPage&TESTDATE’, ‘_blank’, ‘width=240,height=240,menubar=no,location=no,status=no’)
ここで注意すべきは、(1)で作成したページへの正しい絶対URLを指定することと、入力値を返したい入力欄(ここではTESTDATEという名称)を要求文字列として引き渡すことである。また、メニューバー、アドレス欄、ステータスバーを表示させないようにすることもポイントだ。
手順としては以上ですべてである。1つのフォームの中に、カレンダー入力画面を呼び出すボタンは好きなだけ作成できる。
なお、下記のカレンダー表示部分のJavaScriptでは、カレンダーの各セルにclassidをいちいち付与している。したがってスタイルシートで、セル別に見栄えを変えられる。スタイルシートのためのクラス名は以下の通りだ。
.calendar_table=カレンダー全体
.calendar_header=カレンダー全体の見出し部分のセル
.calendar_header_sunday_cell=日曜日の見出し部分のセル
.calendar_header_sunday_value=日曜日の見出し部分の中身
.calendar_header_saturday_cell=土曜日の見出し部分のセル
.calendar_header_saturday_value=土曜日の見出し部分の中身
.calendar_header_weekday_cell=平日の見出し部分のセル
.calendar_header_weekday_value=平日の見出し部分の中身
.calendar_date_empty_cell=空のセル
.calendar_date_empty_value=空のセルの中身
.calendar_date_cell=日付の入ったセル
.calendar_date_value=日付の入ったセルの中身
いちばん簡単には、(1)で作成したカレンダー入力画面のページの「HTML Head Content」プロパティに、例えば下記のようなスタイルシートを入力すればよい。全体が二重引用符でくくられていることに注意されたい。これだけでもヘッダ部分にかんたんな色の装飾がつく。
“<style type=’text/css’>
.calendar_header { background-color: #cccccc; }
.calendar_header_sunday_cell { background: #ffcccc; }
.calendar_header_sunday_value { color: #cc0000; }
.calendar_header_saturday_cell { background: #ccccff; }
.calendar_header_saturday_value { color: #0000cc; }
.calendar_header_weekday_cell { background: #f0f0f0; }
</style>”
スタイルシートやJavaScriptが書ける方は、これらの必要最小限のコードからお望みのままにカスタマイズして使っていただければ幸いである。
Java Script Source Code

Domino Webアプリ用カレンダー日付入力ダイアログ」への0件のフィードバック

  1. nsfl10n

    シンプルJSカレンダ

    愛と苦悩の日記: Domino Webアプリ用カレンダー日付入力ダイアログ
     メモ代わりのエントリ。うちの「Featured Entries」で紹介しているWeb用カレンダ入力ダイアログは(いろんな意味で)重いですからね。。。…