【初心者向け】JavaScriptでカレンダーを自作する方法｜HTML・CSS・JSコード付き

はじめに

「JavaScriptでカレンダーを作ってみたいけど、どう始めればいいか分からない…」そんな方に向けて、このページではゼロからカレンダーを自作する手順を丁寧に解説します。

ライブラリを使わずに自分の手でカレンダーを作ることで、JavaScriptの基本的な使い方からDOM操作、日付の扱い方まで、実践的なスキルを身につけることができます。

「難しそう」と感じるかもしれませんが、実は構造はとてもシンプル。
この記事では、HTML・CSS・JavaScriptのコードをすべて掲載し、初心者でも迷わず実装できるようにしています。

これから一緒に、自分だけのカレンダーを作っていきましょう！

完成イメージと機能の概要

See the Pen 自作カレンダー by take it easy (@take-it-easy) on CodePen.

作成するカレンダーの特徴

• 現在の年月が表示される
• 前月・次月・前年・来年への切り替えボタン付き
• 日曜日は赤、土曜日は青で表示
• 空白の日付はグレーで表示

できること

• ページ読み込み時に今月のカレンダーを表示
• ボタンをクリックして年月を切り替え

---

カレンダー作成に必要な準備

使用する技術

• HTML：構造の定義
• CSS：見た目のデザイン調整
• JavaScript：カレンダーの生成・表示・ボタン操作

フォルダ構成と読み込む外部リソース

特別なライブラリは不要ですが、ボタンのアイコンにFont Awesomeを使用します。以下のCDNをheadタグ内に記述してください：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

---

HTMLの実装

構造と役割の説明

HTMLでは、カレンダーの見出し（年月の表示）と、前後の月や年へ移動するボタン、そしてカレンダー本体を表示するためのエリアを定義します。
それぞれにIDを設定し、JavaScriptから操作できるようにしておくことがポイントです。

HTMLコード全文

<div class="calendar_area">
  <div class="calendar_header">
    <p id="year_month_label"></p>
    <button id="prev_year_btn" onClick="prev_year()"><i class="fas fa-angle-double-left"></i></button>
    <button id="prev_month_btn" onClick="prev_month()"><i class="fas fa-angle-left"></i></button>
    <button id="now_btn" onClick="now_month()"><i class="fas fa-circle"></i></button>
    <button id="next_month_btn" onClick="next_month()"><i class="fas fa-angle-right"></i></button>
    <button id="next_year_btn" onClick="next_year()"><i class="fas fa-angle-double-right"></i></button>
  </div>
  <div id="calendar_body"></div>
</div>

---

CSSの実装

デザインの基本方針

CSSでは、カレンダーの見た目を整えるためにレイアウト、色、フォントサイズ、枠線などを設定します。
日曜日や土曜日の色分けや、マウスオーバー時の背景色変更など、ユーザーが直感的に見やすくなる工夫を加えます。

CSSコード全文と要点解説

.calendar_header {
  text-align: center;
}

.calendar_header > #year_month_label {
  margin: 20px 20px 10px;
  font-size: 1.5em;
  font-weight: bold;
}

button {
  width: 3em;
  height: 2em;
}

.calendar_tbl {
  min-width: 600px;
  margin: 20px auto;
  border: 1px solid;
  border-collapse: collapse;
}

.calendar_tbl th {
  text-align: center;
  border: 1px solid #000;
}

.calendar_tbl th:first-child {
  color: red;
}

.calendar_tbl th:last-child {
  color: blue;
}

.calendar_tbl td {
  text-align: center;
  vertical-align: middle;
  height: 3em;
  border: 1px solid #000;
}

.calendar_tbl td.no_date {
  background-color: #f2f2f2;
}

.calendar_tbl td:first-child {
  background-color: #fadbda;
  color: red;
}

.calendar_tbl td:last-child {
  background-color: #ddeeff;
  color: blue;
}

.calendar_tbl td.with_date:hover {
  background-color: #fadfc0;
}

---

JavaScriptの実装

日付処理の考え方

JavaScriptでは、Dateオブジェクトを使って現在の年月、月初の曜日、月末の日付などを取得し、それをもとにカレンダーの表を動的に生成します。
クリックイベントで月や年の切り替えも可能にしています。

JavaScriptコード全文と解説

コードは以下の3つの役割に分かれています：

• カレンダーを表示・更新する関数
• HTMLのカレンダーテーブルを生成する関数
• 前年・次年・前月・次月・今月ボタンのイベント処理

それぞれの関数が、日付の処理とDOMへの描画を担当しています。
下記のコードを使って動作確認ができます。

// 曜日の定義
const week = ["日", "月", "火", "水", "木", "金", "土"];

// 今日の日付
const today = new Date();

// 表示用の日付
let showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 表示された時
window.onload = function () {
  showCalendar(showDate);
};

// カレンダーの表示
function showCalendar(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  document.querySelector('#year_month_label').innerHTML = `${year}年 ${month}月`;
  document.querySelector('#calendar_body').innerHTML = createCalendarTable(year, month);
}

// カレンダーテーブルの作成
function createCalendarTable(year, month) {
  let html = '<table class="calendar_tbl"><tr>';
  for (let i = 0; i < week.length; i++) {
    html += `<th>${week[i]}</th>`;
  }
  html += '</tr>';

  const startDay = new Date(year, month - 1, 1).getDay();
  const endDate = new Date(year, month, 0).getDate();
  let count = 0;

  for (let i = 0; i < 6; i++) {
    html += '<tr>';
    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < startDay) {
        html += '<td class="no_date"></td>';
      } else if (count >= endDate) {
        html += '<td class="no_date"></td>';
      } else {
        count++;
        html += `<td class="with_date">${count}</td>`;
      }
    }
    html += '</tr>';
  }
  html += '</table>';
  return html;
}

// 前年に移動
function prev_year() {
  showDate.setFullYear(showDate.getFullYear() - 1);
  showCalendar(showDate);
}

// 来年に移動
function next_year() {
  showDate.setFullYear(showDate.getFullYear() + 1);
  showCalendar(showDate);
}

// 前月に移動
function prev_month() {
  showDate.setMonth(showDate.getMonth() - 1);
  showCalendar(showDate);
}

// 次月に移動
function next_month() {
  showDate.setMonth(showDate.getMonth() + 1);
  showCalendar(showDate);
}

// 今月に戻る
function now_month() {
  showDate = new Date();
  showCalendar(showDate);
}

---

よくある質問（FAQ）

---

まとめ

自作カレンダーで学べること

JavaScriptでカレンダーを自作する過程を通して、日付の処理に使うDateオブジェクトの活用法、HTML要素をJavaScriptで動的に生成する方法、さらにボタンクリックなどのユーザー操作に応じて画面を更新するDOM操作の基礎を学ぶことができます。
これらはWeb開発の基本的な技術であり、他のアプリケーション制作にも応用できる重要なスキルです。

自作することで理解が深まり、他のWebアプリケーションにも応用できます。
ぜひ手を動かしながら挑戦してみてください！