カレンダー作成での質問

Question

前提・実現したいこと

HTMLとJavascriptを使用してカレンダー表を作成しているのですが、
うまくカレンダー内に以下のコードだと添付ファイルのようにはみ出して
カレンダーが表示されてしまいます。
原因と対処方法（修正コード）を教えて欲しいです。

該当のソースコード

<script>

　　　 const weeks = ['日', '月', '火', '水', '木', '金', '土'];
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth()+1;
const start = new Date(year, month-1,1); //月初めの取得
const end = new Date(year, month,0); //月終わりを取得
const startDay = start.getDay(); // 月の最初の日の曜日を取得
let dayCount = 1; // 日にちのカウント
const endDayCount = end.getDate(); // 月の末日
//Header作成
function calendarHeading(year, month){
year.text(year);
month.text(month + 1);
}

　　　  // 曜日の行を作成
　　　　for (var j = 0; j < weeks.length; j++) {
        document.write("<th>",weeks[j],"</th>");
        }
        
        for (var w = 0; w < 5; w++) {
            document.write("</tr>");
            for (let d = 0; d < 7; d++) {
            if (w == 0 && d < startDay) {
            document.write("<td><td>")
            }else if (dayCount > endDayCount) {
            document.write("<td><td>");
            } else {
            document.write("<td>",dayCount,"</td>");
            dayCount=dayCount+1;
            }
        }
        document.write("</tr>");
        }
</script>

ソースコード

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、document.write()による出力は基本的に推奨されない実装なので、参考先かえたほうが良いかと。

Answer 1

空のセルを表示するのに document.write("<td><td>") としているので、td 要素が 2 つできます。
後ろを </td> にしましょう。

また、w < 5 だと月によっては入りきらない場合がありますね。今年の 8 月とか。

Comments

[退会済みユーザー]

tdの方/tdに変更して修正できました。ご回答ありがとうござます。w<6としてしまいますと、月末の下に28,29,30の余白のができてしまいますが、ここはどのようにして削除すればよろしいでしょうか？

[Daregada]

wが5の週を必要とする条件を考えればいいかと。wが1から4の週の28日間に収まらず、wが5の週にはみ出るのは、wが0の週の何曜日スタートなのか、小の月と大の月で図にでもしてみればいい。

[Daregada]

あと、tr で囲んで1行分のデータを作るはずの処理で、開始タグにも /tr と書いてある点と、th で作る曜日を tr で囲んでいない点が気になります。

[hoshi-takanori]

ループの条件を「表示すべき日が残ってるか」にすればいいので、w < 5 の代わりに dayCount <= endDayCount にするとか。なお、2 月はたまに 4 行で収まることになります。2015 年とか 2026 年とか。
また、よく見たら tr は開始タグがないですね。</tr> をテーブルの行を終了させるための独立したタグだと思ってませんか？ HTML はタグを省略することもできてしまいますが、バグのもとなので、基本的に開始タグと終了タグをバランスさせるように心がけることをお勧めします。

[退会済みユーザー]

ご返信遅れて申し訳ありません。頂いたコメントをもとに修正できました。
/trについては記載ミスでした。コメントいただきありがとうございました。