Javascriptで作成したカレンダーの日付ごとのtdに個別のclassまたはidを付与する方法

前提・実現したいこと

Javascriptで作成したカレンダー上で、指定した日付のみ背景色を変更したいです。
営業日カレンダーに使用するつもりで、運用者さんが後から日付を指定すれば休業日だけカレンダー上の色が変わるように設計予定です。

発生している問題・エラーメッセージ

ネットで公開されていたコードをお借りしてカレンダーの作成自体はできましたが、指定した日付のみ背景色を変更するところで行き詰っています。

検討している方法としては、tdにそれぞれ個別のclassまたはidを付与して、選択したtdのみ背景色を変更する方法なのですが、1日～末日の各tdに個別のclassまたはidを付与する方法が調べてもわかりませんでした。
もしくは、他のスマートな方法があればご教示頂けると助かります。

該当のソースコード

カレンダーのコードは以下の通りです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10
11<style>
12@charset "utf-8";
13
14/*全体*/
15.wrapper{
16    max-width: 170px;
17    margin: 0 auto;
18    color: #666;
19}
20#header {
21    text-align: center;
22    font-size: 1rem;
23    width: 100%;
24    margin: 1rem 0 0;
25}
26
27/*カレンダー*/
28#calendar {
29    text-align: center;
30    width: 100%;
31    font-size: 0.8rem;
32}
33table {
34    outline: 2px solid #ddd;
35    border-collapse: collapse;
36    width: 100%;
37}
38th {
39    color: #333333;
40}
41th, td {
42    outline: 1px solid #ddd;
43    padding-top: 0.2rem;
44    padding-bottom: 0.2rem;
45    text-align: center;
46}
47/*日曜日*/
48td:first-child {
49    color: rgb(197, 0, 0);
50}
51/*土曜日*/
52td:last-child {
53    /*color: rgb(0, 0, 163);*/
54}
55/*前後月の日付*/
56td.disabled {
57    color: #ccc;
58}
59/*本日*/
60td.today {
61    background-color: #d1ad74;
62    color: #fff;
63}
64
65/*ボタン*/
66#next-prev-button {
67    position: relative;
68}
69#next-prev-button button{
70    cursor: pointer;
71    background: #B78D4A;
72    color: #fff;
73    border: 1px solid #B78D4A;
74    border-radius: 4px;
75    font-size: 1rem;
76    padding: 0.1rem 1.2rem;
77    margin: 0.5rem 0;
78}
79#next-prev-button button:hover{
80    background-color: #D4BB92;
81    border-color: #D4BB92;
82}
83#prev {
84    float: left;
85}
86#next {
87    float: right;
88}
89  
90</style>
91
92<div class="wrapper">
93    <!-- 年月表示 -->
94    <h1 id="header"></h1>
95
96    <!-- クリックで月移動 -->
97    <div id="next-prev-button">
98        <button id="prev" onclick="prev()">‹</button>
99        <button id="next" onclick="next()">›</button>
100    </div>
101
102    <!-- カレンダー -->
103    <div id="calendar"></div>
104</div>
105
106<script>
107const week = ["日", "月", "火", "水", "木", "金", "土"];
108const today = new Date();
109// 月末だとずれる可能性があるため、1日固定で取得
110var showDate = new Date(today.getFullYear(), today.getMonth(), 1);
111
112// 初期表示
113window.onload = function () {
114    showProcess(today, calendar);
115};
116// 前の月表示
117function prev(){
118    showDate.setMonth(showDate.getMonth() - 1);
119    showProcess(showDate);
120}
121
122// 次の月表示
123function next(){
124    showDate.setMonth(showDate.getMonth() + 1);
125    showProcess(showDate);
126}
127
128// カレンダー表示
129function showProcess(date) {
130    var year = date.getFullYear();
131    var month = date.getMonth();
132    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";
133
134    var calendar = createProcess(year, month);
135    document.querySelector('#calendar').innerHTML = calendar;
136}
137
138// カレンダー作成
139function createProcess(year, month) {
140    // 曜日
141    var calendar = "<table><tr class='dayOfWeek'>";
142    for (var i = 0; i < week.length; i++) {
143        calendar += "<th>" + week[i] + "</th>";
144    }
145    calendar += "</tr>";
146
147    var count = 0;
148    var startDayOfWeek = new Date(year, month, 1).getDay();
149    var endDate = new Date(year, month + 1, 0).getDate();
150    var lastMonthEndDate = new Date(year, month, 0).getDate();
151    var row = Math.ceil((startDayOfWeek + endDate) / week.length);
152
153    // 1行ずつ設定
154    for (var i = 0; i < row; i++) {
155        calendar += "<tr>";
156        // 1colum単位で設定
157        for (var j = 0; j < week.length; j++) {
158            if (i == 0 && j < startDayOfWeek) {
159                // 1行目で1日まで先月の日付を設定
160                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
161            } else if (count >= endDate) {
162                // 最終行で最終日以降、翌月の日付を設定
163                count++;
164                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
165            } else {
166                // 当月の日付を曜日に照らし合わせて設定
167                count++;
168                if(year == today.getFullYear()
169                  && month == (today.getMonth())
170                  && count == today.getDate()){
171                    calendar += "<td class='today'>" + count + "</td>";
172                } else {
173                    calendar += "<td>" + count + "</td>";
174                }
175            }
176        }
177        calendar += "</tr>";
178    }
179    return calendar;
180}
181</script>
182
183
184</body>
185</html>

試したこと

cssにてtd:nth-child()を試しましたが、カレンダーの同じ列が全て適用されてしまいました。

以上、よろしくお願いいたします。

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

回答1件

ベストアンサー

単純に日付を id に指定したいということであれば、以下のような記述で設定できるかと思います。
count 変数に日付が入っているのでそれを id として設定してあげれば良いかと思います。

javascript
1// 当月の日付を曜日に照らし合わせて設定
2count++;
3if(year == today.getFullYear()
4  && month == (today.getMonth())
5  && count == today.getDate()){
6    // calendar += "<td class='today'>" + count + "</td>";
7    calendar += `<td class='today' id='${count}'>${count}</td>`;
8} else {
9    // calendar += "<td>" + count + "</td>";
10    calendar += `<td id='${count}'>${count}</td>`;
11}

javascripit
1// 初期表示
2window.onload = function () {
3    showProcess(today, calendar);
4    document.getElementById("1").style.background = "#0f0"; // idが「1」の場合に緑色に設定
5};

■ 実行例