表の縦並び、日付に対応する曜日の表示、曜日をテキスト表示ができず困っています。

Question

前提・実現したいこと

簡単な勤怠管理システムを作成しようとしています。
勤務開始・終了時間、休憩時間、勤務時間、出欠の情報を日毎に表にしたいのですが、下記がわかりません。

・日付や曜日を縦並びにする
・曜日を0~6ではなくテキスト表示にする
・日付と曜日の紐づけをする

初歩的な質問で申し訳ありませんが、ご存じの方がいらっしゃればお教えいただけると助かります。

該当のソースコード

 <script language="JavaScript" type="text/javascript">
const weeks = ['日', '月', '火', '水', '木', '金', '土']
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const startDate = new Date(year, month - 1, 1) // 月の最初の日を取得
const endDate = new Date(year, month,  0) // 月の最後の日を取得
const endDayCount = endDate.getDate() // 月の末日
const startDay = startDate.getDay() // 月の最初の日の曜日を取得
let dayCount = 1 // 日にちのカウント
let weekCount = 0 // 曜日のカウント
let calendarHtml = '' // HTMLを組み立てる変数

calendarHtml += '<table>'
  calendarHtml += '<tr>'
  
  // 日付の生成
for (let i = 0; i < endDayCount; i++) {
  calendarHtml += '<td>' + dayCount + '</td>'
  dayCount++
}
calendarHtml += '</tr>'
calendarHtml += '<tr>'

// 曜日の生成
var weekday = [ "日", "月", "火", "水", "木", "金", "土" ] ;
var wday = "（" + weekday[ startDate.getDay() ] + "）" ;

for (let w = 0; w < endDayCount; w++) {
  calendarHtml += '<td>' + weekCount + '</td>'
  // 曜日のカウントが6(土曜日)まできたら0(日曜日)に戻す
  if(weekCount >= 6) {
    weekCount = 0;
  } else {
    weekCount++;
    
  }
}
 calendarHtml += '</tr>'
calendarHtml += '</table>'

document.querySelector('#calendar').innerHTML = calendarHtml
      

  
  </script>

試したこと

・曜日をテキスト表示にするため、
var weekday = [ "日", "月", "火", "水", "木", "金", "土" ] ;
をifに組み込んでみたり、置き換えを調べてみたのですが有効な方法が見つけられませんでした。

・日付と曜日を合致させるため、
for (let w = 0; w < endDayCount; w++) {
の初期値0の部分にwday(当月1日の曜日)を当ててみたりしたのですが、正常に動きませんでした。

補足情報（FW/ツールのバージョンなど）

VSCodeでJavaScript、HTML、CSSを使用して作成しています。

何か不足している情報などあればご指摘いただけると助かります。
よろしくお願いいたします。

追記

先ほど、教えていただいた通り修正したところ、日付と曜日の合致、テキスト表示はできました。
本当にありがとうございます。

上の表の通りに、下に並んでいる日付と曜日を並べ替えたいです。
こちらは、JavaScriptではなく、HTMLでの作業になるのでしょうか？

追記
綺麗に希望の形に並べられました。
本当にありがとうございます。

一応、最終的なコードを貼っておきます。

 <script language="JavaScript" type="text/javascript">
const weeks = ['日', '月', '火', '水', '木', '金', '土']
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const startDate = new Date(year, month - 1, 1) // 月の最初の日を取得
const endDate = new Date(year, month,  0) // 月の最後の日を取得
const endDayCount = endDate.getDate() // 月の末日
const startDay = startDate.getDay() // 月の最初の日の曜日を取得
let dayCount = 1 // 日にちのカウント
let weekCount = startDay // 曜日のカウント
let calendarHtml = '' // HTMLを組み立てる変数

calendarHtml += '<table>'

    var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];
    for (let i = 0; i < endDayCount; ++i) {
      // 日付の生成
      calendarHtml += '<tr>'+ '<td>' + dayCount + '</td>'
        dayCount++
      // 曜日の生成
      calendarHtml += '<td>' + weekday[weekCount] + '</td>'+ '</tr>'
      if(weekCount >= 6) {
        weekCount = 0;
      } else {
        weekCount++;
      }
    }

calendarHtml += '</table>'

document.querySelector('#calendar').innerHTML = calendarHtml
      

  
  </script>

Comments

[int32_t]

現在どういう表示になっていて、それをどうしたいのでしょうか? スクリーンショット、図、テキストアートなどで具体的に説明してください。

[moe_ko]

ご指摘いただきありがとうございます。
情報の追加をさせていただきました。
もし、ご存じであればお教えいただけると嬉しいです。
よろしくお願いいたします。

Answer 1

・日付や曜日を縦並びにする

<tr><td>日付</td><td>曜日</td></tr> という構造で出力する必要がありますから、0からendDayCountの範囲のループ2つを1つにまとめる必要があります。

var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];
for (let i = 0; i < endDayCount; ++i) {
  calendarHtml += '<tr>'
  calendarHtml += `<td>${i}</td>`;
  calendarHtml += `<td>${weekday[(startDay + i) % 7]}</td>`;
  calendarHtml += '</tr>'
}

Comments

[moe_ko]

ご回答ありがとうございます。
綺麗に並べることができました。
本当にありがとうございます。

Answer 2

日付と曜日を合致させる

let weekCount = 0 // 曜日のカウント
↓
let weekCount = startDay; // 曜日のカウント

曜日をテキスト表示にする

calendarHtml += '<td>' + weekCount + '</td>'
↓
calendarHtml += '<td>' + weekday[weekCount] + '</td>';

あとはtableの組み方だけですね。

Comments

[moe_ko]

ご回答ありがとうございます。
試してみたところ、曜日と日付が合致し、表示もテキストになりました。

ここ数日、ずっと調べていたことがあっさり解決されて感動しました。
本当にありがとうございます。