「シンプルカレンダー」は、１ヶ月の月間カレンダーを表示するウェブアプリケーションである。キーボードやマウス操作で日付を選択したり、カレンダーを前月・翌月に移動することができる。

週の始まりは月曜日とする。月初は前月の月末日、月末は翌月の月初日で埋める。日曜の日付は赤字、土曜は青字にする。祝日は祝日マスタに登録があれば赤字にする。

カレンダーは赤い枠線で囲まれた「選択日」を保持する。初期表示では現在日が「選択日」になり、上下左右の矢印キーまたは、日付のクリックにより移動する。月移動ボタン（< 印）のクリックにより、前月またh翌月のカレンダーに移動する。

カレンダーの週数は１ヶ月の日数に応じて 5週と 6週の表示を切り替える。ごくまれに 4週になる場合もあるが 5週で表示する（最終週は余白になる）。

simple_calendar.html

simple_calendar.js

simple_calendar.css

holiday.js 祝日マスター

シンプルカレンダーは Javascriptの DOM APIを利用して動的にページを作成するクライアントアプリケーションである。DOM APIの使用法はは 「DOM APIを利用してHTML要素を作成する」も参照のこと

HTMLページのロードを契機にカレンダーを編集し表示する。１ヶ月分のカレンダーは １週間 x ５週または 6週のテーブルであり、当月の１ヶ月の日付の前後に前月の月末の数日と翌月の月初の数日を挟んだ形になる。カレンダーの作成に必要な「指定した月の日数」、「日付に対応する曜日」、「現在日付」は JavaSriptの Dateオブジェクトを使用して取得する。

１ヶ月分のカレンダーとして作成したデーブルの日付を対応するページのタグに代入し、土日や祝日、「選択日」といった日付の属性に応じて、タグの属性（文字色など）を設定する。なお、祝日は別途定義した祝日マスターに基づいて設定する。

「選択日」は赤い枠線で囲む。初期表示では現在日が選択日になり、日付のクリックまたは上下左右の矢印キの押下によって移動する。本アプリケーションでは選択日は、ほとんど何の意味もない。ただし、特定の日付において何らかの処理を起動するというような場合、キーとなる「選択日」は意味を持つ。「血圧管理カレンダー」ではそのような使い方をしている。

カレンダの表は、CCSのグリッドレイアウトに基づいた構造とし、DOMの API機能によって作成する。操作方法については、「DOM APIを利用してHTML要素を作成する」も参照のこと。

前月ボタンをクリックする、あるいはカレンダの先頭日（左上の日付）を選択日にして ◀︎ キーを押すと前月のカレンダに移動する。また、翌月ボタンをクリックするか、末尾日（右下の日付）において ▶︎ キーを押すと翌月のカレンダにに移動する。

カレンダーが前月または翌月に移動した場合、その月のカレンダーを編集し再表示する。これは、初期表示の場合と同じ処理を行えばよい。異なるのは、カレンダーを表示した後の「選択日」の位置で、初期表示の場合は現在日、前月に移った場合はカレンダの末尾、翌月に移った場合はカレンダの先頭とする。

一般的な Webサーバでは、URLに指定されたファイルは「ドキュメントルート」として指定されたディレクトリを節点としてファイルパスを解決する。Apacheでは、ドキュメントルートは、サーバ定義ファイル（http.conf）に記述する。 （もしかして ドキュメントルートは Apacheの用語？）

サーバ内のファイルは、「ドキュメントルート」に定義されたディレクトリの下に配置し、サーバは URLに指定されたファイルを　”キュメントルート ＋ URLのファイル名” に変換し、サーバな内を探索する。なお Apacheでは、シンボリックリンク先のファイルアクセス可能である。

実例

URL（ファイル名を赤字で示す）

ドキュメントルート

サーバ内のパスは次のようになる