Javascript カレンダーの色を変えたい。

javascriptを学習中です。ネットにあるサイトを参考にシンプルなカレンダーを作ってみたのですが、カレンダーの描画に前月末日も含めて表示されるようになっています。
そのため、今月の日付とわかるように前月、来月の日付はグレーにして、今月の日付は全て黒色で表示させたいと思ってます。

調べたところCSSで色変更ができるようですが、javascriptを使って上記のように色を書けないのでしょうか。
よろしければ学習中ということもありjavascriptでの書き方をご教授頂ければと思っています(CSSでも構わないです)

ソースコードは以下です。

<html> <head> <title>カレンダー</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function() { setCalendar(); }; function setCalendar(YYYY, MM) { var YYYY, MM; // 年と月に値がなければYYYYとMM今月のものを表示させるため値を渡すようにする if(!YYYY && !MM) { var YYYY = new Date().getFullYear(); var MM = new Date().getMonth(); MM = MM -(-1); } var LastMonthdate = new Date(YYYY,MM-1,0); //前月末 var ThisMonthdate = new Date(YYYY,MM,0); //当月末 LastMonthLastDay = LastMonthdate.getDate(); //前月末日 LastMonthLastWeek = LastMonthdate.getDay(); //前月末曜日 ThisMonthLastDay = ThisMonthdate.getDate(); //当月末日 ThisMonthLastWeek = ThisMonthdate.getDay(); //当月末曜日 var days = [];

if(LastMonthLastWeek != 6){
// 前月最終曜日から月末曜日までの日付
for(var i=LastMonthLastWeek; i>=0; i--){
days[LastMonthLastWeek-i] = (LastMonthLastDay - i);
}
// 当月日付
for(var i=1; i<=ThisMonthLastDay; i++){
days[LastMonthLastWeek+i] = i;
}
// 当月末が35番目までに終了
if((LastMonthLastWeek + ThisMonthLastDay) <= 34){
// 翌月日付
for(var i=1; i<=35-LastMonthLastWeek-ThisMonthLastDay; i++){
days[LastMonthLastWeek+ThisMonthLastDay+i] = i;
}
}
// 前月末が土曜日
}else if (LastMonthLastWeek == 6) {
// 当月日付
for(var i=1; i<=ThisMonthLastDay; i++){
days[i-1] = i;
}
// 翌月日付
for(var i=0; i<35-ThisMonthLastDay; i++){
days[ThisMonthLastDay+i] = i + 1;
}
}

var out = "<table>";

out += "<caption>";
out += "<a href='#' onclick='setCalendar();return false;'>今月</a>";
out += "<a href='#' YYYY='"+YYYY+"' MM='"+MM+"' onclick='backMM(this);return false;'><<</a>";
out += "<a href='#' YYYY='"+YYYY+"' MM='"+MM+"' onclick='nextMM(this);return false;'>>></a>";
out += YYYY+'年'+MM+'月';
out += "</caption>";

var week = ["日", "月", "火", "水", "木", "金", "土"];
out += "<tr>";
for(var i in week){
out += "<td>"+week[i]+"</td>";
}

var row = days.length/7;
for(var i=1; i<=row; i++){
out += "<tr>";
for(var j=7i-6; j<=7i; j++){
out += "<td class='tdlink' row='"+i+"' YYYY='"+YYYY+"' MM='"+MM+"' DD='"+days[j-1]+"' onclick='show(this);return false;'>"+days[j-1]+"</td>";
}
out += "</tr>";
}
out += "</table>";
document.getElementById("result").innerHTML = out;
}

if (row == 1 && DD > 7) {
if (MM != 1) {
MM = MM -1;
} else if (MM == 1) {
YYYY = YYYY - 1;
MM = 12;
}
}
if ((row == 5 || row == 6) && DD < 7) {
if (MM != 12) {
MM = parseInt(MM) + 1;
} else if (MM == 12) {
YYYY = parseInt(YYYY) + 1;
MM = 1;
}
}
alert(YYYY+'/'+MM+'/'+DD);
}
</script>

m.ts10806

2021/01/06 11:13

コードはマークダウンのcode機能にてご提示ください

babu_babu_baboo

2021/01/06 21:27 編集

2026年2月は、ちょうど4週（28日）に収まります。35日決め打ちではまずいのでは？ days の配列をもう一つ用意し、前月分と来月分の日を作成するループの中で、その配列にメモする。 HTMLを構成するときに、その配列を見ながらclass(Name)でもつける。個人的にはループの中に IF 文は多用したくありませんが。 </td> とか </tr> は翻訳機に任せて省略してもよいのでは？むしろ <tbody> を付けたい。追記：肝心なところを忘れていました。アンカータグに勝手にYYYY属性なんて付けては駄目です。カスタムデータ属性にしましょう！ "data-YYYY"

kayabacho

2021/01/07 03:34

ご指摘有難う御座います！色々無駄がおおいようでしたので、HTMLと属性は見直そうと思います！

m.ts10806

2021/01/07 03:38

質問は編集できます。

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

回答1件

ベストアンサー

こんにちは。

学習中ということもありjavascriptでの書き方を

そうなんですね！
では、バッドプラクティスをご紹介します。

js
1            if (LastMonthLastWeek != 6) {
2                // 前月最終曜日から月末曜日までの日付
3                for (var i = LastMonthLastWeek; i >= 0; i--) {
4                    days[LastMonthLastWeek - i] = -(LastMonthLastDay - i); // 変更
5                }
6                // 当月日付
7                for (var i = 1; i <= ThisMonthLastDay; i++) {
8                    days[LastMonthLastWeek + i] = i;
9                }
10                // 当月末が35番目までに終了
11                if ((LastMonthLastWeek + ThisMonthLastDay) <= 34) {
12                    // 翌月日付
13                    for (var i = 1; i <= 35 - LastMonthLastWeek - ThisMonthLastDay; i++) {
14                        days[LastMonthLastWeek + ThisMonthLastDay + i] = -i; // 変更
15                    }
16                }
17                // 前月末が土曜日
18            } else if (LastMonthLastWeek == 6) {
19                // 当月日付
20                for (var i = 1; i <= ThisMonthLastDay; i++) {
21                    days[i - 1] = i;
22                }
23                // 翌月日付
24                for (var i = 0; i < 35 - ThisMonthLastDay; i++) {
25                    days[ThisMonthLastDay + i] = -(i + 1); // 変更
26                }
27            }
28
29//...
30
31                    var day = Math.abs(days[j - 1]); // 追加
32                    var f = days[j - 1] < 0; // 追加
33                    out += "<td class='tdlink' row='" + i + "' YYYY='" + YYYY + "' MM='" + MM + "' DD='" + day + "' onclick='show(this);return false;'" + ( f ? " style='color:gray'" : "" ) + ">" + day + "</td>"; // 変更
34