レッスンに戻る

カレンダーを作成する

重要性: 4

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

この呼び出しは、与えられた年/月でカレンダーを作成し、elem の中に置きます。

カレンダーはテーブルである必要があり、その週は <tr> で、日は <td> です。テーブルのトップは曜日の <tr> です: 最初の日は月曜で、日曜まで続きます。

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

P.S. このタスクでは、カレンダーの生成で十分です。まだクリック可能にする必要はありません。

タスクのためのサンドボックスを開く

私たちは文字列としてテーブルを作成します: "<table>...</table>" 、そしてそれを innerHTML に代入します。

アルゴリズムは次の通りです:

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

サンドボックスで解答を開く