ガントチャートとして使えるようにするためにカレンダーをポップアップ表示させる方法を考えます。

⇒ 動作確認はこちらから

カレンダーを表示させる

まず普通にカレンダーを表示させます。そのためのクラスを作成します。

コンストラクタではカレンダーが何年何月を表示しているのかを示す部分とカレンダー本体を表示する要素を引数として受け取ります。

HTMLで以下のようにすればカレンダーが表示されるようにしたいのです。

index.html

カレンダーの初期化

Calendarクラスのコンストラクタを示します。

mini-calendar.js

カレンダーの生成と表示

ShowCalendar関数が実行されたらヘッダー部分に何年何月かを表示してカレンダー本体を表示させます。

CreateCalendar関数はカレンダー本体をつくりこれを表示します。ただ同じオブジェクトでCreateCalendar関数が実行されると前に表示されていたカレンダーが消されずにその下にカレンダーが表示されてしまうので、前のカレンダーが存在するときは消去してから処理を行ないます。

カレンダーをポップアップ表示させる

カレンダーをポップアップ表示させるには非表示の状態で作成しておき、表示させるときに表示状態にします。表示させるボタンを押されたら表示し、×や日付をクリックしたらカレンダーを非表示にします。

index.html

ポップアップカレンダーの初期化

ポップアップカレンダーを初期化するための処理を示します。

クリックされたときの動作の定義

×がクリックされたときの動作を定義します。

ポップアップカレンダーを非表示にします。

日付をクリックされたときの動作を定義します。

カレンダーの「前月」「次月」がクリックされたときにカレンダーを切り替えます。

カレンダーを実際に表示させる

カレンダーを表示させます。

日付部分がクリックされたら相当する文字列を取得する

これで日付部分がクリックされたらその日にちに相当する文字列を取得できるようになります。以下のようなHTMLがあれば「クリック」と書かれている部分をクリックするとポップアップカレンダーが表示され、日を選択するとその部分が「クリック」という文字と置き換わります。