OIC2024-Front05

JavaScriptによるカレンダー作成

この課題では、JavaScriptを使用してカレンダーを作成するプログラムを開発してください。このプログラムは、指定された年と月に対応するカレンダーを表示し、ユーザーが日付を選択できるようにするものです。

要件

• ユーザーから入力された年と月を元に、指定された月のカレンダーを表示すること。
• カレンダーは日曜日から始まり、土曜日までの週を表示すること。
• カレンダーの日付は、選択可能なボタンやリンクとして表示すること。
• ユーザーが日付をクリックすると、選択された日付が強調表示されること。

期待される結果

• プログラムを実行すると、カレンダーの表示が現れます。
• ユーザーが年と月を入力すると、入力された月のカレンダーが表示されます。
• ユーザーが日付をクリックすると、選択された日付が強調表示されます。

メインロジックは以下の通り関数とすること

generateCalendar 関数

概要

カレンダーを生成して表示する関数です。

入力

• year (数値): カレンダーの年を表す値
• month (数値): カレンダーの月を表す値（0から11までの範囲）

出力

なし

動作

• 指定された年と月に基づいて、カレンダーを生成して表示します。
• カレンダーは、指定された年と月の月間日数と最初の曜日に基づいて作成されます。
• カレンダーは指定された要素に挿入され、既存の内容は置き換えられます。
• カレンダーの日付をクリックすると、特定のアクションが発生する必要はありません（クリックイベントの追加は任意）。

仕様

• カレンダーは以下の要素を持つHTMLとして生成されます:
  • 1つの <div> 要素でクラス名 .calendar を持つ
  • 1つの <div> 要素でクラス名 .calendar-header を持ち、年と月を表示する
  • 1つの <ul> 要素でクラス名 .calendar-days を持ち、日付を格納するためのリスト
  • 各日付は <li> 要素でクラス名 .calendar-date を持ち、日付の数値を表示する
• カレンダーは週の最初の曜日から始まり、7日間を1週間として表示されます。
• カレンダーの日付は、月の最初の曜日よりも前に空白のセルで埋められます。
• カレンダーの日付は、月の日数に応じて連続して表示されます。
• カレンダーは指定された要素内に表示されます。要素はそのidを使用して識別されます。

使用例

generateCalendar(2023, 5);