1. ホーム
2. パソコン
3. javascript

【javascript】カレンダーの作り方 new date()で日付を取得、計算し、テーブルに表示

投稿日 : 2022年09月18日 更新日 : 2023年01月15日

今月のカレンダー

参考

【CSS】カレンダーデザイン(Calendar Design)、ニューモーフィズムでおしゃれに装飾

HTML

<p class="yearMonth"></p>
<div id="calendar"></div>

年月表示とカレンダーの1行目

CSS

展開

.yearMonth{
  margin: 10px;
  font-weight: bold;
}
#calendar {
  margin: 10px auto;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.day{
  background: rgb(233, 255, 255);
  font-weight: bold;
}
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
/* 土曜日 */
td:nth-child(6) {
  color: royalblue;
}
/* 日曜日 */
td:last-child {
  color: red;
}

javascript

展開

const calendar = document.getElementById("calendar");
const yearMonth = document.querySelector(".yearMonth");
const days = ["月", "火", "水", "木", "金", "土", "日"];
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
// HTMLを組み立てる変数
let calendarHtml = ""; 

// 年月の表示
yearMonth.textContent = `${year}年${month}月`;          
          
calendarHtml += "<table><tr>";

// 曜日の行を作成(テーブル1行目)
for (let i = 0; i < days.length; i++) {
  // 曜日を表示させる1行目にはクラスdayを付与する
  calendarHtml += "<td class='day'>" + days[i] + "</td>";
}

calendarHtml += "</tr>";

先月末の表示

javascript

展開

// 前月の最後の日の情報
const lastMonthEndDate = new Date(year, month - 1, 0); 
// 前月の末日
const lastMonthEndDayCount = lastMonthEndDate.getDate(); 
// 月の最初の日の曜日を取得
const startDay = startDate.getDay();

// 6週分の行を生成
for (let w = 0; w < 6; w++) {
  calendarHtml += "<tr>";

  // 月～日まで
  for (let d = 0; d < 7; d++) {
    if (w == 0 && d < startDay - 1) { // 第一週目で、且つ今月1日の曜日の前まで
      // 1行目で1日の前の日付
      let num = lastMonthEndDayCount - startDay + d + 2;
      calendarHtml +=
        '<td class="is-disabled">' + num + "</td>";
  } 
}

来月最初の表示

javascript

展開

let dayCount = 1; // 日にちのカウント

if (w == 0 && d < startDay - 1) {
  // 1行目で1日の前の日付
  let num = lastMonthEndDayCount - startDay + d + 2;
  calendarHtml +=
    '<td class="is-disabled">' + num + "</td>";
} else if (dayCount > endDayCount) {
  // 末尾の日数を超えた
  let num = dayCount - endDayCount;
  calendarHtml +=
    '<td class="is-disabled">' + num + "</td>";
  dayCount++;
}

今月の表示

javascript

展開

} else if (dayCount > endDayCount) {
  // 末尾の日数を超えた
  let num = dayCount - endDayCount;
  calendarHtml +=
    '<td class="is-disabled">' + num + "</td>";
  dayCount++;
} else {
  // 今日の日付にクラスtodayを付与
  if(dayCount == today){
    calendarHtml += `<td class="today">${dayCount}</td>`;
    dayCount++;
  }else{
    calendarHtml += `<td>${dayCount}</td>`;
    dayCount++;
  }
}

CSS

.today{
  background: rgb(212, 212, 212);
}

最後の行が不要の時

// trをすべて取得
const tr = document.querySelectorAll(".calendar-container tr")
// 最終行の最初のtdにクラスis-disabledが含まれていれば、最終行を削除
if(tr[6].firstChild.classList.contains("is-disabled")){
  tr[6].remove();
}

参考

【JavaScrypt】時刻を取得する方法、現在の日時を表示する方法

【javascript】バッククォート内のドルマークの使い方 ` ${ } `

【javascript】よく使う演算子の使い方 "++", "--", "+=", "-=", "%", "&&", "||"

まとめ