【JavaScript】カレンダーを開いた際、今日の日付を太字で表示させる

お世話になっております。

タイトル通りになるのですが、カレンダーのページを開いた際、今日の日付が表示されている状態で
わかりやすいように太字にしたいと思っております。

言葉だけだとわかりにくい為、画像とコードの方を展開致します。

カレンダーのJSコード

JavaScript
1   function presetDiary(dateStr){
2     var button = document.getElementById("button");
3     button.setAttribute("data-date", dateStr);
4     var diary_date = document.getElementById("diary_date");
5     diary_date.innerHTML = dateStr;
6     var title = localStorage[dateStr+"_title"];
7     var body  = localStorage[dateStr+"_body"];
8     var diary_title = document.getElementById('diary_title');
9     var diary_body = document.getElementById('diary_body');
10     if(title){
11       diary_title.value = title;
12     }else{
13       diary_title.value = "";
14     }
15     if(body){
16       diary_body.value = body;
17     }else{
18       diary_body.value = "";
19     }
20   }
21
22   function onSave(obj){
23     let dateStr   = obj.getAttribute("data-date");
24     let diary_title  = document.getElementById('diary_title').value;
25     let diary_body   = document.getElementById('diary_body').value;
26     localStorage[dateStr+"_title"] = diary_title;
27     localStorage[dateStr+"_body"] = diary_body;
28     window.alert("日記を投稿しました");
29     location.reload();
30   }
31
32    let date = new Date();
33    let year = date.getFullYear();
34    let month = date.getMonth() + 1;
35    let today = date.getDate();
36    let firstDate = new Date(year, month-1, 1);
37    let lastDate = new Date(year, month, 0);
38    let table_title = year+"年 "+month+"月";
39    let captionHtml = "<caption>"+table_title+"</caption>";
40    let weekdays = ["日", "月", "火", "水", "木", "金", "土"];
41    let weekdaysStr = "<tr>";
42    for ( let i=0; i < 7; i++){
43       if(i==0){
44         weekdaysStr += "<td class='sun'>" + weekdays[i] + "</td>";
45       }else if(i==6){
46         weekdaysStr += "<td class='sat'>" + weekdays[i] + "</td>";
47       }else{
48         weekdaysStr += "<td>" + weekdays[i] + "</td>";
49       }
50    }
51    weekdaysStr += "</tr>";
52    let htmlStr = "<tr>";
53    let startWeekDay = firstDate.getDay();
54    for ( let i=0; i < startWeekDay; i++){
55       htmlStr += "<td>&nbsp;</td>";
56    }
57    for(let i=1; i <= lastDate.getDate(); i++){
58        let date = new Date(year, month-1, i);
59        let weekDay = date.getDay();
60        let dateStr = year+"."+month+"."+i;
61        let cellStr = date.getDate();
62      
63       if(localStorage[dateStr+"_title"]) cellStr = "<u>" + cellStr + "</u>";
64      
65        if(weekDay == 0) htmlStr += "<tr>";
66        if(weekDay == 0){
67          htmlStr += "<td class='sun'>";
68        }else if(weekDay == 6){
69          htmlStr += "<td class='sat'>";
70        }else{
71          htmlStr += "<td>";
72        }
73
74      htmlStr +=  "<a onclick='presetDiary(\"" + dateStr + "\");'>" + cellStr + "</a></td>";
75
76        if(weekDay == 6) htmlStr += "</tr>\n";
77    }
78    let lastDayWeek = lastDate.getDay();
79    if (lastDayWeek != 6) {
80      for ( let i=lastDayWeek+1; i <= 6; i++){
81         htmlStr += "<td>&nbsp;</td>";
82      }
83      htmlStr += "</tr>";
84    }
85    document.getElementById("calendar").innerHTML = "<table>" + captionHtml + weekdaysStr + htmlStr + "</table>";

作成したカレンダーの見た目

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

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

回答1件

ベストアンサー

次のようなコードはどうでしょうか

for (let i = 1; i <= lastDate.getDate(); i++) {
  let date = new Date(year, month - 1, i);
  let weekDay = date.getDay();
  let dateStr = year + "." + month + "." + i;

　// 三項演算子を使い日付が今日の場合のみ b タグで太字にしました。
  let cellStr =
    date.getDate() === today ? `<b>${date.getDate()}</b>` : date.getDate();

  if (localStorage[dateStr + "_title"]) cellStr = "<u>" + cellStr + "</u>";

  if (weekDay == 0) htmlStr += "<tr>";
  if (weekDay == 0) {
    htmlStr += "<td class='sun'>";
  } else if (weekDay == 6) {
    htmlStr += "<td class='sat'>";
  } else {
    htmlStr += "<td>";
  }

  htmlStr +=
    "<a onclick='presetDiary(\"" + dateStr + "\");'>" + cellStr + "</a></td>";

  if (weekDay == 6) htmlStr += "</tr>\n";
}

投稿2020/12/29 10:07