シンプルカレンダーは、１ヶ月の月間カレンダーを表示する Webアプリケーションである

カレンダー上部の矢印ボタンはカレンダを前月または翌月に移動する。下部の矢印ボタンはカレンダのを前年または翌年に移動する。なお月は同じとする。

国民の祝日はマスタファイルに登録し、日付を赤字にする。赤い枠線で囲まれた日付は、選択中の日付を表す。上下左右の矢印キーまたは、日付のクリックにより移動する。

日付をダブルクリックする、または開くボタンをクリックすると選択した日付を表示した alertウィンドウが開く。このアプリケーションでは特に意味はないが、指定の日付に対して何らかの処理を行うといった拡張を想定している。

HTMLページの loadイベントを契機に Javascriptの DOM APIを利用して動的にカレンダーを作成する。

１ヶ月分の日付は 35要素（7日 x 5週）または 42要素（7日 x 6週）のテーブルに格納する。テーブルの要素は月曜日から始まるので、当月の日付の前に前月の月末日、後ろに翌月の月初日を挟んだ形になることが多い。日付は次のように定義したオブジェクトとして保持する。

カレンダーの日付は span要素として作成し、曜日に対応した７列の grid要素に配置していく。土日祝祭日の日付の色、選択中の日付の枠線などを要素の属性に設定する。月または年を移動した場合、その年月のカレンダーを作成し再表示する。