レッスンに戻る

カレンダーを作成

importance: 4

関数createCalendar(elem, year, month)を作成してください。

この関数の呼び出しは、指定された年/月に応じたカレンダーを作成し、それをelem内部に配置します。

カレンダーはテーブルで表され、1週間は<tr>、1日は<td>で示されます。テーブルの一番上は曜日名を含む<th>とする必要があり、最初の曜日は月曜日以降、日曜日まで続きます。

例えば、createCalendar(cal, 2012, 9)は要素calに次のようなカレンダーを作成します

追伸 このタスクでは、カレンダーを作成するだけで、まだクリックできる必要はありません。

タスク用のサンドボックスを開く。

文字列としてテーブルを作成します: "<table>...</table>"、その後 innerHTMLに割り当てます。

アルゴリズム

  1. <th>と曜日名を使用したテーブルヘッダーを作成します。
  2. d = new Date(year, month-1)の日付オブジェクトを作成します。これはmonthの1日目です(JavaScriptの月は0から始まり、1から始まらないことを考慮しています)。
  3. 1日目d.getDay()までの最初の数セルの空きを埋めます。これらは<td></td>で埋めます。
  4. dの日付を増やします: d.setDate(d.getDate()+1)d.getMonth()がまだ次の月でない場合、新しいセル<td>をカレンダーに追加します。これが日曜日なら、改行“</tr><tr>”を追加します。
  5. 月が終わってもテーブルの行がまだ埋まっていない場合、それを正方形にするために空の<td>を追加します。

サンドボックスでソリューションを開きます。