JavaScriptを用いたカレンダーの日付をクリックする方法について

前提
HTML(Thymeleaf)とJavascriptを使用し、選択した日付をクリックできるカレンダーを作成したいと考えています。

発生している問題

HTML

<button id="calendar"> </button>
の箇所で
idを使いカレンダーを表示させると、その月全体がクリックされてしまい、
classを使うとカレンダー自体が表示されなくなってしまいます。
HTMLまたは、JavaScriptでどのような記述をすれば、選択した日付のみをクリックできるようになるでしょうか。

該当のソースコード

html
1<body>
2
3    <div class="content">
4        <div class="wrapper">
5            <!--yyyy年mm月を表示-->
6            <h1 id="header"></h1>
7            <!--ボタンクリックで移動-->
8            <div id="next-prev-button">
9                <button id="prev" onclick="prev()"><</button>
10                <button id="next" onclick="next()">></button>
11            </div>
12            <!--カレンダー-->
13            <button id="calendar"> </button>　//問題の箇所
14        </div>
15    </div>
16    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
17    <script th:src="@{/js/calendar.js}"></script>
18</body>

JavaScript
1const week = ["日", "月", "火", "水", "木", "金", "土"];
2const today = new Date();
3// 月末だとずれる可能性があるため、1日固定で取得
4var showDate = new Date(today.getFullYear(), today.getMonth(), 1);
5
6// 初期表示
7window.onload = function () {
8   showProcess(today, calendar);
9};
10// 前の月表示
11function prev(){
12    showDate.setMonth(showDate.getMonth() - 1);
13    showProcess(showDate);
14}
15
16// 次の月表示
17function next(){
18    showDate.setMonth(showDate.getMonth() + 1);
19    showProcess(showDate);
20}
21
22// カレンダー表示
23function showProcess(date) {
24    var year = date.getFullYear();
25    var month = date.getMonth();
26    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";
27    var calendar = createProcess(year, month);
28    document.querySelector('#calendar').innerHTML = calendar;
29}
30
31// カレンダー作成
32function createProcess(year, month) {
33    // 曜日
34    var calendar = "<table><tr class='dayOfWeek'>";
35    for (var i = 0; i < week.length; i++) {
36        calendar += "<th>" + week[i] + "</th>";
37    }
38    calendar += "</tr>";
39
40    var count = 0;
41    var startDayOfWeek = new Date(year, month, 1).getDay();
42    var endDate = new Date(year, month + 1, 0).getDate();
43    var lastMonthEndDate = new Date(year, month, 0).getDate();
44    var row = Math.ceil((startDayOfWeek + endDate) / week.length);
45
46    // 1行ずつ設定
47    for (var i = 0; i < row; i++) {
48        calendar += "<tr>";
49        // 1colum単位で設定
50        for (var j = 0; j < week.length; j++) {
51            if (i == 0 && j < startDayOfWeek) {
52                // 1行目で1日まで先月の日付を設定
53                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
54            } else if (count >= endDate) {
55                // 最終行で最終日以降、翌月の日付を設定
56                count++;
57                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
58            } else {
59                // 当月の日付を曜日に照らし合わせて設定
60                count++;
61                if(year == today.getFullYear()
62                  && month == (today.getMonth())
63                  && count == today.getDate()){
64                    calendar += "<td class='today'>" + count + "</td>";
65                } else {
66                    calendar += "<td>" + count + "</td>";
67                }
68            }
69        }
70        calendar += "</tr>";
71    }
72    return calendar;
73}

jimbe

2022/07/01 09:12

java と javascript は関係ありませんので、java のタグを外して頂けますでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、button要素の中にtable要素を展開しているのが衝撃でした。
これ、まともに表示されるんですね……

文法違反なので見直した方がいいです。

許可されている内容記述コンテンツ、但し対話型コンテンツがあってはならない
<button>: ボタン要素 - HTML: HyperText Markup Language | MDN

このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, Deprecated <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です (空白文字だけで構成されたものを除く)。
記述コンテンツ | コンテンツカテゴリー - 開発者ガイド | MDN

html
1            <div id="calendar"> </div>　//問題の箇所

として、

js
1                for (var j = 0; j < week.length; j++) {
2                    if (i == 0 && j < startDayOfWeek) {
3                        // 1行目で1日まで先月の日付を設定
4                        calendar += "<td class='disabled'><button>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</button></td>";
5                    } else if (count >= endDate) {
6                        // 最終行で最終日以降、翌月の日付を設定
7                        count++;
8                        calendar += "<td class='disabled'><button>" + (count - endDate) + "</button></td>";
9                    } else {
10                        // 当月の日付を曜日に照らし合わせて設定
11                        count++;
12                        if (year == today.getFullYear()
13                            && month == (today.getMonth())
14                            && count == today.getDate()) {
15                            calendar += "<td class='today'><button>" + count + "</button></td>";
16                        } else {
17                            calendar += "<td><button>" + count + "</button></td>";
18                        }
19                    }
20                }