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

Question

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

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

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

カレンダーのJSコード

   function presetDiary(dateStr){
     var button = document.getElementById("button");
     button.setAttribute("data-date", dateStr);
     var diary_date = document.getElementById("diary_date");
     diary_date.innerHTML = dateStr;
     var title = localStorage[dateStr+"_title"];
     var body  = localStorage[dateStr+"_body"];
     var diary_title = document.getElementById('diary_title');
     var diary_body = document.getElementById('diary_body');
     if(title){
       diary_title.value = title;
     }else{
       diary_title.value = "";
     }
     if(body){
       diary_body.value = body;
     }else{
       diary_body.value = "";
     }
   }

   function onSave(obj){
     let dateStr   = obj.getAttribute("data-date");
     let diary_title  = document.getElementById('diary_title').value;
     let diary_body   = document.getElementById('diary_body').value;
     localStorage[dateStr+"_title"] = diary_title;
     localStorage[dateStr+"_body"] = diary_body;
     window.alert("日記を投稿しました");
     location.reload();
   }

    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let today = date.getDate();
    let firstDate = new Date(year, month-1, 1);
    let lastDate = new Date(year, month, 0);
    let table_title = year+"年 "+month+"月";
    let captionHtml = "<caption>"+table_title+"</caption>";
    let weekdays = ["日", "月", "火", "水", "木", "金", "土"];
    let weekdaysStr = "<tr>";
    for ( let i=0; i < 7; i++){
       if(i==0){
         weekdaysStr += "<td class='sun'>" + weekdays[i] + "</td>";
       }else if(i==6){
         weekdaysStr += "<td class='sat'>" + weekdays[i] + "</td>";
       }else{
         weekdaysStr += "<td>" + weekdays[i] + "</td>";
       }
    }
    weekdaysStr += "</tr>";
    let htmlStr = "<tr>";
    let startWeekDay = firstDate.getDay();
    for ( let i=0; i < startWeekDay; i++){
       htmlStr += "<td>&nbsp;</td>";
    }
    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;
        let cellStr = 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";
    }
    let lastDayWeek = lastDate.getDay();
    if (lastDayWeek != 6) {
      for ( let i=lastDayWeek+1; i <= 6; i++){
         htmlStr += "<td>&nbsp;</td>";
      }
      htmlStr += "</tr>";
    }
    document.getElementById("calendar").innerHTML = "<table>" + captionHtml + weekdaysStr + htmlStr + "</table>";

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

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

Answer 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";
}

Comments

[PHP_NewYorker]

大変遅くなりまして、申し訳ございません。
こちらの方を使用させていただきました。
ありがとうございます！