javascriptで祝日表示ありのカレンダーを作りたい

Question

・やりたいこと
１０月のカレンダーを作っているのですが祝日の<td>のみ背景色を変えたいです。
どうすればできるのかお力添えいただきたいです。

{
      const calender=document.getElementById('calenderBody');
      let now=new Date();
      let now_year=now.getFullYear();
      let now_month=now.getMonth();
      let first_date=new Date(now_year,now_month,1).getDay();
      let last_date=new Date(now_year,now_month+1,0).getDate();
      let dates=[
        1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,
        18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36
      ].map(function(date){
        return date-first_date
      });
      let holiday=[
        14,22
      ];//10月の休日
      for (let i = 0; i < 5; i++) {
        const row = calender.insertRow(-1);
        const dates_row=dates.slice(i*7,i*7+7);
        let judgeHoliday=dates_row.concat(holiday);
        row.innerHTML=dates_row.map(function(date){
          date=date<1||date>last_date ? '':date;
          return '<td>'+date+'</td>'
        }).join(''); 
      }
}

Comments

[m.ts10806]

１か月なのになぜ３６も準備してるかとか、こんな固定で作ってて他の月はどうするのとか気になるところは多々あるのですが、このコードを書ける人が直面している問題には思えません。
どこかの記事のコピペなのでしょうか？どこまでこのコードを把握されてますか？

[tanishi_a]

1〜36 の配列は、日曜始まりのために、先頭に空白セルを入れるために使用してるみたいですね。

[s-a0202]

久々にプログラミングに触れるのでおかしいところだらけで申し訳ないです、
とりあえずひと月だけつくってみようかと思ったので固定にしてます。
ほとんど記事を見ながらという感じで、理解しているところとしていないところがあります。
理解できていないのはsliceの引数がどう機能しているのかです。（７日区切りにしているのはなんとなくわかります、、）
自分はjudgeHolidayでdatesとholidayを結合して、被っている日にちがあればその日にちのtdタグに背景色をつけたいと考えています。（filterとindexOfを使うのでしょうか、？）

Answer 1

この部分を、

date = date < 1 || date > last_date ? '' : date;
return '<td>'+date+'</td>'

このように書き換えることで、やりたいことは出来るとは思います。

date = date < 1 || date > last_date ? '' : date;
if (holiday.includes(date)) {
  return '<td style="background-color: pink;">' + date + '</td>';
}
return '<td>'+date+'</td>'

---

あと、本質と関係ないですが、

• 綴り間違い： calender → calendar
• 変数名 holiday は配列なので holidays のほうが統一感がある
• 変数名の xxx_date が、日付を指している場合と曜日を指している場合とが混在していて分かりづらい

---

ただ、他の人も仰っている通り、メンテがつらいコードですね・・。

直すとしたらこうかなー、、と思って書いてみましたが、これはこれで・・。

function formatDate(d) {
  return d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
}
function createCalendar() {
  const calendarTable = document.getElementById('calendarTable');
  const now              = new Date();
  const today            = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const beginningOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
  const endOfMonth       = new Date(now.getFullYear(), now.getMonth() + 1, 0);

  let holidays = [
    '2019/10/14',
    '2019/10/22',
  ];

  const datesTable = [];
  for (let week = -1, date = beginningOfMonth; date <= endOfMonth; date = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)) {
    const dayOfWeek = date.getDay();
    if (datesTable.length === 0 || dayOfWeek === 0) {
      datesTable.push(new Array(7).fill('<td></td>'));
      week += 1;
    }
    const style = holidays.includes(formatDate(date)) ? 'background-color: pink;' : '';   
    datesTable[week][dayOfWeek] = `<td style="${style}">${date.getDate()}</td>`;
  }
  let html = '';
  for (const row of datesTable) {
    const tr = calendarTable.insertRow(-1);
    for (const cell of row) {
      tr.innerHTML += cell;
    }
  }
}

Answer 2

めんどくさいので全て書き換え

<table>
  <tr>
    
  </tr>
</table>

var days = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
var holiday = [14,22];
var aiueo = '';
for (i=1;i<=days.length;i++) {
  var color = '';
  for (j=0;j<=holiday.length;j++) {
    if (i==holiday[j]) {
      color = 'background:red';
      break;
    }
  }
  $('tr').append( '<td style=' + color +'>' + i + '</td>' );
}

Comments

[kyoya0819]

手動でやったほうが楽だと思う。